Come caricare file su Firebase Storage utilizzando React.js

L'archiviazione Firebase offre un modo semplice per archiviare dati generati dagli utenti come immagini, video e file audio. Si integra con l'autenticazione Firebase, così puoi controllare chi ha accesso ai file.

Puoi archiviare grandi quantità di contenuti utilizzando Firebase poiché si adatta automaticamente alle tue esigenze. È semplice da usare con un framework di terze parti come la libreria JavaScript React

Configurazione del progetto

Per caricare file su Archiviazione Firebase, è necessario creare un modulo Web che consenta agli utenti di selezionare un file dal file system.

Comincia da creazione di un'app React usando create-react-app. Esegui questo comando per generare un progetto React chiamato caricamento di base di fuoco:

npx creare-react-app firebase-upload

Per semplificare, hai solo bisogno di un pulsante di input che accetti i file e un pulsante di caricamento. Sostituisci il contenuto di App.js con il seguente codice.

importare {useState} a partire dal "reagire"
funzioneApp() {
 const [file, setFile] = useState("");





instagram viewer

// Gestisce l'input modificareeventoe stato degli aggiornamenti
funzionehandleChange(evento) {
setFile(evento.bersaglio.File[0]);
 }
Restituzione (
<div>
<tipo di input="file" accettare="Immagine/*" onChange={handleChange}/>
<pulsante>Carica su Firebase</button>
</div>
 );
}
esportarepredefinito App;

Nel codice sopra, il ingresso tag accettare l'attributo è impostato per consentire solo le immagini. Il handleChange() la funzione gestisce la modifica dell'input e aggiorna lo stato per memorizzare il file selezionato.

Configura Firebase

Prima di caricare il file nell'archivio Firebase, devi creare un progetto Firebase.

Crea un progetto Firebase

Segui le istruzioni seguenti per creare un progetto Firebase:

1. Vai al Base di fuoco pagina della console e fare clic su Aggiungi progetto o Crea un progetto (se stai creando un progetto per la prima volta).
2. Assegna al tuo progetto un nome a tua scelta e clicca Continua.
3. Deseleziona Google Analytics poiché non ti serve per questo progetto e fai clic Crea progetto.
4. Clic Continua una volta che il progetto è pronto.
5. Clicca sul icona web nella pagina della panoramica del progetto per registrare un'app Web.
6. Assegna un nickname alla tua app e fai clic Registrati.
7. Copiare l'oggetto di configurazione fornito. Ti servirà per connettere la tua applicazione a Firebase.

Crea un bucket di archiviazione cloud

Firebase archivia i file in un bucket di archiviazione cloud. Segui i seguenti passaggi per crearlo:

1. Nella pagina della panoramica del progetto, fare clic su Conservazione scheda nel pannello di navigazione a sinistra.
2. Clic Iniziare e seleziona modalità di prova.
3. Seleziona la posizione del bucket di archiviazione predefinito e fai clic Fatto.

Ora sei pronto per iniziare a caricare i file nella memoria di Firebase.

Aggiungi Firebase a Reagire

Nel tuo terminale, vai alla cartella del tuo progetto React. Esegui il comando seguente per installare l'SDK Firebase:

npm installare base di fuoco

Crea un nuovo file, firebaseConfig.jse inizializza Firebase.

importare {inizializzaApp} a partire dal "firebase/app";
importare {getStorage} a partire dal "base antincendio/deposito";
// Inizializza Firebase
cost app = inizializzaApp ({
 apiKey: <apiKey>,
 authDomain: <authDomain>,
 ID progetto: <ID progetto>,
 Secchio di stoccaggio: <storageBucket>,
 messagingSenderId: <messagingSenderId>,
 appId: <appId>,
 misuraId: <misuraId>,
});
// Riferimento allo storage Firebase
cost archiviazione = getStorage (app);
esportarepredefinito Conservazione;

Usa l'oggetto di configurazione che hai ottenuto dopo aver creato il progetto Firebase per inizializzare l'app Firebase.

La riga finale esporta il riferimento di archiviazione Firebase in modo da poter accedere a quell'istanza dal resto dell'app.

Crea una funzione di gestione per caricare le immagini su Firebase

Facendo clic sul pulsante di caricamento dovrebbe attivare la funzione responsabile del caricamento del file nella memoria di Firebase. Creiamo quella funzione.

In App.js, aggiungi la funzione handleUpload. Nella funzione, controlla se il file non è vuoto poiché un utente potrebbe fare clic sul pulsante di caricamento prima di scegliere un file. Se il file non esiste, genera un avviso che dice all'utente di caricare prima un file.

funzionehandleUpload() {
 se (!file) {
 mettere in guardia("Scegli prima un file!")
 }
}

Se il file esiste, creare un riferimento di archiviazione. Un riferimento di archiviazione funge da puntatore al file nel Cloud su cui si desidera operare.

Inizia importando il servizio di archiviazione che hai creato in firebaseConfig.js file.

importare Conservazione a partire dal "./firebaseConfig.js"

