Bestanden uploaden naar Firebase Storage met React.js

Firebase-opslag biedt een eenvoudige manier om door gebruikers gegenereerde gegevens, zoals afbeeldingen, video's en audiobestanden, op te slaan. Het integreert met Firebase-authenticatie, zodat u kunt bepalen wie toegang heeft tot de bestanden.

U kunt grote hoeveelheden inhoud opslaan met Firebase, omdat het automatisch wordt geschaald om aan uw behoeften te voldoen. Het is eenvoudig te gebruiken met een raamwerk van derden, zoals de React JavaScript-bibliotheek

Projectconfiguratie

Bestanden uploaden naar: Firebase-opslag, moet u een webformulier maken waarmee gebruikers een bestand uit het bestandssysteem kunnen selecteren.

Start op een React-app maken met behulp van create-react-app. Voer deze opdracht uit om een ​​React-project te genereren met de naam firebase-upload:

npx creëren-reageren-app firebase-upload

Om het simpel te houden, heb je alleen een invoerknop nodig die bestanden accepteert en een uploadknop. Vervang de inhoud van App.js met de volgende code.

importeren {useState} van "Reageer"





instagram viewer

functieApp() {
 const [bestand, setFile] = useState("");
// Behandelt invoer Wijzigenevenementen updates staat
functiehandvatWijzigen(evenement) {
setFile(evenement.doel.bestanden[0]);
 }
opbrengst (
<div>
<invoertype="het dossier" accepteren="afbeelding/*" onChange={handleChange}/>
<knop>Uploaden naar Firebase</button>
</div>
 );
}
exporterenstandaard App;

In de bovenstaande code, de invoer tag's aanvaarden kenmerk is ingesteld om alleen afbeeldingen toe te staan. De handvatChange() functie verwerkt de invoerwijziging en werkt de status bij om het gekozen bestand op te slaan.

Firebase instellen

Voordat u het bestand uploadt naar Firebase-opslag, moet u een Firebase-project maken.

Een Firebase-project maken

Volg de onderstaande instructies om een ​​Firebase-project te maken:

1. Ga naar de Firebase console-pagina en klik op Project toevoegen of Een project maken (als u voor het eerst een project maakt).
2. Geef uw project een naam naar keuze en klik op Doorgaan.
3. Deselecteer Google Analytics aangezien u het niet nodig heeft voor dit project en klik op Project maken.
4. Klik Doorgaan zodra het project klaar is.
5. Klik op de web icoon op de projectoverzichtspagina om een ​​webapp te registreren.
6. Geef je app een bijnaam en klik op Register.
7. Kopieer het opgegeven configuratieobject. Je hebt het nodig om je applicatie te verbinden met Firebase.

Een Cloud Storage-bucket maken

Firebase slaat bestanden op in een cloudopslagbucket. Volg de volgende stappen om het te maken:

1. Klik op de projectoverzichtspagina op de Opslag tabblad in het linkernavigatiepaneel.
2. Klik Begin en selecteer test modus.
3. Selecteer de standaard opslagbucketlocatie en klik op Klaar.

U bent nu klaar om bestanden naar Firebase-opslag te uploaden.

Firebase toevoegen om te reageren

Navigeer in uw terminal naar uw React-projectmap. Voer de volgende opdracht uit om de Firebase SDK te installeren:

npm installeren vuurbasis

Maak een nieuw bestand, firebaseConfig.jsen initialiseer Firebase.

importeren { initializeApp } van "firebase/app";
importeren { getStorage } van "firebase/opslag";
// Firebase initialiseren
const app = app initialiseren ({
 API sleutel: <API sleutel>,
 authDomein: <authDomein>,
 project-ID: <projectId>,
 opbergemmer: <opbergemmer>,
 messagingSenderId: <messagingSenderId>,
 app-ID: <appId>,
 meet-ID: <metingId>,
});
// Firebase-opslagreferentie
const opslag = getStorage (app);
exporterenstandaard opslag;

Gebruik het configuratieobject dat u hebt gekregen na het maken van het Firebase-project om de Firebase-app te initialiseren.

De laatste regel exporteert de Firebase-opslagreferentie, zodat u die instantie vanuit de rest van uw app kunt openen.

Een handlerfunctie maken om de afbeeldingen naar Firebase te uploaden

Als u op de uploadknop klikt, wordt de functie geactiveerd die verantwoordelijk is voor het uploaden van het bestand naar Firebase-opslag. Laten we die functie maken.

In App.js, voeg de functie toe handvatUploaden. Controleer in de functie of het bestand niet leeg is, aangezien een gebruiker op de uploadknop kan klikken voordat hij een bestand kiest. Als het bestand niet bestaat, geef dan een waarschuwing dat de gebruiker eerst een bestand moet uploaden.

functiehandvatUploaden() {
 als (!bestand) {
 waarschuwing("Kies eerst een bestand!")
 }
}

Als het bestand bestaat, maakt u een opslagreferentie aan. Een opslagreferentie fungeert als een verwijzing naar het bestand in de cloud waarop u wilt werken.

Begin met het importeren van de opslagservice die u hebt gemaakt in de firebaseConfig.js het dossier.

