Cara Mengupload Gambar Pada Storage Firebase

Dalam membuat aplikasi ada banyak hal yang bisa kita lakukan. Misalnya kita mau mengupload berbagai files baik itu dalam bentuk video, gambar ataupun document maka dari itu kita butuh tempat untuk menyimpan files tersebut. Pada firebase ada yang namanya storage dimana kita bisa manfaatkan fitur tersebut jadi pada bagian ini kita akan belajar bagaimana cara mengupload files dari programnya. Silahkan teman teman pilih menu storage 

Disana akan ada daftar files -nya tapi saat ini masih kosong 

dan ada bagian rules sama seperti database yaitu aturan atau syaratnya

Intinya kalian diperbolehkan untuk bisa menulis dan membaca bila users sudah ter authentifikasi. Untuk saat ini kita berikan nilai true untuk memperbolehkan semuanya

Langsung saja kita mulai untuk halaman htmlnya sudah saya siapkan sangatlah sederhana. Ada satu input type file dan sistem progress barnya yang masing masing elemennya punya id 

Tambahkan sedikit style css dengan memberikan font-family sans-serif 

Lalu document idnya yang sudah kita referensikan dengan object document by id yang disimpan di nama yang berbeda 

dan yang terakhir buat tag script untuk melakukan konfigurasi dari firebase webnya yaitu melakukan initializeApp 

Sekarang dimulai dari load link script dari firebase storage

Kemudian import object storage() dari firebase

Berikutnya tambahkan sebuah event on change dibagian input type file dengan addEventListener 

Kalo ada perubahan di input file lakukan function berikut ini

Tentu yang kita lakukan adalah mengambil file uploadnya dengan event.target.files di index ke 0

Lalu kita referensikan files-nya kedalam folder images yang di gabung dengan nama filesnya 

Note: kalo belum ada foldernya maka firebase akan otomatis dibuatkan.

Jika sudah tentukan nama folder beserta namanya maka kalian bisa langsung upload dengan metode put() berdasarkan storageRef

Lalu masukkan file yang di uploadnya. Cara untuk mengupload sesimple ini kita save. Terus saya akan testing di browser dengan mengupload salah satu gambar yang ada dikomputer

Ada perubahan di input file. Tentu disini saya belum memberikan feedback apa apa kalo filesnya berhasil diupload. Tapi kalo teman teman lihat dibagian storagenya sekarang data di storage sudah berisi gambar yang barusan diupload. Gambarnya berada difolder images

Jadi itu dia sangatlah simple proses untuk upload files atau gambar menggunakan layanan dari firebase. Terima kasih