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 

Cara-Mengupload-Image-Pada-Storage-Firebase01

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

Cara-Mengupload-Image-Pada-Storage-Firebase02

dan ada bagian rules sama seperti database yaitu aturan atau syaratnya

Cara-Mengupload-Image-Pada-Storage-Firebase03

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

Cara-Mengupload-Image-Pada-Storage-Firebase04

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 

Cara-Mengupload-Image-Pada-Storage-Firebase05

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

Cara-Mengupload-Image-Pada-Storage-Firebase06

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

Cara-Mengupload-Image-Pada-Storage-Firebase07

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

Cara-Mengupload-Image-Pada-Storage-Firebase08

Sekarang dimulai dari load link script dari firebase storage

Cara-Mengupload-Image-Pada-Storage-Firebase09

Kemudian import object storage() dari firebase

Cara-Mengupload-Image-Pada-Storage-Firebase010

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

Cara-Mengupload-Image-Pada-Storage-Firebase011

Kalo ada perubahan di input file lakukan function berikut ini

Cara-Mengupload-Image-Pada-Storage-Firebase012

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

Cara-Mengupload-Image-Pada-Storage-Firebase013

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

Cara-Mengupload-Image-Pada-Storage-Firebase014

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

Cara-Mengupload-Image-Pada-Storage-Firebase015

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

Cara-Mengupload-Image-Pada-Storage-Firebase016

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

Cara-Mengupload-Image-Pada-Storage-Firebase017

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

14 Februari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat