Cara mengunggah gambar ke penyimpanan firebase & menyimpan URL gambar itu di database firestore di React+Firebase

Jadi baru-baru ini saya terjebak dalam implementasi kecil saat bekerja dengan formulir pendaftaran di react & firebase di mana saya ingin menyimpan URL gambar yang diunggah dalam dokumen database firestore.
Mari kita jelajahi di artikel ini.

TL;DR
Mari kita lihat demo kami beraksi:

Penerapan:

Diasumsikan bahwa Anda telah menyiapkan aplikasi boilerplate react & juga memiliki beberapa prasyarat dasar yang diketahui tentang cara membuat akun firebase, proyek baru, dan aplikasi web baru di dalamnya & mengaktifkan database dan penyimpanan firestore darinya. Kami akan menggunakan beberapa perpustakaan untuk membuat hidup kami lebih mudah yaitu:

• material-ui (Anda dapat menggunakan framework css pilihan Anda)
• firebase

Sekarang kita akan mengekspor beberapa entitas seperti app ,auth & storage object dan akan menggunakannya di app.js kita.

Mari lompat ke inti dari file utama kita, pertama-tama kita memiliki elemen input material-ui dan membungkusnya di dalam handleSubmit event handler.
Sekarang kita akan melihat lebih dekat bagaimana kita dapat menyimpan URL gambar yang diunggah di database firestore agar dapat diakses secara global:

• LANGKAH 1: menyimpan gambar yang diunggah di penyimpanan:
  Pertama kami membuat referensi ke penyimpanan gambar kami bernama storageRef & meneruskannya ke fungsi uploadBytesResumable yang menerima referensi ini dan file yang perlu diunggah. Untuk prosedur yang lebih rinci, lihat ini .
• LANGKAH 2: menyimpan gambar ini sebagai URL di database firestore:
  Kami membuat referensi umum ke firestore kami bernama collectionRef yang mengambil 3 parameter yaitu objek db , nama koleksi, dan terakhir adalah id dokumen (yang dapat dibuat secara otomatis atau sesuatu yang bermakna dalam konteks untuk aplikasi Anda, di sini demi kesederhanaan saya telah meng-hardcode id dokumen.
  Kemudian kami memiliki acara uploadTask.on () , yang memiliki fungsi panggilan balik di mana kami menggunakan fungsi getDownloadURL berbasis janji dan mendapatkan url gambar dalam variabel downloadURL .
  Sekarang sampai pada bagian penting kita hanya mendorong url ini di dokumen kita menggunakan fungsi updateDoc . (Perhatikan bahwa kita bisa menggunakan fungsi setDoc tetapi kita menggunakanupdateDoc karena kami ingin memperbarui beberapa bidang dokumen tanpa menimpa seluruh dokumen.

Itu saja, jika Anda memiliki pertanyaan atau membutuhkan bantuan lebih lanjut, hubungi saya, terima kasih telah membaca