Importare rif dall'istanza di archiviazione Firebase e passare il servizio di archiviazione e il percorso del file come argomento.

importare {rif} a partire dal "base antincendio/deposito"
funzionehandleUpload() {
 se (!file) {
 mettere in guardia("Scegli prima un file!")
 }
cost storageRef = ref (archiviazione, `/file/${nome.file}`)
}

Quindi, crea un'attività di caricamento passando l'istanza di archiviazione Firebase a uploadBytesResumable() funzione. Esistono diversi metodi che puoi utilizzare, ma questo in particolare ti consente di mettere in pausa e riprendere un caricamento. Espone anche gli aggiornamenti sullo stato di avanzamento.

Il uploadBytesResumable() la funzione accetta il riferimento di archiviazione e il file da caricare.

importare {
 rif,
 uploadBytesResumable 
} a partire dal "base antincendio/deposito";
funzionehandleUpload() {
Se (!file) {
 alert("Scegli prima un file!")
 }
cost storageRef = ref (archiviazione, `/file/${nome.file}`)
cost uploadTask = uploadBytesResumable (storageRef, file);
}

Per monitorare l'avanzamento e gestire gli errori durante il caricamento dei file, ascolta le modifiche di stato, gli errori e il completamento.

importare {
 rif,
 uploadBytesResumable,
 getDownloadURL 
} a partire dal "firebase/deposito";
funzionehandleUpload() {
 se (!file) {
 mettere in guardia("Scegli prima un file!")
 }
cost storageRef = ref (archiviazione,`/file/${nome.file}`)
cost uploadTask = uploadBytesResumable (storageRef, file);
caricareAttività.su(
"stato_cambiato",
 (istantanea) => {
cost percentuale = Matematica.il giro(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// avanzamento dell'aggiornamento
 setPercent (percentuale);
 },
 (err) => consolle.log (err),
 () => {
// scarica l'URL
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
consolle.log (URL);
 });
 }
 ); 
}

Ecco, il stato_cambiato l'evento ha tre funzioni di richiamata. Nella prima funzione, tieni traccia dell'avanzamento del caricamento e carichi lo stato di avanzamento. Nella seconda funzione di callback, gestisci un errore se il caricamento non riesce.

La funzione finale viene eseguita una volta completato il caricamento e ottiene l'URL di download, quindi lo visualizza sulla console. In un'applicazione reale, potresti salvarlo in un database.

È possibile visualizzare lo stato di avanzamento del caricamento utilizzando lo stato percentuale. Aggiungi anche un al clic evento sul pulsante di caricamento per attivare il handleUpload funzione.

importare {UsaStato} a partire dal "reagire";
funzioneApp() {
cost [percentuale, setPercent] = useState(0);
Restituzione (
<div>
<tipo di input="file" onChange={handleChange} accept="" />
<pulsante onClick={handleUpload}>Carica su Firebase</button>
<p>{per cento} "% fatto"</p>
</div>
 )
}

Ecco il codice completo per App.js:

importare {UsaStato} a partire dal "reagire";
importare { Conservazione } a partire dal "./firebaseConfig";
importare { ref, uploadBytesResumable, getDownloadURL } a partire dal "base antincendio/deposito";
funzioneApp() {
// Stato in cui archiviare il file caricato
 const [file, setFile] = useState("");
// progresso
cost [percentuale, setPercent] = useState(0);
// Gestisce l'evento di caricamento del file e lo stato di aggiornamento
funzionehandleChange(evento) {
setFile(evento.bersaglio.File[0]);
 }
cost handleUpload = () => {
 se (!file) {
 mettere in guardia("Si prega di caricare prima un'immagine!");
 }
cost storageRef = ref (archiviazione, `/file/${nome.file}`);
// l'avanzamento può essere sospeso e ripreso. Espone anche gli aggiornamenti sullo stato di avanzamento.
// Riceve il riferimento di archiviazione e il file da caricare.
cost uploadTask = uploadBytesResumable (storageRef, file);
caricareAttività.su(
"stato_cambiato",
 (istantanea) => {
cost percentuale = Matematica.il giro(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// avanzamento dell'aggiornamento
 setPercent (percentuale);
 },
 (err) => consolle.log (err),
 () => {
// scarica l'URL
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
consolle.log (URL);
 });
 }
 );
 };
Restituzione (
<div>
<tipo di input="file" onChange={handleChange} accept="/image/*" />
<pulsante onClick={handleUpload}>Carica su Firebase</button>
<p>{per cento} "% fatto"</p>
</div>
 );
}
esportarepredefinito App;

Fare di più con l'archiviazione Firebase

Il caricamento dei file è una delle funzionalità di base dell'archiviazione Firebase. Tuttavia, ci sono altre cose che lo storage Firebase ti consente di fare. Puoi accedere, visualizzare, organizzare ed eliminare i tuoi file.

In un'app più complicata, potresti voler autenticare gli utenti per concedere loro il permesso di interagire solo con i loro file.

Autenticazione degli utenti con Firebase & React

Leggi Avanti

Circa l'autore