Sådan uploades filer til Firebase Storage ved hjælp af React.js

Firebase-lagring giver en enkel måde at gemme brugergenererede data som billeder, videoer og lydfiler. Den integreres med Firebase-godkendelse, så du kan kontrollere, hvem der har adgang til filerne.

Du kan gemme store mængder indhold ved hjælp af Firebase, da det automatisk skaleres, så det passer til dine behov. Det er nemt at bruge med en tredjepartsramme som React JavaScript-biblioteket

Projektopsætning

For at uploade filer til Firebase-lagring, skal du oprette en webformular, der giver brugerne mulighed for at vælge en fil fra filsystemet.

Start med oprettelse af en React-app ved hjælp af create-react-app. Kør denne kommando for at generere et React-projekt kaldet firebase-upload:

npx skab-react-app firebase-upload

For at holde det enkelt behøver du kun en inputknap, der accepterer filer, og en uploadknap. Udskift indholdet af App.js med følgende kode.

importere {useState} fra "reagere"
fungereApp() {
 const [fil, sætFil] = useState("");
// Håndterer input lave ombegivenhedog opdateringstilstand
fungerehåndtag Skift(begivenhed) {
sætFil(begivenhed.mål.filer[0]);
 }





instagram viewer

Vend tilbage (
<div>
<input type="fil" acceptere="billede/*" onChange={handleChange}/>
<knap>Upload til Firebase</button>
</div>
 );
}
eksportStandard App;

I ovenstående kode er input tags acceptere attribut er indstillet til kun at tillade billeder. Det handleChange() funktion håndterer inputændringen og opdaterer tilstanden for at gemme den valgte fil.

Konfigurer Firebase

Før du uploader filen til Firebase-lageret, skal du oprette et Firebase-projekt.

Opret et Firebase-projekt

Følg instruktionerne nedenfor for at oprette et Firebase-projekt:

1. Gå til Firebase konsolsiden og klik på Tilføj projekt eller Opret et projekt (hvis du opretter et projekt for første gang).
2. Giv dit projekt et navn efter eget valg, og klik Blive ved.
3. Fravælg Google Analytics, da du ikke har brug for det til dette projekt, og klik Opret projekt.
4. Klik Blive ved når projektet er klar.
5. Klik på web-ikon på projektoversigtssiden for at registrere en webapp.
6. Giv din app et kaldenavn, og klik Tilmeld.
7. Kopiér det angivne konfigurationsobjekt. Du skal bruge den for at forbinde din applikation til Firebase.

Opret en Cloud Storage Bucket

Firebase gemmer filer i en skylagerbøtte. Følg følgende trin for at oprette det:

1. På projektoversigtssiden skal du klikke på Opbevaring fanen i venstre navigationspanel.
2. Klik Kom igang og vælg test mode.
3. Vælg standardlagerpladsen, og klik Færdig.

Du er nu klar til at begynde at uploade filer til Firebase-lagerplads.

Tilføj Firebase til React

I din terminal skal du navigere til din React-projektmappe. Kør følgende kommando for at installere Firebase SDK:

npm installere brandbase

Opret en ny fil, firebaseConfig.js, og initialiser Firebase.

importere { initializeApp } fra "firebase/app";
importere { getStorage } fra "brandbase/lager";
// Initialiser Firebase
konst app = initializeApp ({
 apiKey: <apiKey>,
 authDomain: <authDomain>,
 projekt-id: <projekt-id>,
 opbevaring Bucket: <opbevaring Bucket>,
 messagingSenderId: <messagingSenderId>,
 appId: <appId>,
 måle-id: <måle-id>,
});
// Firebase-lagerreference
konst storage = getStorage (app);
eksportStandard opbevaring;

Brug det konfigurationsobjekt, du fik efter oprettelse af Firebase-projektet, til at initialisere Firebase-appen.

Den sidste linje eksporterer Firebase-lagerreferencen, så du kan få adgang til den forekomst fra resten af ​​din app.

Opret en Handler-funktion for at uploade billederne til Firebase

Hvis du klikker på upload-knappen, skal den funktion, der er ansvarlig for upload af filen til Firebase-lageret, udløses. Lad os skabe den funktion.

I App.js, tilføj funktionen handleUpload. I funktionen skal du kontrollere, om filen ikke er tom, da en bruger kan klikke på upload-knappen, før han vælger en fil. Hvis filen ikke findes, skal du lave en advarsel, der fortæller brugeren at uploade en fil først.

fungerehandleUpload() {
 if (!fil) {
 alert("Vælg venligst en fil først!")
 }
}

Hvis filen findes, skal du oprette en lagerreference. En lagerreference fungerer som en pegepind til filen i den sky, du vil operere på.

Start med at importere den lagertjeneste, du oprettede i firebaseConfig.js fil.

