Cum să încărcați fișiere în Firebase Storage folosind React.js

Stocarea Firebase oferă o modalitate simplă de stocare a datelor generate de utilizator, cum ar fi imagini, videoclipuri și fișiere audio. Se integrează cu autentificarea Firebase, astfel încât să puteți controla cine are acces la fișiere.

Puteți stoca cantități mari de conținut folosind Firebase, deoarece acesta se adaptează automat nevoilor dvs. Este simplu de utilizat cu un cadru terță parte, cum ar fi biblioteca React JavaScript

Configurarea proiectului

Pentru a încărca fișiere în Stocare Firebase, trebuie să creați un formular web care să permită utilizatorilor să selecteze un fișier din sistemul de fișiere.

Începe prin crearea unei aplicații React folosind aplicația create-react. Rulați această comandă pentru a genera un proiect React numit firebase-upload:

npx crea-react-app firebase-upload

Pentru a rămâne simplu, aveți nevoie doar de un buton de intrare care acceptă fișiere și de un buton de încărcare. Înlocuiți conținutul App.js cu următorul cod.

import {useState} din "reacţiona"
funcţieApp() {
 const [fișier, setFile] = useState("");





instagram viewer

// Se ocupă de intrare Schimbareevenimentși starea actualizărilor
funcţiehandleChange(eveniment) {
setFile(eveniment.ţintă.fișiere[0]);
 }
întoarcere (
<div>
<tip de intrare="fişier" accept="imagine/*" onChange={handleChange}/>
<buton>Încărcați în Firebase</button>
</div>
 );
}
exportMod implicit Aplicație;

În codul de mai sus, intrare Etichete Accept atributul este setat să permită numai imagini. The handleChange() funcția se ocupă de modificarea intrării și actualizează starea pentru a stoca fișierul ales.

Configurați Firebase

Înainte de a încărca fișierul în spațiul de stocare Firebase, trebuie să creați un proiect Firebase.

Creați un proiect Firebase

Urmați instrucțiunile de mai jos pentru a crea un proiect Firebase:

1. Du-te la Firebase pagina consolei și faceți clic pe Adăugați proiect sau Creați un proiect (dacă creați un proiect pentru prima dată).
2. Dați proiectului dvs. un nume la alegere și faceți clic Continua.
3. Deselectați Google Analytics deoarece nu aveți nevoie de el pentru acest proiect și faceți clic Creați proiect.
4. Clic Continua odată ce proiectul este gata.
5. Faceți clic pe pictograma web pe pagina de prezentare generală a proiectului pentru a înregistra o aplicație web.
6. Dați aplicației dvs. o poreclă și faceți clic Inregistreaza-te.
7. Copiați obiectul de configurare furnizat. Veți avea nevoie de el pentru a vă conecta aplicația la Firebase.

Creați o găleată de stocare în cloud

Firebase stochează fișiere într-o găleată de stocare în cloud. Urmați următorii pași pentru a-l crea:

1. Pe pagina de prezentare generală a proiectului, faceți clic pe Depozitare fila din panoul de navigare din stânga.
2. Clic Incepe și selectați modul de testare.
3. Selectați locația implicită a compartimentului de stocare și faceți clic Terminat.

Acum sunteți gata să începeți să încărcați fișiere în spațiul de stocare Firebase.

Adăugați Firebase la React

În terminalul dvs., navigați la folderul proiectului React. Rulați următoarea comandă pentru a instala SDK-ul Firebase:

npm instalare baza de foc

Creați un fișier nou, firebaseConfig.jsși inițializați Firebase.

import { initializeApp } din „firebase/aplicație”;
import { getStorage } din „foc/stocare”;
// Inițializați Firebase
const app = initializeApp ({
 apiKey: <apiKey>,
 authDomain: <authDomain>,
 projectId: <projectId>,
 găleată de stocare: <găleată de depozitare>,
 messagingSenderId: <mesajeSenderId>,
 appId: <appId>,
 măsurare: <măsurareId>,
});
// Referință de stocare Firebase
const stocare = getStorage (aplicație);
exportMod implicit depozitare;

Utilizați obiectul de configurare pe care l-ați obținut după crearea proiectului Firebase pentru a inițializa aplicația Firebase.

Linia finală exportă referința de stocare Firebase, astfel încât să puteți accesa acea instanță din restul aplicației.

Creați o funcție de gestionare pentru a încărca imaginile în Firebase

Făcând clic pe butonul de încărcare ar trebui să declanșeze funcția responsabilă pentru încărcarea fișierului în spațiul de stocare Firebase. Să creăm acea funcție.

În App.js, adăugați funcția handleUpload. În funcție, verificați dacă fișierul nu este gol, deoarece un utilizator poate face clic pe butonul de încărcare înainte de a alege un fișier. Dacă fișierul nu există, lansați o alertă care îi spune utilizatorului să încarce mai întâi un fișier.

funcţiehandleUpload() {
 dacă (!fișier) {
 alerta("Vă rugăm să alegeți mai întâi un fișier!")
 }
}

Dacă fișierul există, creați o referință de stocare. O referință de stocare acționează ca un pointer către fișierul din Cloud pe care doriți să operați.

