So laden Sie Dateien mit React.js in Firebase Storage hoch

Firebase Storage bietet eine einfache Möglichkeit, benutzergenerierte Daten wie Bilder, Videos und Audiodateien zu speichern. Es lässt sich in die Firebase-Authentifizierung integrieren, sodass Sie steuern können, wer Zugriff auf die Dateien hat.

Sie können große Mengen an Inhalten mit Firebase speichern, da es automatisch an Ihre Bedürfnisse angepasst wird. Es ist einfach mit einem Drittanbieter-Framework wie der React-JavaScript-Bibliothek zu verwenden

Projektaufbau

Um Dateien hochzuladen Firebase-Speicher, müssen Sie ein Webformular erstellen, mit dem Benutzer eine Datei aus dem Dateisystem auswählen können.

Beginnen Sie mit Erstellen einer React-App mit create-react-app. Führen Sie diesen Befehl aus, um ein React-Projekt mit dem Namen Firebase-Upload:

npx erstellen-React-App-Firebase-Upload

Um es einfach zu halten, benötigen Sie nur eine Eingabeschaltfläche, die Dateien akzeptiert, und eine Upload-Schaltfläche. Ersetzen Sie den Inhalt von App.js mit folgendem Code.

importieren {useState} 





instagram viewer

aus "reagieren"
FunktionApp() {
 const [Datei, setFile] = useState("");
// Behandelt die Eingabe VeränderungVeranstaltungund aktualisiert den Zustand
FunktionhandleChange(Veranstaltung) {
setDatei(Veranstaltung.Ziel.Dateien[0]);
 }
Rückkehr (
<div>
<Eingabetyp="Datei" akzeptieren="Bild/*" onChange={handleChange}/>
<Taste>Auf Firebase hochladen</button>
</div>
 );
}
ExportUrsprünglich Anwendung;

Im obigen Code ist die Eingang Stichworte annehmen -Attribut ist so eingestellt, dass nur Bilder zugelassen werden. Das handleChange() Die Funktion verarbeitet die Eingabeänderung und aktualisiert den Status, um die ausgewählte Datei zu speichern.

Firebase einrichten

Bevor Sie die Datei in den Firebase-Speicher hochladen, müssen Sie ein Firebase-Projekt erstellen.

Erstellen Sie ein Firebase-Projekt

Befolgen Sie die nachstehenden Anweisungen, um ein Firebase-Projekt zu erstellen:

1. Gehen Sie zum Firebase Konsolenseite und klicken Sie auf Projekt hinzufügen oder Erstellen Sie ein Projekt (wenn Sie zum ersten Mal ein Projekt erstellen).
2. Geben Sie Ihrem Projekt einen Namen Ihrer Wahl und klicken Sie Fortsetzen.
3. Deaktivieren Sie Google Analytics, da Sie es für dieses Projekt nicht benötigen, und klicken Sie auf Projekt erstellen.
4. Klicken Fortsetzen sobald das Projekt fertig ist.
5. Klick auf das Web-Symbol auf der Projektübersichtsseite, um eine Web-App zu registrieren.
6. Geben Sie Ihrer App einen Spitznamen und klicken Sie darauf Registrieren.
7. Kopieren Sie das bereitgestellte Konfigurationsobjekt. Sie benötigen es, um Ihre Anwendung mit Firebase zu verbinden.

Erstellen Sie einen Cloud Storage-Bucket

Firebase speichert Dateien in einem Cloudspeicher-Bucket. Führen Sie die folgenden Schritte aus, um es zu erstellen:

1. Klicken Sie auf der Projektübersichtsseite auf die Lager Registerkarte im linken Navigationsbereich.
2. Klicken Loslegen und auswählen Testmodus.
3. Wählen Sie den Standardspeicherort für den Speicher-Bucket aus und klicken Sie auf Erledigt.

Sie können jetzt mit dem Hochladen von Dateien in den Firebase-Speicher beginnen.

Fügen Sie Firebase zu React hinzu

Navigieren Sie in Ihrem Terminal zu Ihrem React-Projektordner. Führen Sie den folgenden Befehl aus, um das Firebase SDK zu installieren:

npm Installieren Feuerbasis

