Hvordan laste opp filer til Firebase-lagring ved hjelp av React.js

Firebase-lagring gir en enkel måte å lagre brukergenererte data som bilder, videoer og lydfiler på. Den integreres med Firebase-autentisering, slik at du kan kontrollere hvem som har tilgang til filene.

Du kan lagre store mengder innhold ved hjelp av Firebase siden det automatisk skaleres for å passe dine behov. Det er enkelt å bruke med et tredjepartsrammeverk som React JavaScript-biblioteket

Prosjektoppsett

For å laste opp filer til Firebase-lagring, må du lage et nettskjema som lar brukere velge en fil fra filsystemet.

Start med lage en React-app ved hjelp av create-react-app. Kjør denne kommandoen for å generere et React-prosjekt kalt firebase-opplasting:

npx skape-react-app firebase-opplasting

For å holde det enkelt trenger du bare en inndataknapp som godtar filer og en opplastingsknapp. Bytt ut innholdet i App.js med følgende kode.

import {useState} fra "reagere"
funksjonApp() {
 const [fil, setFile] = brukState("");
// Håndterer inndata endringbegivenhetog oppdateringer tilstand
funksjonhandleEndre(begivenhet) {
setFile(begivenhet.mål.filer[0]);
 }





instagram viewer

komme tilbake (
<div>
<input type="fil" godta="bilde/*" onChange={handleChange}/>
<knapp>Last opp til Firebase</button>
</div>
 );
}
eksportmisligholde App;

I koden ovenfor er input tags aksepterer attributtet er satt til å bare tillate bilder. De handleChange() funksjonen håndterer inndataendringen og oppdaterer tilstanden for å lagre den valgte filen.

Sett opp Firebase

Før du laster opp filen til Firebase-lagring, må du opprette et Firebase-prosjekt.

Opprett et Firebase-prosjekt

Følg instruksjonene nedenfor for å opprette et Firebase-prosjekt:

1. Gå til Firebase konsollside og klikk på Legg til prosjekt eller Lag et prosjekt (hvis du oppretter et prosjekt for første gang).
2. Gi prosjektet et navn du ønsker og klikk Fortsette.
3. Velg bort Google Analytics siden du ikke trenger det for dette prosjektet og klikk Lag prosjekt.
4. Klikk Fortsette når prosjektet er klart.
5. Klikk på web-ikon på prosjektoversiktssiden for å registrere en webapp.
6. Gi appen din et kallenavn og klikk Registrere.
7. Kopier det oppgitte konfigurasjonsobjektet. Du trenger den for å koble applikasjonen til Firebase.

Lag en skylagringsbøtte

Firebase lagrer filer i en skylagringsbøtte. Følg disse trinnene for å lage den:

1. På prosjektoversiktssiden klikker du på Oppbevaring fanen på venstre navigasjonspanel.
2. Klikk Kom i gang og velg testmodus.
3. Velg standard lagringsbøtteplassering og klikk Ferdig.

Du er nå klar til å begynne å laste opp filer til Firebase-lagring.

Legg til Firebase for å React

I terminalen din, naviger til React-prosjektmappen. Kjør følgende kommando for å installere Firebase SDK:

npm installere brannbase

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

import { initializeApp } fra "firebase/app";
import { getStorage } fra "brannbase/lagring";
// Initialiser Firebase
konst app = initializeApp ({
 apiKey: <apiKey>,
 authDomain: <authDomain>,
 prosjekt-ID: <prosjekt-ID>,
 lagringsbøtte: <oppbevaringsbøtte>,
 messagingSenderId: <messagingSenderId>,
 appId: <appId>,
 måle-ID: <måle-ID>,
});
// Firebase-lagringsreferanse
konst lagring = getStorage (app);
eksportmisligholde Oppbevaring;

Bruk konfigurasjonsobjektet du fikk etter å ha opprettet Firebase-prosjektet for å initialisere Firebase-appen.

Den siste linjen eksporterer Firebase-lagringsreferansen slik at du kan få tilgang til den forekomsten fra resten av appen din.

Opprett en behandlerfunksjon for å laste opp bildene til Firebase

Ved å klikke på opplastingsknappen skal funksjonen som er ansvarlig for opplasting av filen til Firebase-lagring utløses. La oss lage den funksjonen.

I App.js, legg til funksjonen handleLast opp. I funksjonen, sjekk om filen ikke er tom siden en bruker kan klikke på opplastingsknappen før han velger en fil. Hvis filen ikke eksisterer, må du sende et varsel som ber brukeren laste opp en fil først.

funksjonhandleLast opp() {
 if (!fil) {
 varsling("Vennligst velg en fil først!")
 }
}

Hvis filen eksisterer, opprett en lagringsreferanse. En lagringsreferanse fungerer som en peker til filen i skyen du vil operere på.

Start med å importere lagringstjenesten du opprettet i firebaseConfig.js fil.