Începeți prin a importa serviciul de stocare pe care l-ați creat în firebaseConfig.js fişier.

import depozitare din „./firebaseConfig.js”

Import ref din instanța de stocare Firebase și transmiteți serviciul de stocare și calea fișierului ca argument.

import {ref} din "firebase/stocare"
funcţiehandleUpload() {
 dacă (!fișier) {
 alerta("Vă rugăm să alegeți mai întâi un fișier!")
 }
const storageRef = ref (stocare, `/fișiere/${file.name}`)
}

Apoi, creați o sarcină de încărcare trecând instanța de stocare Firebase către uploadBytesResumable() funcţie. Există mai multe metode pe care le puteți utiliza, dar aceasta vă permite să întrerupeți și să reluați încărcarea. De asemenea, expune actualizările de progres.

The uploadBytesResumable() funcția acceptă referința de stocare și fișierul de încărcat.

import {
 ref,
 uploadBytesResumable 
} din „foc/stocare”;
funcţiehandleUpload() {
dacă (!fișier) {
 alert(„Vă rugăm să alegeți mai întâi un fișier!”)
 }
const storageRef = ref (stocare, `/fișiere/${file.name}`)
const uploadTask = uploadBytesResumable (storageRef, fișier);
}

Pentru a monitoriza progresul și a gestiona erorile pe măsură ce fișierul se încarcă, ascultați modificările de stare, erorile și finalizarea.

import {
 ref,
 uploadBytesResumable,
 getDownloadURL 
} din "firebase/stocare";
funcţiehandleUpload() {
 dacă (!fișier) {
 alerta("Vă rugăm să alegeți mai întâi un fișier!")
 }
const storageRef = ref (stocare,`/fișiere/${file.name}`)
const uploadTask = uploadBytesResumable (storageRef, fișier);
uploadTask.pe(
"state_changed",
 (instantaneu) => {
const procent = Matematică.rundă(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// actualizare progres
 setPercent (procent);
 },
 (eră) => consolă.log (eră),
 () => {
// descărcați adresa URL
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
consolă.log (url);
 });
 }
 ); 
}

Aici state_changed evenimentul are trei funcții de apel invers. În prima funcție, ține evidența progresului de încărcare și ai încărca starea de progres. În a doua funcție de apel invers, gestionați o eroare dacă încărcarea nu reușește.

Funcția finală rulează odată ce încărcarea este finalizată și primește adresa URL de descărcare, apoi o afișează pe consolă. Într-o aplicație reală, o puteți salva într-o bază de date.

Puteți afișa starea de progres a încărcării folosind starea procentuală. De asemenea, adăugați un onClick eveniment pe butonul de încărcare pentru a declanșa handleUpload funcţie.

import { useState } din "reacţiona";
funcţieApp() {
const [procent, setPercent] = useState(0);
întoarcere (
<div>
<tip de intrare="fişier" onChange={handleChange} accept="" />
<butonul onClick={handleUpload}>Încărcați în Firebase</button>
<p>{la sută} "% Terminat"</p>
</div>
 )
}

Iată codul complet pentru App.js:

import { useState } din "reacţiona";
import { stocare } din „./firebaseConfig”;
import { ref, uploadBytesResumable, getDownloadURL } din „foc/stocare”;
funcţieApp() {
// Starea pentru a stoca fișierul încărcat
 const [fișier, setFile] = useState("");
// progres
const [procent, setPercent] = useState(0);
// Gestionează evenimentul de încărcare a fișierului și starea de actualizare
funcţiehandleChange(eveniment) {
setFile(eveniment.ţintă.fișiere[0]);
 }
const handleUpload = () => {
 dacă (!fișier) {
 alerta("Vă rugăm să încărcați mai întâi o imagine!");
 }
const storageRef = ref (stocare, `/fișiere/${file.name}`);
// progresul poate fi întrerupt și reluat. De asemenea, expune actualizările de progres.
// Primește referința de stocare și fișierul de încărcat.
const uploadTask = uploadBytesResumable (storageRef, fișier);
uploadTask.pe(
"state_changed",
 (instantaneu) => {
const procent = Matematică.rundă(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// actualizare progres
 setPercent (procent);
 },
 (eră) => consolă.log (eră),
 () => {
// descărcați adresa URL
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
consolă.log (url);
 });
 }
 );
 };
întoarcere (
<div>
<tip de intrare="fişier" onChange={handleChange} accept="/image/*" />
<butonul onClick={handleUpload}>Încărcați în Firebase</button>
<p>{la sută} "% Terminat"</p>
</div>
 );
}
exportMod implicit Aplicație;

Fă mai mult cu Firebase Storage

Încărcarea fișierelor este una dintre cele mai de bază caracteristici ale stocării Firebase. Cu toate acestea, există și alte lucruri pe care stocarea Firebase îți permite să le faci. Puteți accesa, afișa, organiza și șterge fișierele dvs.

Într-o aplicație mai complicată, este posibil să doriți să autentificați utilizatorii pentru a le acorda permisiunea de a interacționa numai cu fișierele lor.

Autentificarea utilizatorilor cu Firebase & React

Citiți în continuare

Despre autor