Hur man laddar upp filer till Firebase Storage med React.js

Firebase-lagring ger ett enkelt sätt att lagra användargenererad data som bilder, videor och ljudfiler. Den integreras med Firebase-autentisering, så att du kan styra vem som har åtkomst till filerna.

Du kan lagra stora mängder innehåll med Firebase eftersom det automatiskt skalas för att passa dina behov. Det är enkelt att använda med ett ramverk från tredje part som React JavaScript-biblioteket

Projektuppsättning

För att ladda upp filer till Firebase-lagringmåste du skapa ett webbformulär som låter användare välja en fil från filsystemet.

Börja med skapa en React-app med create-react-app. Kör detta kommando för att generera ett React-projekt som heter firebase-uppladdning:

npx skapa-react-app firebase-upload

För att hålla det enkelt behöver du bara en inmatningsknapp som accepterar filer och en uppladdningsknapp. Byt ut innehållet i App.js med följande kod.

importera {useState} från "reagera"
fungeraApp() {
 const [fil, setFile] = useState("");
// Hanterar inmatning förändrahändelseoch uppdateringar tillstånd
fungerahandtag Ändra(händelse) {
setFile(händelse.mål.filer[0]);
 }





instagram viewer

lämna tillbaka (
<div>
<ingångstyp="fil" acceptera="bild/*" onChange={handleChange}/>
<knapp>Ladda upp till Firebase</button>
</div>
 );
}
exporterastandard App;

I ovanstående kod, inmatning taggar acceptera attribut är inställt på att endast tillåta bilder. De handleChange() funktionen hanterar indataändringen och uppdaterar tillståndet för att lagra den valda filen.

Konfigurera Firebase

Innan du laddar upp filen till Firebase-lagring måste du skapa ett Firebase-projekt.

Skapa ett Firebase-projekt

Följ instruktionerna nedan för att skapa ett Firebase-projekt:

1. Gå till Firebase konsolsidan och klicka på Lägg till projekt eller Skapa ett projekt (om du skapar ett projekt för första gången).
2. Ge ditt projekt ett valfritt namn och klicka Fortsätta.
3. Avmarkera Google Analytics eftersom du inte behöver det för det här projektet och klicka Skapa projekt.
4. Klick Fortsätta när projektet är klart.
5. Klicka på webbikonen på projektöversiktssidan för att registrera en webbapp.
6. Ge din app ett smeknamn och klicka Registrera.
7. Kopiera det angivna konfigurationsobjektet. Du behöver den för att ansluta din app till Firebase.

Skapa en Cloud Storage Bucket

Firebase lagrar filer i en molnlagringshink. Följ följande steg för att skapa den:

1. På projektöversiktssidan klickar du på Lagring fliken på den vänstra navigeringspanelen.
2. Klick Komma igång och välj övningsläge.
3. Välj standardplats för lagringshinken och klicka Gjort.

Du är nu redo att börja ladda upp filer till Firebase-lagring.

Lägg till Firebase för att React

I din terminal, navigera till din React-projektmapp. Kör följande kommando för att installera Firebase SDK:

npm Installera eldbas

Skapa en ny fil, firebaseConfig.js, och initiera Firebase.

importera { initializeApp } från "firebase/app";
importera { getStorage } från "brandbas/lagring";
// Initiera Firebase
konst app = initializeApp ({
 apiKey: <apiKey>,
 authDomain: <authDomain>,
 projekt-id: <projekt-ID>,
 storageBucket: <lagringBucket>,
 messagingSenderId: <meddelandeSenderId>,
 appId: <appId>,
 measurementId: <mätnings-ID>,
});
// Firebase-lagringsreferens
konst lagring = getStorage (app);
exporterastandard lagring;

Använd konfigurationsobjektet du fick efter att du skapade Firebase-projektet för att initiera Firebase-appen.

Den sista raden exporterar Firebase-lagringsreferensen så att du kan komma åt den instansen från resten av din app.

Skapa en hanterarfunktion för att ladda upp bilderna till Firebase

Om du klickar på uppladdningsknappen bör funktionen som ansvarar för att ladda upp filen till Firebase-lagring utlösas. Låt oss skapa den funktionen.

I App.js, lägg till funktionen handleUpload. Kontrollera i funktionen om filen inte är tom eftersom en användare kan klicka på uppladdningsknappen innan han väljer en fil. Om filen inte finns, aktivera en varning som talar om för användaren att ladda upp en fil först.

fungerahandleUpload() {
 if (!fil) {
 varna("Välj en fil först!")
 }
}

Om filen finns, skapa en lagringsreferens. En lagringsreferens fungerar som en pekare till filen i molnet du vill operera på.

Börja med att importera lagringstjänsten du skapade i firebaseConfig.js fil.

