Belajar Cara Mengupload File pada Firebase Storage


Assalamualaikum Warahmatullahi Wabarakatuh.

Firebase Cloud Storage adalah layanan yang disediakan Google untuk para mengembang aplikasi, layanan ini digunakan untuk menyimpan data berupa file seperti gambar, video, audio, dll. Yang dapat kita upload melalui sisi server dan juga klien. Firebase Storage ini mempunyai operasi yang stabil serta keamanan yang kuat yang dapat kita atur untuk publik, pribadi atau untuk user yang sudah ter-autentiksi.


Seperti yang sudah saya jelaskan sebelumnya, Firebase Storage mempunyai operasi yang stabil, artinya bagaimana pun kualitas jaringannya saat proses upload atau download jika terjadi kesalahan pada jaringan, maka proses akan dihentikan dan dapat dilanjutkan kembali tanpa harus mengulai proses upload atau download dari awal, jadi dapat menghemat waktu dan juga bandwidth pengguna.

Materi lainnya yang direkomendasikan:

Pada tutorial ini kita akan belajar membuat aplikasi sederhana dengan menggunakan Firebase SDK Cloud Storage. Materi yang akan dibahas pada tutorial yaitu:
  1. Mengintergasikan Firebase Storage SDK pada aplikasi klien.
  2. Membuat referensi untuk lokasi file yang akan diupload.
  3. Mengupload file berupa gambar yang diambil dari kamera ponsel atau galeri.

Belajar Cara Mengupload File pada Firebase Storage

1) Tambahkan Firebase kedalam Project Aplikasi,Untuk Tutorialnya kalian bisa lihat Disini

2) Selanjutnya buka file build.gradle (module:app), tambahkan library Firebase Storage SDK berikut ini kedalam dependencies.
dependencies {
     implementation 'com.google.firebase:firebase-storage:16.0.1'
}
3) Buka AndroidManifest.xml, lalu tambahkan permission berikut ini, untuk mengijinkan aplikasi membuka socket jaringan serta mengijinkan aplikasi untuk membaca data pada penyimpanan external dan mengizinkan akses kamera pada ponsel.
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
4) Buka layanan Firebase Storage pada Firebase Console kalian, disini kita akan membuat folder/direktori baru bernama "gambar"


5) Secara default aturan keamanan dari Firebase Storage membutuhkan autentikasi dari user, agar user dapat menulis serta membaca file pada Storage seperti ini.


Pada tutorial ini kita tidak membutuhkan aturan tersebut, untuk itu kita akan mengubahnya menjadi publik, seperti berikut ini.
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}
Tapi jika kalian membuat project aplikasi sungguhan yang akan di publikasikan, aturan tersebut perlu diterapkan, karena untuk mengamankan file supaya tidak sembarang user dapat mengakses Storage tersebut.

6) Buka kembali project android studio kalian, pertama kita akan membuat layout actvity pada MainActivity kita, disini kita menggunakan 2 buah button untuk mengambil gambar dan mengupload gambar serta imageView untuk menampilkan gambar yang diambil.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="12dp"
    android:gravity="top|center"
    android:orientation="vertical"
    tools:context="cianjur.developer.net.firebaseexample.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/select_Image"
            style="@style/Widget.AppCompat.Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Pilih Gambar" />

        <Button
            android:id="@+id/upload"
            style="@style/Widget.AppCompat.Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:enabled="false"
            android:text="Upload Gambar" />
    </LinearLayout>

    <ImageView
        android:id="@+id/imageContainer"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="8dp"
        android:visibility="gone" />

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:max="100"
        android:progress="0"
        android:visibility="gone" />

</LinearLayout>
View:


Secara default kita set Button untuk mengupload gambar menjadi false, serta ImageView dan ProgressBar kita set Visibilitynya menjadi Gone.

7) Buka class MainActivity.java kalian, pertama kita perlu membuat beberapa persiapan seperti:
  1. Membuat variable/instance dari widget yang akan kita gunakan.
  2. Membuat instance StorageReference dan mendapatkan referensi dari Storage untuk mendapatkan lokasi file yang akan disimpan, 
  3. Membuat 2 buah method untuk mengupload gambar dan mengambil gambar dari kamera atau galeri.
  4. Membuat method onActivityResult(), untuk mendapatkan dan memproses data gambar yang telah diambil dari kamera atau galeri dan menampilkannya pada ImageView.

Masukan source codenya seperti berikut ini:
//========= WILDAN TECHNO ART =========//
/*
 * Belajar menggunakan Firebase Storage
 * Bersama Wildan M Athoillah
 */
//======= CIANJUR APPS DEVELOPER ======//

package cianjur.developer.net.firebaseexample;

import android.content.DialogInterface;
import android.content.Intent;
import android.net.Uri;
import android.provider.MediaStore;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.ProgressBar;

