Cara Mengunggah File ke Penyimpanan Firebase Menggunakan React.js

Penyimpanan Firebase menyediakan cara sederhana untuk menyimpan data yang dibuat pengguna seperti file gambar, video, dan audio. Ini terintegrasi dengan otentikasi Firebase, sehingga Anda dapat mengontrol siapa yang memiliki akses ke file.

Anda dapat menyimpan konten dalam jumlah besar menggunakan Firebase karena secara otomatis diskalakan agar sesuai dengan kebutuhan Anda. Mudah digunakan dengan framework pihak ketiga seperti library React JavaScript

Pengaturan Proyek

Untuk mengunggah file ke penyimpanan Firebase, Anda perlu membuat formulir web yang memungkinkan pengguna memilih file dari sistem file.

Mulai dari membuat aplikasi React menggunakan create-react-app. Jalankan perintah ini untuk menghasilkan proyek React yang disebut firebase-upload:

npx membuat-react-app firebase-upload

Untuk membuatnya tetap sederhana, Anda hanya memerlukan tombol input yang menerima file dan tombol unggah. Ganti isi aplikasi.js dengan kode berikut.

impor {useState} dari "reaksi"
fungsiAplikasi() {
 const [file, setFile] = useState("");

instagram viewer

// Menangani masukan mengubahperistiwadan status pembaruan
fungsimenanganiPerubahan(peristiwa) {
set File(peristiwa.target.file[0]);
 }
kembali (
<div>
<jenis masukan ="mengajukan" terima ="gambar/*" onChange={handleChange}/>
<tombol>Unggah ke Firebase</button>
</div>
 );
}
eksporbawaan Aplikasi;

Pada kode di atas, memasukkan label menerima atribut diatur untuk hanya mengizinkan gambar. Itu menanganiPerubahan() fungsi menangani perubahan input dan memperbarui status untuk menyimpan file yang dipilih.

Siapkan Firebase

Sebelum mengunggah file ke penyimpanan Firebase, Anda perlu membuat proyek Firebase.

Buat Proyek Firebase

Ikuti petunjuk di bawah ini untuk membuat proyek Firebase:

1. Pergi ke Firebase halaman konsol dan klik Tambahkan proyek atau Buat proyek (jika Anda membuat proyek untuk pertama kalinya).
2. Berikan proyek Anda nama pilihan Anda dan klik Melanjutkan.
3. Batalkan pilihan Google Analytics karena Anda tidak memerlukannya untuk proyek ini dan klik Buat proyek.
4. Klik Melanjutkan setelah proyek siap.
5. Klik pada ikon web pada halaman ikhtisar proyek untuk mendaftarkan aplikasi web.
6. Beri nama panggilan untuk aplikasi Anda dan klik Daftar.
7. Salin objek konfigurasi yang disediakan. Anda akan membutuhkannya untuk menghubungkan aplikasi Anda ke Firebase.

Buat Bucket Penyimpanan Cloud

Firebase menyimpan file di keranjang penyimpanan cloud. Ikuti langkah-langkah berikut untuk membuatnya:

1. Pada halaman ikhtisar proyek, klik pada Penyimpanan tab di panel navigasi kiri.
2. Klik Memulai dan pilih modus tes.
3. Pilih lokasi keranjang penyimpanan default dan klik Selesai.

Sekarang Anda siap untuk mulai mengupload file ke penyimpanan Firebase.

Tambahkan Firebase ke React

Di terminal Anda, navigasikan ke folder proyek React Anda. Jalankan perintah berikut untuk menginstal Firebase SDK:

npm Install pangkalan api

Buat file baru, firebaseConfig.js, dan inisialisasi Firebase.

impor { inisialisasi Aplikasi } dari "firebase/aplikasi";
impor { dapatkan Penyimpanan } dari "firebase/penyimpanan";
// Inisialisasi Firebase
konstan aplikasi = inisialisasi Aplikasi ({
 kunci API: <kunci API>,
 authDomain: <authDomain>,
 ID proyek: <proyekId>,
 penyimpananEmber: <penyimpananEmber>,
 messagingSenderId: <perpesananSenderId>,
 ID aplikasi: <ID aplikasi>,
 pengukuranId: <pengukuranId>,
});
// Referensi penyimpanan Firebase
konstan penyimpanan = getStorage (aplikasi);
eksporbawaan penyimpanan;

Gunakan objek konfigurasi yang Anda dapatkan setelah membuat proyek Firebase untuk menginisialisasi aplikasi Firebase.

Baris terakhir mengekspor referensi penyimpanan Firebase sehingga Anda dapat mengakses instance tersebut dari aplikasi Anda yang lain.

Buat Fungsi Handler untuk Mengunggah Gambar ke Firebase

Mengklik tombol unggah akan memicu fungsi yang bertanggung jawab untuk mengunggah file ke penyimpanan Firebase. Mari kita buat fungsi itu.

Di aplikasi.js, tambahkan fungsi menangani Unggah. Dalam fungsi tersebut, periksa apakah file tidak kosong karena pengguna mungkin mengklik tombol unggah sebelum memilih file. Jika file tidak ada, berikan peringatan yang memberi tahu pengguna untuk mengunggah file terlebih dahulu.

fungsimenangani Unggah() {
 jika (!berkas) {
 peringatan("Silakan pilih file terlebih dahulu!")
 }
}

Jika file ada, buat referensi penyimpanan. Referensi penyimpanan bertindak sebagai penunjuk ke file di Cloud yang ingin Anda operasikan.

Mulailah dengan mengimpor layanan penyimpanan yang Anda buat di firebaseConfig.js mengajukan.

