Cara Upload File ke Firebase Cloud Storage Menggunakan Javascript
Cara Upload File ke Firebase Cloud Storage Untuk mengunggah file ke penyimpanan Firebase, Anda perlu membuat formulir web yang memungkinkan pengguna memilih file dari sistem file. Untuk membuatnya tetap sederhana, Anda hanya memerlukan tombol input yang menerima file dan tombol unggah untuk memproses data.
Firebase Storage adalah penyimpanan berbasis cloud yang dapat digunakan untuk menyimpan file. Ini gratis untuk digunakan hingga 5GB, Jadi melebihi batas ini akan memerlukan peningkatan. Dalam tutorial ini, kami akan membuat pengunggah file berbasis web yang memungkinkan Anda mengunggah banyak file ke Firebase Storage tanpa menggunakan bahasa pemrograman backend.
1. Creating HTML Files
Hal pertama yang kita butuhkan adalah membuat input file yang akan membantu dalam memilih file dan juga kita memerlukan bilah kemajuan yang akan menunjukkan kemajuan unggahan seperti yang dapat kita lihat pada kode di bawah ini.
Upload Files<br />
<input type="file" id="files" multiple /><br /><br />
<button id="send">Upload</button>
<p id="uploading"></p>
<progress value="0" max="100" id="progress"
Untuk menjaga hal-hal sederhana, kami tidak akan menambahkan style ke kode kami. Jadi halaman web kami terlihat lebih sederhana. Dan untuk langkah selanjutnya kita buat project di Firebase terlebih dahulu.
2. Creating A Project On Firebase
Sebelum kami dapat mulai mengunggah file ke penyimpanan di firebase, kami perlu mendapatkan kode inisialisasi firebase yang menghubungkan aplikasi yang dibuat ke firebase. Untuk mendapatkan kode ini, Anda perlu membuat proyek di firebase terlebih dahulu.
Untuk membuat project di firebase cukup mudah, Anda tidak perlu khawatir! Karena kami juga menyediakan video tutorial yang akan memandu Anda tentang cara membuat proyek dan menginisialisasi keranjang penyimpanan Anda di console.firebase.google.com.
Sumber dari : Naishare
3. Add Firebase To Project
Setelah membuat project di firebase, maka seharusnya anda sudah bisa mendapatkan kode inisialisasi firebase yang anda buat seperti kode berikut ini.
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyCd_rU4ft1CCdYZJCAjM8OyAVVfZ8I14LQ",
authDomain: "upload-file.firebaseapp.com",
databaseURL: "https://upload-file.firebaseio.com",
projectId: "upload-file",
storageBucket: "upload-file.appspot.com",
messagingSenderId: "772980880174",
appId: "1:772980880174:web:273969e0f628410853c0bf"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
Kami juga harus mengimpor SDK penyimpanan firebase kami dengan menambahkan tautan script ini juga.
<script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-storage.js"></script>
Sekarang kita dapat menambahkan kode Javascript yang membantu mentransfer file ke Firebase Cloud Storage kita. Jika Anda menambahkan Firebase dengan benar ke aplikasi Anda, aplikasi Anda akan terlihat kode seperti ini.
4. Upload Files To Firebase Storage
Mengunggah file ke Firebase Cloud Storage cukup mudah. Hal pertama yang harus kita lakukan adalah mendapatkan data file yang diunggah dan menyimpannya dalam sebuah array. Kita dapat mencapai ini dengan menambahkan onChange listener ke file input.
<script>
var files = [];
document.getElementById("files").addEventListener("change", function(e) {
files = e.target.files;
});
</script>
Sekarang untuk mengunggah file yang disimpan, kita harus menambahkan click listener pada tombol yang mengambil file dan menyinkronkannya ke Firebase Cloud Storage Anda.
5. Reading From Firebase Cloud Storage
Membaca dari Firmbase Cloud Storage juga cukup mudah. Kita harus membuat referensi Firebase Storage dan menggunakannya untuk mendapatkan url file yang kita inginkan.
Baca juga : Aplikasi Jadwal Aktivitas Menggunakan Firebase
The Complete Html Document
Ini adalah kode sumber lengkap dari tutorial pada postingan ini. Sekarang Anda tinggal menyesuaikan kode yang didapat dari firebase sesuai seperti keterangan diatas yang telah kami sampaikan. Dan kode untuk Upload File ke Firebase Cloud Storage Menggunakan Javascript tersebut akan terlihat seperti dibawah ini.
Info : Untuk membantu mengamankan aplikasi web Anda, Firebase memberi Anda kemampuan untuk menetapkan aturan. Anda dapat menemukan dokumentasi aturan lengkap di firebase.google.com/docs/rules.
Hasil Tampilan
Berikut ini adalah hasil tampilan dari Cara Upload File ke Firebase Cloud Storage Menggunakan Javascript:
Keterangan : Sekarang Anda bisa mencoba project sederhana yang telah dibuat pada hasil tampilan diatas dengan mengklik tombol "Pilih File" dan untuk mengirim file yang diupload ke firebase Anda bisa mengklik tombol "Upload". Selamat mencoba!
Kesimpulan
Firebase Storage sangat mudah digunakan dan mudah diakses. Anda dapat mengunggah file Anda ke cloud tanpa bantuan bahasa pemrograman back-end atau hosting. Semoga Anda belajar banyak dari tutorial ini, saya akan segera melakukan lebih banyak tutorial tentang firebase.
Demikian posting kali tentang Cara Upload File ke Firebase Cloud Storage Menggunakan Javascript. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk share artikel ini untuk membantu teman-teman yang lain. Terima kasih!
samuelpasaribu.com
samuelpasaribu.com working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.