importeren opslag van "./firebaseConfig.js"

Importeren ref van de Firebase-opslaginstantie en geef de opslagservice en het bestandspad door als argument.

importeren {ref} van "vuurbasis/opslag"
functiehandvatUploaden() {
 als (!bestand) {
 waarschuwing("Kies eerst een bestand!")
 }
const storageRef = ref (opslag, `/bestanden/${bestand.naam}`)
}

Maak vervolgens een uploadtaak door de Firebase-opslaginstantie door te geven aan de uploadBytesHervatbaar() functie. Er zijn verschillende methoden die u kunt gebruiken, maar met deze specifieke kunt u een upload pauzeren en hervatten. Het onthult ook voortgangsupdates.

De uploadBytesHervatbaar() functie accepteert de opslagreferentie en het te uploaden bestand.

importeren {
 ref,
 uploadBytesHervatbaar 
} van "firebase/opslag";
functiehandvatUploaden() {
indien (!het dossier) {
 alert("Kies eerst een bestand!")
 }
const storageRef = ref (opslag, `/bestanden/${bestand.naam}`)
const uploadTask = uploadBytesResumable (storageRef, bestand);
}

Luister naar statuswijzigingen, fouten en voltooiing om de voortgang te bewaken en fouten af ​​te handelen terwijl het bestand wordt geüpload.

importeren {
 ref,
 uploadBytesHervatbaar,
 getDownload-URL 
} van "vuurbasis/opslag";
functiehandvatUploaden() {
 als (!bestand) {
 waarschuwing("Kies eerst een bestand!")
 }
const storageRef = ref (opslag,`/bestanden/${bestand.naam}`)
const uploadTask = uploadBytesResumable (storageRef, bestand);
uploadTaak.Aan(
"staat_gewijzigd",
 (momentopname) => {
const procent = Wiskunde.ronde(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// voortgang bijwerken
 setPercentage (procent);
 },
 (fout) => troosten.log (fout),
 () => {
// download-url
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
troosten.log (url);
 });
 }
 ); 
}

Hier de staat_gewijzigd gebeurtenis heeft drie terugbelfuncties. In de eerste functie houdt u de uploadvoortgang bij en uploadt u de voortgangsstatus. In de tweede callback-functie, behandel een fout als de upload niet is gelukt.

De laatste functie wordt uitgevoerd zodra de upload is voltooid en krijgt de download-URL en geeft deze vervolgens weer op de console. In een real-life applicatie zou je het in een database kunnen opslaan.

U kunt de voortgangsstatus van de upload weergeven met behulp van de procentstatus. Voeg ook een. toe bij klikken gebeurtenis op de uploadknop om de. te activeren handvatUploaden functie.

importeren { useState } van "Reageer";
functieApp() {
const [procent, setPercent] = useState(0);
opbrengst (
<div>
<invoertype="het dossier" onChange={handleChange} accept="" />
<button onClick={handleUpload}>Uploaden naar Firebase</button>
<p>{procent} "% klaar"</p>
</div>
 )
}

Hier is de volledige code voor App.js:

importeren { useState } van "Reageer";
importeren { opslag } van "./firebaseConfig";
importeren {ref, uploadBytesResumable, getDownloadURL} van "firebase/opslag";
functieApp() {
// Staat om geüpload bestand op te slaan
 const [bestand, setFile] = useState("");
// voortgang
const [procent, setPercent] = useState(0);
// Afhandelen van bestandsuploadgebeurtenis en updatestatus
functiehandvatWijzigen(evenement) {
setFile(evenement.doel.bestanden[0]);
 }
const handvatUpload = () => {
 als (!bestand) {
 waarschuwing("Upload eerst een afbeelding!");
 }
const storageRef = ref (opslag, `/bestanden/${bestand.naam}`);
// voortgang kan worden onderbroken en hervat. Het onthult ook voortgangsupdates.
// Ontvangt de opslagreferentie en het te uploaden bestand.
const uploadTask = uploadBytesResumable (storageRef, bestand);
uploadTaak.Aan(
"staat_gewijzigd",
 (momentopname) => {
const procent = Wiskunde.ronde(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// voortgang bijwerken
 setPercentage (procent);
 },
 (fout) => troosten.log (fout),
 () => {
// download-url
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
troosten.log (url);
 });
 }
 );
 };
opbrengst (
<div>
<invoertype="het dossier" onChange={handleChange} accept="/image/*" />
<button onClick={handleUpload}>Uploaden naar Firebase</button>
<p>{procent} "% klaar"</p>
</div>
 );
}
exporterenstandaard App;

Meer doen met Firebase-opslag

Het uploaden van bestanden is een van de meest elementaire functies van Firebase-opslag. Er zijn echter nog andere dingen die u met Firebase-opslag kunt doen. U kunt uw bestanden openen, weergeven, ordenen en verwijderen.

In een meer gecompliceerde app wil je misschien gebruikers authenticeren om hen toestemming te geven om alleen met hun bestanden te werken.

Gebruikers verifiëren met Firebase & React

Lees volgende

Over de auteur