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:
- Cara Membuat Aplikasi CRUD Menggunakan Firebase Realtime Database
- Belajar Menggunakan FirebaseUI untuk Autentikasi
- Mengirim Notifikasi Menggunakan Firebase Cloud Messaging
- Mengintergasikan Firebase Storage SDK pada aplikasi klien.
- Membuat referensi untuk lokasi file yang akan diupload.
- 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"/>
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;
}
}
}
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>
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:
- Membuat variable/instance dari widget yang akan kita gunakan.
- Membuat instance StorageReference dan mendapatkan referensi dari Storage untuk mendapatkan lokasi file yang akan disimpan,
- Membuat 2 buah method untuk mengupload gambar dan mengambil gambar dari kamera atau galeri.
- 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:
8) Selanjtunya pada method getImage(), kita gunakan fungsi alertDialog untuk menentukan metode pengambilan gambar yaitu menggunakan kamera atau dari galeri.//========= 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;
}
}
}
//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();
}
//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;
}
}
//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);
}
});
}
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.
