Cara Membuat Progress Bar Pada Storage Firebase

Bagian selanjutnya kita akan memberikan sistem progress bar pada saat gambar sedang diupload. Berarti kita harus mendeteksi pergerakkan yang terjadi. Jadi ketika kalian jalankan method put sebenarnya fungsi ini mengembalikan sebuah task

Cara-Membuat-Progress-Bar-Pada-Storage-Firebase-EKI-19022020-01

Nanti task ini akan mendeteksi melalui event on state_changed artinya kalo terjadi perubahan dari tasknya lakukan 3 function callback 

Cara-Membuat-Progress-Bar-Pada-Storage-Firebase-EKI-19022020-02

pertama function ketika sedang mengupload, kedua ketika ada kesalahan dan ketiga ketika uploadnya sudah completed. Tiga method tersebut akan dibuat satu persatu. untuk yang function loadUpload dulu dimana dia terima sebuah parameter data

Cara-Membuat-Progress-Bar-Pada-Storage-Firebase-EKI-19022020-03

Yakni info data yang sedang diupload. Dibagian fungsi ini kita bisa menghitung persennya. Rumusnya dari jumlah data yang ditransfer dibagi dengan data total bytes

Cara-Membuat-Progress-Bar-Pada-Storage-Firebase-EKI-19022020-04

Hasil baginya kita kalikan dengan 100 supaya dapat hasil percentase. Tentu detailnya teman teman bisa lihat didokumentasinya. Nanti progress value-nya akan berubah berdasarkan percentasenya

Cara-Membuat-Progress-Bar-Pada-Storage-Firebase-EKI-19022020-05

Selanjutnya bila ada error lakukan fungsi errorUpload kita sekedar console errornya 

Cara-Membuat-Progress-Bar-Pada-Storage-Firebase-EKI-19022020-06

dan satu lagi kalo completed success sama seperti yang lain console log text success

Cara-Membuat-Progress-Bar-Pada-Storage-Firebase-EKI-19022020-07

Kalo sudah kita simpan perubahan dari semua kodenya. Masih belum ada perubahan untuk progress barnya 

Cara-Membuat-Progress-Bar-Pada-Storage-Firebase-EKI-19022020-08

Tapi pada saat saya pilih choose file masukkan gambar lalu upload. maka progress barnya sudah berhasil dijalankan. Progress valuenya juga sudah 100% dan gambar pun sudah masuk di firebase storage

Cara-Membuat-Progress-Bar-Pada-Storage-Firebase-EKI-19022020-09

Semoga bermanfaat dan Terima kasih

19 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