Kako prenijeti datoteke u Firebase pohranu pomoću React.js

Firebase pohrana pruža jednostavan način pohrane podataka koje generiraju korisnici poput slika, videozapisa i audio datoteka. Integrira se s Firebase autentifikacijom, tako da možete kontrolirati tko ima pristup datotekama.

Pomoću Firebasea možete pohraniti velike količine sadržaja jer se automatski prilagođava vašim potrebama. Jednostavan je za korištenje s okvirom treće strane kao što je React JavaScript biblioteka

Postavljanje projekta

Za prijenos datoteka na Firebase pohrana, trebate izraditi web obrazac koji korisnicima omogućuje odabir datoteke iz datotečnog sustava.

Počnite od stvaranje React aplikacije pomoću aplikacije create-react-app. Pokrenite ovu naredbu za generiranje React projekta pod nazivom firebase-upload:

npx stvoriti-react-app firebase-upload

Da bi bilo jednostavno, potreban vam je samo gumb za unos koji prihvaća datoteke i gumb za prijenos. Zamijenite sadržaj App.js sa sljedećim kodom.

uvoz {useState} iz "reagirati"
funkcijaApp() {
 const [datoteka, setFile] = useState("");

instagram viewer

// Rukuje unosom promijenitidogađaji ažuriranja stanja
funkcijahandleChange(događaj) {
setFile(događaj.cilj.datoteke[0]);
 }
povratak (
<razd>
<vrsta unosa="datoteka" prihvatiti="slika/*" onChange={handleChange}/>
<dugme>Prenesite na Firebase</button>
</div>
 );
}
izvozzadano Aplikacija;

U gornjem kodu, ulazni oznake prihvatiti atribut je postavljen tako da dopušta samo slike. The handleChange() funkcija upravlja promjenom unosa i ažurira stanje za spremanje odabrane datoteke.

Postavite Firebase

Prije prijenosa datoteke u Firebase pohranu, morate izraditi Firebase projekt.

Izradite Firebase projekt

Slijedite upute u nastavku za izradu Firebase projekta:

1. Idite na Firebase stranicu konzole i kliknite na Dodajte projekt ili Napravite projekt (ako prvi put stvarate projekt).
2. Dajte svom projektu naziv po svom izboru i kliknite Nastaviti.
3. Poništite odabir Google Analytics jer vam ne treba za ovaj projekt i kliknite Napravite projekt.
4. Klik Nastaviti nakon što je projekt spreman.
5. Klikni na web ikona na stranici s pregledom projekta za registraciju web aplikacije.
6. Dajte svojoj aplikaciji nadimak i kliknite Registar.
7. Kopirajte navedeni konfiguracijski objekt. Trebat će vam za povezivanje vaše aplikacije s Firebaseom.

Stvorite Cloud Storage Bucket

Firebase pohranjuje datoteke u kantu za pohranu u oblaku. Slijedite sljedeće korake da biste ga stvorili:

1. Na stranici s pregledom projekta kliknite na Skladištenje karticu na lijevoj navigacijskoj ploči.
2. Klik Započnite i odaberite testni način.
3. Odaberite zadanu lokaciju spremnika za pohranu i kliknite Gotovo.

Sada ste spremni za početak prijenosa datoteka u Firebase pohranu.

Dodajte Firebase u React

U svom terminalu idite do mape React projekta. Pokrenite sljedeću naredbu da instalirate Firebase SDK:

npm instalirati vatrena baza

Napravite novu datoteku, firebaseConfig.js, i inicijalizirati Firebase.

uvoz {inicijalizeApp} iz "firebase/app";
uvoz { getStorage } iz "firebase/storage";
// Inicijaliziraj Firebase
konst app = inicijalizirajApp ({
 apiKey: <apiKey>,
 authDomena: <authDomena>,
 ID projekta: <ID projekta>,
 spremnik za pohranu: <storageBucket>,
 messagingSenderId: <messagingSenderId>,
 appId: <appId>,
 Id mjerenja: <Id mjerenja>,
});
// Referenca za pohranu Firebasea
konst pohrana = getStorage (aplikacija);
izvozzadano skladištenje;

Upotrijebite konfiguracijski objekt koji ste dobili nakon stvaranja Firebase projekta za inicijalizaciju Firebase aplikacije.

Posljednji redak izvozi referencu za pohranu Firebasea tako da možete pristupiti toj instanci iz ostatka svoje aplikacije.

Izradite funkciju rukovatelja za prijenos slika u Firebase

Klikom na gumb za prijenos trebao bi se pokrenuti funkcija odgovorna za prijenos datoteke u Firebase pohranu. Kreirajmo tu funkciju.

U App.js, dodajte funkciju handleUpload. U funkciji provjerite je li datoteka prazna jer korisnik može kliknuti na gumb za prijenos prije nego što odabere datoteku. Ako datoteka ne postoji, podignite upozorenje koje govori korisniku da prvo prenese datoteku.

funkcijahandleUpload() {
 if (!datoteka) {
 upozorenje ("Molimo prvo odaberite datoteku!")
 }
}

Ako datoteka postoji, stvorite referencu za pohranu. Referenca za pohranu djeluje kao pokazivač na datoteku u oblaku s kojom želite raditi.

Započnite uvozom usluge pohrane koju ste kreirali u firebaseConfig.js datoteka.