Erstellen Sie eine neue Datei, firebaseConfig.js, und initialisieren Sie Firebase.

importieren { App initialisieren } aus "Firebase/App";
importieren { getStorage } aus "Firebase/Speicher";
// Firebase initialisieren
konst app = initializeApp ({
 API-Schlüssel: <API-Schlüssel>,
 authDomain: <authDomain>,
 Projekt-ID: <Projekt-ID>,
 SpeicherEimer: <SpeicherEimer>,
 MessagingSenderId: <MessagingSenderId>,
 appId: <appId>,
 Mess-ID: <Mess-ID>,
});
// Firebase-Speicherreferenz
konst Speicher = getStorage (App);
ExportUrsprünglich Lager;

Verwenden Sie das Konfigurationsobjekt, das Sie nach dem Erstellen des Firebase-Projekts erhalten haben, um die Firebase-App zu initialisieren.

Die letzte Zeile exportiert die Firebase-Speicherreferenz, sodass Sie vom Rest Ihrer App aus auf diese Instanz zugreifen können.

Erstellen Sie eine Handler-Funktion, um die Bilder auf Firebase hochzuladen

Durch Klicken auf die Schaltfläche zum Hochladen sollte die Funktion ausgelöst werden, die für das Hochladen der Datei in den Firebase-Speicher verantwortlich ist. Lassen Sie uns diese Funktion erstellen.

In App.js, fügen Sie die Funktion hinzu handleHochladen. Überprüfen Sie in der Funktion, ob die Datei nicht leer ist, da ein Benutzer möglicherweise auf die Schaltfläche zum Hochladen klickt, bevor er eine Datei auswählt. Wenn die Datei nicht vorhanden ist, lösen Sie eine Warnung aus, die den Benutzer anweist, zuerst eine Datei hochzuladen.

FunktionhandleHochladen() {
 if (!Datei) {
 Alarm("Bitte wählen Sie zuerst eine Datei aus!")
 }
}

Wenn die Datei vorhanden ist, erstellen Sie eine Speicherreferenz. Eine Speicherreferenz fungiert als Zeiger auf die Datei in der Cloud, die Sie bearbeiten möchten.

Beginnen Sie mit dem Importieren des Speicherdienstes, den Sie in der erstellt haben firebaseConfig.js Datei.

importieren Lager aus "./firebaseConfig.js"

Importieren Ref aus der Firebase-Speicherinstanz und übergeben Sie den Speicherdienst und den Dateipfad als Argument.

importieren {ref} aus "Firebase/Speicher"
FunktionhandleHochladen() {
 if (!Datei) {
 Alarm("Bitte wählen Sie zuerst eine Datei aus!")
 }
konst storageRef = ref (Speicher, `/Dateien/${file.name}`)
}

Erstellen Sie als Nächstes eine Upload-Aufgabe, indem Sie die Firebase-Speicherinstanz an die übergeben uploadBytesResumable() Funktion. Es gibt mehrere Methoden, die Sie verwenden können, aber diese spezielle ermöglicht es Ihnen, einen Upload anzuhalten und fortzusetzen. Es zeigt auch Fortschrittsaktualisierungen an.

Das uploadBytesResumable() Die Funktion akzeptiert die Speicherreferenz und die hochzuladende Datei.

importieren {
 Referenz,
 uploadBytesFortsetzbar 
} aus "Firebase/Speicher";
FunktionhandleHochladen() {
Wenn (!Datei) {
 alert("Bitte wählen Sie zuerst eine Datei aus!")
 }
konst storageRef = ref (Speicher, `/Dateien/${file.name}`)
konst uploadTask = uploadBytesResumable (storageRef, Datei);
}

Um den Fortschritt zu überwachen und Fehler beim Hochladen der Datei zu behandeln, hören Sie auf Statusänderungen, Fehler und Fertigstellung.