importera lagring från "./firebaseConfig.js"

Importera ref från Firebase-lagringsinstansen och skicka in lagringstjänsten och filsökvägen som ett argument.

importera {ref} från "brandbas/lagring"
fungerahandleUpload() {
 if (!fil) {
 varna("Välj en fil först!")
 }
konst storageRef = ref (lagring, `/filer/${file.name}`)
}

Skapa sedan en uppladdningsuppgift genom att skicka Firebase-lagringsinstansen till uploadBytesResumable() fungera. Det finns flera metoder du kan använda, men just den här låter dig pausa och återuppta en uppladdning. Det avslöjar också framstegsuppdateringar.

De uploadBytesResumable() funktionen accepterar lagringsreferensen och filen som ska laddas upp.

importera {
 ref,
 uploadBytesResumable 
} från "brandbas/lagring";
fungerahandleUpload() {
om (!fil) {
 alert("Välj en fil först!")
 }
konst storageRef = ref (lagring, `/filer/${file.name}`)
konst uploadTask = uploadBytesResumable (storageRef, file);
}

För att övervaka framstegen och hantera fel när filen laddas upp, lyssna efter tillståndsändringar, fel och slutförande.

importera {
 ref,
 uploadBytesResumable,
 getDownloadURL 
} från "eldbas/lagring";
fungerahandleUpload() {
 if (!fil) {
 varna("Välj en fil först!")
 }
konst storageRef = ref (lagring,`/filer/${file.name}`)
konst uploadTask = uploadBytesResumable (storageRef, file);
ladda upp Task.på(
"state_changed",
 (ögonblicksbild) => {
konst procent = Matematik.runda(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// uppdateringsförlopp
 setPercent (procent);
 },
 (fel) => trösta.log (fel),
 () => {
// ladda ner url
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
trösta.log (url);
 });
 }
 ); 
}

Här, den state_changed händelsen har tre återuppringningsfunktioner. I den första funktionen håller du reda på uppladdningsförloppet och laddar upp förloppsläget. I den andra återuppringningsfunktionen, hantera ett fel om uppladdningen misslyckas.

Den sista funktionen körs när uppladdningen är klar och hämtar nedladdningsadressen och visar den sedan på konsolen. I ett verkligt program kan du spara det i en databas.

Du kan visa förloppsläget för uppladdningen med hjälp av procentläget. Lägg också till en påKlicka händelse på uppladdningsknappen för att utlösa handleUpload fungera.

importera { useState } från "reagera";
fungeraApp() {
konst [procent, setPercent] = useState(0);
lämna tillbaka (
<div>
<ingångstyp="fil" onChange={handleChange} acceptera="" />
<button onClick={handleUpload}>Ladda upp till Firebase</button>
<sid>{procent} "% Gjort"</s>
</div>
 )
}

Här är hela koden för App.js:

importera { useState } från "reagera";
importera { lagring } från "./firebaseConfig";
importera { ref, uploadBytesResumable, getDownloadURL } från "brandbas/lagring";
fungeraApp() {
// Status för att lagra uppladdad fil
 const [fil, setFile] = useState("");
// framsteg
konst [procent, setPercent] = useState(0);
// Hantera filuppladdningshändelse och uppdateringstillstånd
fungerahandtag Ändra(händelse) {
setFile(händelse.mål.filer[0]);
 }
konst handleUpload = () => {
 if (!fil) {
 varna("Ladda upp en bild först!");
 }
konst storageRef = ref (lagring, `/filer/${file.name}`);
// förloppet kan pausas och återupptas. Det avslöjar också framstegsuppdateringar.
// Tar emot lagringsreferensen och filen som ska laddas upp.
konst uploadTask = uploadBytesResumable (storageRef, file);
ladda upp Task.på(
"state_changed",
 (ögonblicksbild) => {
konst procent = Matematik.runda(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// uppdateringsförlopp
 setPercent (procent);
 },
 (fel) => trösta.log (fel),
 () => {
// ladda ner url
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
trösta.log (url);
 });
 }
 );
 };
lämna tillbaka (
<div>
<ingångstyp="fil" onChange={handleChange} acceptera="/image/*" />
<button onClick={handleUpload}>Ladda upp till Firebase</button>
<sid>{procent} "% Gjort"</s>
</div>
 );
}
exporterastandard App;

Gör mer med Firebase Storage

Att ladda upp filer är en av de mest grundläggande funktionerna i Firebase-lagring. Det finns dock andra saker som Firebase-lagring låter dig göra. Du kan komma åt, visa, organisera och radera dina filer.

I en mer komplicerad app kanske du vill autentisera användare för att ge dem tillåtelse att interagera med endast deras filer.

Autentisera användare med Firebase & React

Läs Nästa

Om författaren