uvoz skladištenje iz "./firebaseConfig.js"

Uvoz ref iz Firebase instance pohrane i proslijediti uslugu pohrane i put datoteke kao argument.

uvoz {ref} iz "firebase/storage"
funkcijahandleUpload() {
 if (!datoteka) {
 upozorenje ("Molimo prvo odaberite datoteku!")
 }
konst storageRef = ref (pohrana, `/datoteke/${file.name}`)
}

Zatim izradite zadatak za prijenos prosljeđivanjem Firebase instance pohrane na uploadBytesResumable() funkcija. Postoji nekoliko metoda koje možete koristiti, ali ovaj vam omogućuje da pauzirate i nastavite prijenos. Također izlaže ažuriranja napretka.

The uploadBytesResumable() funkcija prihvaća referencu za pohranu i datoteku za prijenos.

uvoz {
 ref,
 uploadBytesResumable 
} iz "firebase/storage";
funkcijahandleUpload() {
ako (!datoteka) {
 upozorenje("Prvo odaberite datoteku!")
 }
konst storageRef = ref (pohrana, `/datoteke/${file.name}`)
konst uploadTask = uploadBytesResumable (storageRef, datoteka);
}

Da biste pratili napredak i rješavali pogreške tijekom prijenosa datoteke, slušajte promjene stanja, pogreške i završetak.

uvoz {
 ref,
 uploadBytesResumable,
 getDownloadURL 
} od "vatrena baza/skladište";
funkcijahandleUpload() {
 if (!datoteka) {
 upozorenje ("Molimo prvo odaberite datoteku!")
 }
konst storageRef = ref (pohrana,`/datoteke/${file.name}`)
konst uploadTask = uploadBytesResumable (storageRef, datoteka);
uploadTask.na(
"stanje_promijenjeno",
 (snimka) => {
konst postotak = matematika.krug(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// napredak ažuriranja
 setPercent (postotak);
 },
 (err) => konzola.log (err),
 () => {
// URL za preuzimanje
 getDownloadURL(uploadTask.snapshot.ref).zatim((url) => {
konzola.log (url);
 });
 }
 ); 
}

Evo, stanje_promijenjeno događaj ima tri funkcije povratnog poziva. U prvoj funkciji pratite napredak učitavanja i prenosite stanje napretka. U drugoj funkciji povratnog poziva obradite pogrešku ako je prijenos neuspješan.

Posljednja funkcija se pokreće nakon dovršetka prijenosa i dobiva URL za preuzimanje, a zatim ga prikazuje na konzoli. U stvarnoj aplikaciji, možete je spremiti u bazu podataka.

Možete prikazati stanje napretka prijenosa pomoću stanja postotka. Također dodajte an na klik događaj na gumbu za prijenos za pokretanje handleUpload funkcija.

uvoz { useState } iz "reagirati";
funkcijaApp() {
konst [postotak, setPercent] = useState(0);
povratak (
<razd>
<vrsta unosa="datoteka" onChange={handleChange} prihvati="" />
<gumb onClick={handleUpload}>Prenesite na Firebase</button>
<str>{percent} "% gotovo"</str>
</div>
 )
}

Ovdje je kompletan kod za App.js:

uvoz { useState } iz "reagirati";
uvoz { pohrana } iz "./firebaseConfig";
uvoz { ref, uploadBytesResumable, getDownloadURL } iz "firebase/storage";
funkcijaApp() {
// Stanje za pohranu prenesene datoteke
 const [datoteka, setFile] = useState("");
// napredak
konst [postotak, setPercent] = useState(0);
// Rukovanje događajem prijenosa datoteke i stanjem ažuriranja
funkcijahandleChange(događaj) {
setFile(događaj.cilj.datoteke[0]);
 }
konst handleUpload = () => {
 if (!datoteka) {
 upozorenje ("Molimo prvo prenesite sliku!");
 }
konst storageRef = ref (pohrana, `/datoteke/${file.name}`);
// napredak se može pauzirati i nastaviti. Također izlaže ažuriranja napretka.
// Prima referencu za pohranu i datoteku za prijenos.
konst uploadTask = uploadBytesResumable (storageRef, datoteka);
uploadTask.na(
"stanje_promijenjeno",
 (snimka) => {
konst postotak = matematika.krug(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// napredak ažuriranja
 setPercent (postotak);
 },
 (err) => konzola.log (err),
 () => {
// URL za preuzimanje
 getDownloadURL(uploadTask.snapshot.ref).zatim((url) => {
konzola.log (url);
 });
 }
 );
 };
povratak (
<razd>
<vrsta unosa="datoteka" onChange={handleChange} prihvati="/image/*" />
<gumb onClick={handleUpload}>Prenesite na Firebase</button>
<str>{percent} "% gotovo"</str>
</div>
 );
}
izvozzadano Aplikacija;

Učinite više s Firebase pohranom

Prijenos datoteka jedna je od najosnovnijih značajki Firebase pohrane. Međutim, postoje i druge stvari koje vam Firebase pohrana omogućuje. Možete pristupiti, prikazati, organizirati i izbrisati svoje datoteke.

U složenijoj aplikaciji možda biste željeli autentifikovati korisnike kako biste im dali dopuštenje za interakciju samo s njihovim datotekama.

Autentifikacija korisnika s Firebaseom i Reactom

Pročitajte dalje

O autoru