import Oppbevaring fra "./firebaseConfig.js"

Import ref fra Firebase-lagringsforekomsten og send inn lagringstjenesten og filbanen som et argument.

import {ref} fra "brannbase/lagring"
funksjonhandleLast opp() {
 if (!fil) {
 varsling("Vennligst velg en fil først!")
 }
konst storageRef = ref (lagring, `/filer/${file.name}`)
}

Deretter oppretter du en opplastingsoppgave ved å sende Firebase-lagringsforekomsten til uploadBytesResumable() funksjon. Det er flere metoder du kan bruke, men denne spesielle lar deg pause og gjenoppta en opplasting. Den viser også fremdriftsoppdateringer.

De uploadBytesResumable() funksjonen godtar lagringsreferansen og filen som skal lastes opp.

import {
 ref,
 uploadBytesResumable 
} fra "brannbase/lagring";
funksjonhandleLast opp() {
hvis (!fil) {
 alert("Velg en fil først!")
 }
konst storageRef = ref (lagring, `/filer/${file.name}`)
konst uploadTask = uploadBytesResumable (lagringsRef, fil);
}

For å overvåke fremdriften og håndtere feil mens filen lastes opp, lytt etter tilstandsendringer, feil og fullføring.

import {
 ref,
 uploadBytesResumable,
 getDownloadURL 
} fra "brannbase/lagring";
funksjonhandleLast opp() {
 if (!fil) {
 varsling("Vennligst velg en fil først!")
 }
konst storageRef = ref (lagring,`/filer/${file.name}`)
konst uploadTask = uploadBytesResumable (lagringsRef, fil);
last opp oppgave.på(
"tilstand_endret",
 (øyeblikksbilde) => {
konst prosent = Matte.rund(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// oppdateringsfremdrift
 settProsent (prosent);
 },
 (feil) => konsoll.log (feil),
 () => {
// last ned url
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konsoll.log (url);
 });
 }
 ); 
}

Her, den tilstand_endret hendelsen har tre tilbakeringingsfunksjoner. I den første funksjonen holder du oversikt over opplastingsfremdriften og laster opp fremdriftsstatusen. I den andre tilbakeringingsfunksjonen, håndtere en feil hvis opplastingen mislykkes.

Den siste funksjonen kjører når opplastingen er fullført, og får nedlastings-URLen, og viser den på konsollen. I en virkelig applikasjon kan du lagre den i en database.

Du kan vise fremdriftsstatusen for opplastingen ved å bruke prosenttilstanden. Legg også til en ved trykk hendelse på opplastingsknappen for å utløse handleLast opp funksjon.

import { useState } fra "reagere";
funksjonApp() {
konst [prosent, settPercent] = brukState(0);
komme tilbake (
<div>
<input type="fil" onChange={handleChange} godta="" />
<button onClick={handleUpload}>Last opp til Firebase</button>
<s>{prosent} "% ferdig"</s>
</div>
 )
}

Her er den komplette koden for App.js:

import { useState } fra "reagere";
import { Oppbevaring } fra "./firebaseConfig";
import { ref, uploadBytesResumable, getDownloadURL } fra "brannbase/lagring";
funksjonApp() {
// Oppgi å lagre opplastet fil
 const [fil, setFile] = brukState("");
// fremgang
konst [prosent, settPercent] = brukState(0);
// Håndter filopplastingshendelse og oppdateringstilstand
funksjonhandleEndre(begivenhet) {
setFile(begivenhet.mål.filer[0]);
 }
konst handleUpload = () => {
 if (!fil) {
 varsling("Last opp et bilde først!");
 }
konst storageRef = ref (lagring, `/filer/${file.name}`);
// fremdriften kan settes på pause og gjenopptas. Den viser også fremdriftsoppdateringer.
// Mottar lagringsreferansen og filen som skal lastes opp.
konst uploadTask = uploadBytesResumable (lagringsRef, fil);
last opp oppgave.på(
"tilstand_endret",
 (øyeblikksbilde) => {
konst prosent = Matte.rund(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// oppdateringsfremdrift
 settProsent (prosent);
 },
 (feil) => konsoll.log (feil),
 () => {
// last ned url
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konsoll.log (url);
 });
 }
 );
 };
komme tilbake (
<div>
<input type="fil" onChange={handleChange} godta="/image/*" />
<button onClick={handleUpload}>Last opp til Firebase</button>
<s>{prosent} "% ferdig"</s>
</div>
 );
}
eksportmisligholde App;

Gjør mer med Firebase-lagring

Opplasting av filer er en av de mest grunnleggende funksjonene til Firebase-lagring. Det er imidlertid andre ting som Firebase-lagring lar deg gjøre. Du kan få tilgang til, vise, organisere og slette filene dine.

I en mer komplisert app vil du kanskje autentisere brukere for å gi dem tillatelse til å samhandle med bare filene deres.

Autentisere brukere med Firebase & React

Les Neste

Om forfatteren