impor penyimpanan dari "./firebaseConfig.js"

Impor ref dari instance penyimpanan Firebase dan meneruskan layanan penyimpanan dan jalur file sebagai argumen.

impor {ref} dari "firebase/penyimpanan"
fungsimenangani Unggah() {
 jika (!berkas) {
 peringatan("Silakan pilih file terlebih dahulu!")
 }
konstan storageRef = ref (penyimpanan, `/file/${file.nama}`)
}

Selanjutnya, buat tugas unggah dengan meneruskan instance penyimpanan Firebase ke uploadBytesResumable() fungsi. Ada beberapa metode yang dapat Anda gunakan, tetapi yang satu ini memungkinkan Anda untuk menjeda dan melanjutkan unggahan. Ini juga memperlihatkan pembaruan kemajuan.

Itu uploadBytesResumable() fungsi menerima referensi penyimpanan dan file yang akan diunggah.

impor {
 ref,
 uploadBytesDapat Dilanjutkan 
} dari "firebase/penyimpanan";
fungsimenangani Unggah() {
jika (!berkas) {
 alert("Silakan pilih file terlebih dahulu!")
 }
konstan storageRef = ref (penyimpanan, `/file/${file.nama}`)
konstan uploadTask = uploadBytesResumable (storageRef, file);
}

Untuk memantau kemajuan dan menangani kesalahan saat file diunggah, dengarkan perubahan status, kesalahan, dan penyelesaian.

impor {
 ref,
 uploadBytesDapat Dilanjutkan,
 getDownloadURL 
} dari "basis api/penyimpanan";
fungsimenangani Unggah() {
 jika (!berkas) {
 peringatan("Silakan pilih file terlebih dahulu!")
 }
konstan storageRef = ref (penyimpanan,`/file/${file.nama}`)
konstan uploadTask = uploadBytesResumable (storageRef, file);
unggahTugas.pada(
"status_berubah",
 (potret) => {
konstan persen = matematika.bulat(
 (snapshot.bytesDitransfer / snapshot.totalBytes) * 100
 );
// perbarui kemajuan
 setPercent (persen);
 },
 (salah) => menghibur.log (err),
 () => {
// unduh url
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
menghibur.log (url);
 });
 }
 ); 
}

Di sini, status_berubah acara memiliki tiga fungsi panggilan balik. Pada fungsi pertama, Anda melacak kemajuan unggahan dan mengunggah status kemajuan. Dalam fungsi panggilan balik kedua, tangani kesalahan jika unggahan tidak berhasil.

Fungsi terakhir berjalan setelah unggahan selesai, dan mendapatkan URL unduhan, lalu menampilkannya di konsol. Dalam aplikasi kehidupan nyata, Anda bisa menyimpannya di database.

Anda dapat menampilkan status kemajuan unggahan menggunakan status persen. Tambahkan juga diKlik acara pada tombol unggah untuk memicu menangani Unggah fungsi.

impor { status penggunaan } dari "reaksi";
fungsiAplikasi() {
konstan [persen, setPersen] = useState(0);
kembali (
<div>
<jenis masukan ="mengajukan" onChange={handleChange} accept="" />
<tombol onClick={handleUpload}>Unggah ke Firebase</button>
<p>{persen} "% selesai"</p>
</div>
 )
}

Berikut kode lengkapnya untuk aplikasi.js:

impor { status penggunaan } dari "reaksi";
impor { penyimpanan } dari "./firebaseConfig";
impor { ref, uploadBytesResumable, getDownloadURL } dari "firebase/penyimpanan";
fungsiAplikasi() {
// Status untuk menyimpan file yang diunggah
 const [file, setFile] = useState("");
// kemajuan
konstan [persen, setPersen] = useState(0);
// Menangani acara unggah file dan status pembaruan
fungsimenanganiPerubahan(peristiwa) {
set File(peristiwa.target.file[0]);
 }
konstan handleUpload = () => {
 jika (!berkas) {
 peringatan("Silakan unggah gambar terlebih dahulu!");
 }
konstan storageRef = ref (penyimpanan, `/file/${file.nama}`);
// kemajuan dapat dijeda dan dilanjutkan. Ini juga memperlihatkan pembaruan kemajuan.
// Menerima referensi penyimpanan dan file yang akan diunggah.
konstan uploadTask = uploadBytesResumable (storageRef, file);
unggahTugas.pada(
"status_berubah",
 (potret) => {
konstan persen = matematika.bulat(
 (snapshot.bytesDitransfer / snapshot.totalBytes) * 100
 );
// perbarui kemajuan
 setPercent (persen);
 },
 (salah) => menghibur.log (err),
 () => {
// unduh url
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
menghibur.log (url);
 });
 }
 );
 };
kembali (
<div>
<jenis masukan ="mengajukan" onChange={handleChange} accept="/image/*" />
<tombol onClick={handleUpload}>Unggah ke Firebase</button>
<p>{persen} "% selesai"</p>
</div>
 );
}
eksporbawaan Aplikasi;

Melakukan Lebih Banyak Dengan Penyimpanan Firebase

Mengunggah file adalah salah satu fitur paling dasar dari penyimpanan Firebase. Namun, ada hal lain yang memungkinkan penyimpanan Firebase untuk Anda lakukan. Anda dapat mengakses, menampilkan, mengatur, dan menghapus file Anda.

Dalam aplikasi yang lebih rumit, Anda mungkin ingin mengautentikasi pengguna untuk memberi mereka izin berinteraksi hanya dengan file mereka.

Mengautentikasi Pengguna Dengan Firebase & React

Baca Selanjutnya

Tentang Penulis