importere opbevaring fra "./firebaseConfig.js"

Importere ref fra Firebase-lagerforekomsten og videregive lagertjenesten og filstien som et argument.

importere {ref} fra "brandbase/lager"
fungerehandleUpload() {
 if (!fil) {
 alert("Vælg venligst en fil først!")
 }
konst storageRef = ref (opbevaring, `/filer/${file.name}`)
}

Opret derefter en uploadopgave ved at videregive Firebase-lagerforekomsten til uploadBytesResumable() fungere. Der er flere metoder, du kan bruge, men netop denne giver dig mulighed for at pause og genoptage en upload. Det afslører også fremskridtsopdateringer.

Det uploadBytesResumable() funktionen accepterer lagerreferencen og filen, der skal uploades.

importere {
 ref,
 uploadBytesResumable 
} fra "brandbase/lager";
fungerehandleUpload() {
hvis (!fil) {
 alert("Vælg venligst en fil først!")
 }
konst storageRef = ref (opbevaring, `/filer/${file.name}`)
konst uploadTask = uploadBytesResumable (storageRef, fil);
}

For at overvåge fremskridtene og håndtere fejl, mens filen uploades, skal du lytte efter tilstandsændringer, fejl og fuldførelse.

importere {
 ref,
 uploadBytesResumable,
 getDownloadURL 
} fra "firebase/lager";
fungerehandleUpload() {
 if (!fil) {
 alert("Vælg venligst en fil først!")
 }
konst storageRef = ref (opbevaring,`/filer/${file.name}`)
konst uploadTask = uploadBytesResumable (storageRef, fil);
uploadopgave.på(
"tilstand_ændret",
 (øjebliksbillede) => {
konst procent = Matematik.rund(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// opdateringsfremskridt
 sætPercent (procent);
 },
 (fejl) => konsol.log (fejl),
 () => {
// download url
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konsol.log (url);
 });
 }
 ); 
}

Her, den tilstand_ændret begivenhed har tre tilbagekaldsfunktioner. I den første funktion holder du styr på uploadstatus og uploader status. I den anden tilbagekaldsfunktion skal du håndtere en fejl, hvis uploaden mislykkes.

Den sidste funktion kører, når uploaden er fuldført, og henter download-URL'en og viser den derefter på konsollen. I et virkeligt program kan du gemme det i en database.

Du kan få vist status for upload ved hjælp af procenttilstanden. Tilføj også en påKlik hændelse på upload-knappen for at udløse handleUpload fungere.

importere { useState } fra "reagere";
fungereApp() {
konst [procent, sætPercent] = useState(0);
Vend tilbage (
<div>
<input type="fil" onChange={handleChange} accept="" />
<button onClick={handleUpload}>Upload til Firebase</button>
<s>{procent} "% Færdig"</s>
</div>
 )
}

Her er den komplette kode til App.js:

importere { useState } fra "reagere";
importere { lagerplads } fra "./firebaseConfig";
importere { ref, uploadBytesResumable, getDownloadURL } fra "brandbase/lager";
fungereApp() {
// Status for at gemme uploadet fil
 const [fil, sætFil] = useState("");
// fremskridt
konst [procent, sætPercent] = useState(0);
// Håndter filupload-hændelse og opdateringstilstand
fungerehåndtag Skift(begivenhed) {
sætFil(begivenhed.mål.filer[0]);
 }
konst handleUpload = () => {
 if (!fil) {
 alert("Upload venligst et billede først!");
 }
konst storageRef = ref (opbevaring, `/filer/${file.name}`);
// fremskridt kan sættes på pause og genoptages. Det afslører også fremskridtsopdateringer.
// Modtager lagerreferencen og filen, der skal uploades.
konst uploadTask = uploadBytesResumable (storageRef, fil);
uploadopgave.på(
"tilstand_ændret",
 (øjebliksbillede) => {
konst procent = Matematik.rund(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// opdateringsfremskridt
 sætPercent (procent);
 },
 (fejl) => konsol.log (fejl),
 () => {
// download url
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konsol.log (url);
 });
 }
 );
 };
Vend tilbage (
<div>
<input type="fil" onChange={handleChange} accept="/image/*" />
<button onClick={handleUpload}>Upload til Firebase</button>
<s>{procent} "% Færdig"</s>
</div>
 );
}
eksportStandard App;

Gør mere med Firebase Storage

Upload af filer er en af ​​de mest grundlæggende funktioner i Firebase-lagring. Der er dog andre ting, som Firebase-lagring giver dig mulighed for. Du kan få adgang til, vise, organisere og slette dine filer.

I en mere kompliceret app vil du måske godkende brugere for at give dem tilladelse til kun at interagere med deres filer.

Autentificering af brugere med Firebase & React

Læs Næste

Om forfatteren