importieren {
 Referenz,
 uploadBytesFortsetzbar,
 getDownloadURL 
} aus "Feuerstelle/Lagerung";
FunktionhandleHochladen() {
 if (!Datei) {
 Alarm("Bitte wählen Sie zuerst eine Datei aus!")
 }
konst storageRef = ref (Speicher,`/Dateien/${file.name}`)
konst uploadTask = uploadBytesResumable (storageRef, Datei);
Aufgabe hochladen.An(
"Zustand_geändert",
 (Schnappschuss) => {
konst Prozent = Mathematik.runden(
 (snapshot.bytesTransferred/snapshot.totalBytes) * 100
 );
// Aktualisierungsfortschritt
 setPercent (Prozent);
 },
 (irr) => Konsole.log (fehler),
 () => {
// Download-URL
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
Konsole.log (URL);
 });
 }
 ); 
}

Hier die Zustand_geändert event hat drei Callback-Funktionen. In der ersten Funktion verfolgen Sie den Upload-Fortschritt und laden den Fortschrittsstatus hoch. Behandeln Sie in der zweiten Callback-Funktion einen Fehler, wenn der Upload fehlschlägt.

Die letzte Funktion wird ausgeführt, sobald der Upload abgeschlossen ist, ruft die Download-URL ab und zeigt sie dann auf der Konsole an. In einer realen Anwendung könnten Sie es in einer Datenbank speichern.

Sie können den Fortschrittsstatus des Uploads mithilfe des Prozentstatus anzeigen. Fügen Sie auch ein hinzu onClick Ereignis auf der Upload-Schaltfläche, um das auszulösen handleHochladen Funktion.

importieren { useState } aus "reagieren";
FunktionApp() {
konst [Prozent, setPercent] = useState(0);
Rückkehr (
<div>
<Eingabetyp="Datei" onChange={handleChange} accept="" />
<Schaltfläche onClick={handleUpload}>Auf Firebase hochladen</button>
<p>{Prozent} "% fertig"</p>
</div>
 )
}

Hier ist der vollständige Code für App.js:

importieren { useState } aus "reagieren";
importieren { Lager } aus "./firebaseConfig";
importieren { ref, uploadBytesResumable, getDownloadURL} aus "Firebase/Speicher";
FunktionApp() {
// Status zum Speichern der hochgeladenen Datei
 const [Datei, setFile] = useState("");
// Fortschritt
konst [Prozent, setPercent] = useState(0);
// Datei-Upload-Ereignis verarbeiten und Status aktualisieren
FunktionhandleChange(Veranstaltung) {
setDatei(Veranstaltung.Ziel.Dateien[0]);
 }
konst handleUpload = () => {
 if (!Datei) {
 Alarm("Bitte laden Sie zuerst ein Bild hoch!");
 }
konst storageRef = ref (Speicher, `/Dateien/${file.name}`);
// Der Fortschritt kann angehalten und fortgesetzt werden. Es zeigt auch Fortschrittsaktualisierungen an.
// Empfängt die Speicherreferenz und die hochzuladende Datei.
konst uploadTask = uploadBytesResumable (storageRef, Datei);
Aufgabe hochladen.An(
"Zustand_geändert",
 (Schnappschuss) => {
konst Prozent = Mathematik.runden(
 (snapshot.bytesTransferred/snapshot.totalBytes) * 100
 );
// Aktualisierungsfortschritt
 setPercent (Prozent);
 },
 (irr) => Konsole.log (fehler),
 () => {
// Download-URL
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
Konsole.log (URL);
 });
 }
 );
 };
Rückkehr (
<div>
<Eingabetyp="Datei" onChange={handleChange} accept="/image/*" />
<Schaltfläche onClick={handleUpload}>Auf Firebase hochladen</button>
<p>{Prozent} "% fertig"</p>
</div>
 );
}
ExportUrsprünglich Anwendung;

Mehr erreichen mit Firebase Storage

Das Hochladen von Dateien ist eine der grundlegendsten Funktionen des Firebase-Speichers. Es gibt jedoch noch andere Dinge, die Firebase-Speicher Ihnen ermöglicht. Sie können auf Ihre Dateien zugreifen, sie anzeigen, organisieren und löschen.

In einer komplizierteren App möchten Sie möglicherweise Benutzer authentifizieren, um ihnen die Berechtigung zu erteilen, nur mit ihren Dateien zu interagieren.

Authentifizieren von Benutzern mit Firebase & React

Lesen Sie weiter

Über den Autor