import com.google.firebase.storage.FirebaseStorage;
import com.google.firebase.storage.StorageReference;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    //Deklarasi Variabel untuk Widget
    private Button Upload, UnggahGambar;
    private ImageView ImageContainer;
    private ProgressBar progressBar;

    //Deklarasi Variable StorageReference
    private StorageReference reference;

    //Kode permintaan untuk memilih metode pengambilan gamabr
    private static final int REQUEST_CODE_CAMERA = 1;
    private static final int REQUEST_CODE_GALLERY = 2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Upload = findViewById(R.id.upload);
        Upload.setOnClickListener(this);
        UnggahGambar = findViewById(R.id.select_Image);
        UnggahGambar.setOnClickListener(this);
        ImageContainer = findViewById(R.id.imageContainer);
        progressBar = findViewById(R.id.progressBar);

        //Mendapatkan Referensi dari Firebase Storage
        reference = FirebaseStorage.getInstance().getReference();
    }

    private void uploadImage(){
        //Method ini digunakan untuk mengupload gambar pada Storage
    }
    
    private void getImage(){
        //Method ini digunakan untuk mengambil gambar dari Kamera
    }
    
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        //Menghandle hasil data yang diambil dari kamera atau galeri untuk ditampilkan pada ImageView
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.upload:
                //Menerapkan kejadian saat tombol upload di klik
                uploadImage();
                break;
            case R.id.select_Image:
                //Menerapkan kejadian saat tombol pilih gambar di klik
                getImage();
                break;
        }
    }
}
8) Selanjtunya pada method getImage(), kita gunakan fungsi alertDialog untuk menentukan metode pengambilan gambar yaitu menggunakan kamera atau dari galeri.
//Method ini digunakan untuk mengambil gambar dari Kamera
    private void getImage(){
        CharSequence[] menu = {"Kamera", "Galeri"};
        AlertDialog.Builder dialog = new AlertDialog.Builder(this)
                .setTitle("Upload Image")
                .setItems(menu, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        switch (which){
                            case 0:
                                //Mengambil gambar dari Kemara ponsel
                                Intent imageIntentCamera = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
                                startActivityForResult(imageIntentCamera, REQUEST_CODE_CAMERA);
                                break;

                            case 1:
                                //Mengambil gambar dari galeri
                                Intent imageIntentGallery = new Intent(Intent.ACTION_PICK,
                                        MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
                                startActivityForResult(imageIntentGallery, REQUEST_CODE_GALLERY);
                                break;
                        }
                    }
                });
        dialog.create();
        dialog.show();
    }
9) Pada method onActivityResult(), program akan menghandle hasil dari data berupa gambar yang diambil dari kamera atau galeri, data yang diambil dari kamera akan kita ubah menjadi Bitmap dan data dari galeri kita ubah mejadi Uri lalu menampilkannya pada ImageView.
//Menghandle hasil data yang diambil dari kamera atau galeri untuk ditampilkan pada ImageView
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        switch(requestCode){
            case REQUEST_CODE_CAMERA:
                if(resultCode == RESULT_OK){
                    ImageContainer.setVisibility(View.VISIBLE);
                    Bitmap bitmap = (Bitmap) data.getExtras().get("data");
                    ImageContainer.setImageBitmap(bitmap);
                }
                break;

            case REQUEST_CODE_GALLERY:
                if(resultCode == RESULT_OK){
                    ImageContainer.setVisibility(View.VISIBLE);
                    Uri uri = data.getData();
                    ImageContainer.setImageURI(uri);
                }
                break;
        }
    }
10) Berikutnya pada method uploadImage(), akan mengupload gambar dari data memory menggunakan fungsi putByte() dan mengembalikan UploadTask() untuk memantau proses Uploading data, proses tersebut akan ditampilkan pada ProgressBar.
 //Method ini digunakan untuk mengupload gambar pada Storage
    private void uploadImage(){
        //Mendapatkan data dari ImageView sebagai Bytes
        ImageContainer.setDrawingCacheEnabled(true);
        ImageContainer.buildDrawingCache();
        Bitmap bitmap = ((BitmapDrawable) ImageContainer.getDrawable()).getBitmap();
        ByteArrayOutputStream stream = new ByteArrayOutputStream();

        //Mengkompress bitmap menjadi JPG dengan kualitas gambar 100%
        bitmap.compress(Bitmap.CompressFormat.JPEG, 100, stream);
        byte[] bytes = stream.toByteArray();

        //Lokasi lengkap dimana gambar akan disimpan
        String namaFile = UUID.randomUUID()+".jpg";
        String pathImage = "gambar/"+namaFile;
        UploadTask uploadTask = reference.child(pathImage).putBytes(bytes);
        uploadTask.addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
                    @Override
                    public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                        progressBar.setVisibility(View.GONE);
                        Toast.makeText(MainActivity.this, "Uploading Berhasil", Toast.LENGTH_SHORT).show();
                    }
                })
                .addOnFailureListener(new OnFailureListener() {
                    @Override
                    public void onFailure(@NonNull Exception e) {
                        progressBar.setVisibility(View.GONE);
                        Toast.makeText(MainActivity.this, "Uploading Gagal", Toast.LENGTH_SHORT).show();
                    }
                })
                .addOnProgressListener(new OnProgressListener<UploadTask.TaskSnapshot>() {
                    @Override
                    public void onProgress(UploadTask.TaskSnapshot taskSnapshot) {
                        progressBar.setVisibility(View.VISIBLE);
                        double progress = (100.0 * taskSnapshot.getBytesTransferred()) / taskSnapshot.getTotalByteCount();
                        progressBar.setProgress((int) progress);
                    }
                });
    }
Demo:


Sekarang coba cek gambar yang sudah kita upload tadi pada layanan Firebase Storage kalian.


Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, pada tutorial berikutnya saya akah membahas mengenai Cara Menampilkan Gambar dari Firebase Storage pada RecyclerView .Selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah
Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.