Ako nahrať súbory do úložiska Firebase pomocou React.js

Úložisko Firebase poskytuje jednoduchý spôsob ukladania údajov vytvorených používateľmi, ako sú obrázky, videá a zvukové súbory. Integruje sa s autentifikáciou Firebase, takže môžete ovládať, kto má prístup k súborom.

Pomocou platformy Firebase môžete ukladať veľké množstvo obsahu, pretože sa automaticky prispôsobuje vašim potrebám. Je to jednoduché na použitie s rámcom tretej strany, ako je knižnica React JavaScript

Nastavenie projektu

Ak chcete nahrať súbory do Úložisko Firebase, musíte vytvoriť webový formulár, ktorý používateľom umožní vybrať súbor zo systému súborov.

Začnite tým vytvorenie aplikácie React pomocou aplikácie create-react-app. Spustite tento príkaz na vygenerovanie projektu React s názvom Firebase-upload:

npx vytvoriť-react-app firebase-upload

Aby to bolo jednoduché, potrebujete iba tlačidlo vstupu, ktoré prijíma súbory a tlačidlo nahrávania. Vymeňte obsah App.js s nasledujúcim kódom.

importovať {useState} od "reagovať"
funkciuApp() {
 const [file, setFile] = useState("");
// Spravuje vstup 





instagram viewer
zmeniťudalosťa aktualizuje stav
funkciurukoväťZmeniť(udalosť) {
setFile(udalosť.cieľ.súbory[0]);
 }

vrátiť (
<div>
<typ vstupu ="súbor" prijať ="obrázok/*" onChange={handleChange}/>
<tlačidlo>Nahrajte do Firebase</button>
</div>
 );
}
exportpredvolená App;

Vo vyššie uvedenom kóde je vstup značky súhlasiť atribút je nastavený tak, aby povolil iba obrázky. The handleChange() funkcia spracuje zmenu vstupu a aktualizuje stav na uloženie vybratého súboru.

Nastavte Firebase

Pred nahraním súboru do úložiska Firebase musíte vytvoriť projekt Firebase.

Vytvorte projekt Firebase

Ak chcete vytvoriť projekt Firebase, postupujte podľa pokynov nižšie:

1. Choďte na Firebase stránku konzoly a kliknite na Pridať projekt alebo Vytvorte projekt (ak vytvárate projekt prvýkrát).
2. Pomenujte svoj projekt podľa vlastného výberu a kliknite Ďalej.
3. Zrušte výber služby Google Analytics, pretože ju pre tento projekt nepotrebujete, a kliknite Vytvoriť projekt.
4. Kliknite ďalej keď je projekt pripravený.
5. Klikni na webovú ikonu na stránke prehľadu projektu a zaregistrujte si webovú aplikáciu.
6. Dajte svojej aplikácii prezývku a kliknite Registrovať.
7. Skopírujte poskytnutý konfiguračný objekt. Budete ho potrebovať na pripojenie aplikácie k Firebase.

Vytvorte segment cloudového úložiska

Firebase ukladá súbory do cloudového úložiska. Na jeho vytvorenie postupujte podľa nasledujúcich krokov:

1. Na stránke prehľadu projektu kliknite na Skladovanie na ľavom navigačnom paneli.
2. Kliknite Začať a vyberte testovací mód.
3. Vyberte predvolené umiestnenie zásobníka a kliknite hotový.

Teraz ste pripravení začať nahrávať súbory do úložiska Firebase.

Pridajte Firebase do React

Vo svojom termináli prejdite do priečinka projektu React. Spustite nasledujúci príkaz a nainštalujte Firebase SDK:

npm Inštalácia firebase

Vytvorte nový súbor, firebaseConfig.jsa inicializujte Firebase.

importovať { initializeApp } od "firebase/aplikácia";
importovať { getStorage } od "firebase/storage";
// Inicializujte Firebase
konšt app = initializeApp ({
 apiKey: <apiKey>,
 authDomain: <authDomain>,
 projectId: <projectId>,
 úložný priestor: <skladovacie vedro>,
 messagingSenderId: <messagingSenderId>,
 appId: <appId>,
 meranie ID: <meranie ID>,
});
// Odkaz na úložisko Firebase
konšt úložisko = getStorage (aplikácia);
exportpredvolená skladovanie;

Na inicializáciu aplikácie Firebase použite konfiguračný objekt, ktorý ste získali po vytvorení projektu Firebase.

Posledný riadok exportuje referenciu úložiska Firebase, aby ste k tejto inštancii mali prístup zo zvyšku svojej aplikácie.

Vytvorte funkciu Handler na nahranie obrázkov do Firebase

Kliknutím na tlačidlo nahrávania by sa mala spustiť funkcia zodpovedná za nahranie súboru do úložiska Firebase. Vytvorme túto funkciu.

In App.js, pridajte funkciu zvládnuťNahrať. Vo funkcii skontrolujte, či súbor nie je prázdny, pretože používateľ môže pred výberom súboru kliknúť na tlačidlo nahrávania. Ak súbor neexistuje, aktivujte výstrahu, ktorá používateľovi povie, aby najprv odovzdal súbor.

funkciuzvládnuťNahrať() {
 if (!file) {
 upozornenie ("Najprv vyberte súbor!")
 }
}

Ak súbor existuje, vytvorte odkaz na úložisko. Referencia úložiska funguje ako ukazovateľ na súbor v cloude, s ktorým chcete pracovať.

Začnite importovaním úložnej služby, ktorú ste vytvorili v firebaseConfig.js súbor.

importovať skladovanie od "./firebaseConfig.js"

Importovať ref z inštancie úložiska Firebase a odovzdať službu úložiska a cestu k súboru ako argument.

importovať {ref} od "firebase/storage"
funkciuzvládnuťNahrať() {
 if (!file) {
 upozornenie ("Najprv vyberte súbor!")
 }
konšt storageRef = ref (sklad, `/files/${file.name}`)
}

Potom vytvorte úlohu nahrávania odovzdaním inštancie úložiska Firebase do uploadBytesResumable() funkciu. Existuje niekoľko spôsobov, ktoré môžete použiť, ale tento konkrétny vám umožňuje pozastaviť a obnoviť nahrávanie. Odhaľuje tiež aktualizácie pokroku.

The uploadBytesResumable() funkcia akceptuje referenciu úložiska a súbor na nahranie.

importovať {
 ref,
 uploadBytesResumable 
} od "firebase/storage";
funkciuzvládnuťNahrať() {
ak (!súbor) {
 upozornenie ("Najskôr si vyberte súbor!")
 }
konšt storageRef = ref (sklad, `/files/${file.name}`)
konšt uploadTask = uploadBytesResumable (storageRef, súbor);
}

Ak chcete sledovať priebeh a spracovávať chyby počas nahrávania súboru, počúvajte zmeny stavu, chyby a dokončenie.

importovať {
 ref,
 uploadBytesResumable,
 getDownloadURL 
} od "firebase/storage";
funkciuzvládnuťNahrať() {
 if (!file) {
 upozornenie ("Najprv vyberte súbor!")
 }
konšt storageRef = ref (sklad,`/files/${file.name}`)
konšt uploadTask = uploadBytesResumable (storageRef, súbor);
uploadTask.zap(
"state_changed",
 (snímka) => {
konšt percent = Matematika.okrúhly(
 (snapshot.bytesPrenesené / snapshot.totalBytes) * 100
 );
// priebeh aktualizácie
 setPercent (percento);
 },
 (chyba) => konzoly.log (chyba),
 () => {
// url na stiahnutie
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konzoly.log (url);
 });
 }
 ); 
}

Tu, state_changed udalosť má tri funkcie spätného volania. V prvej funkcii sledujete priebeh nahrávania a stav nahrávania. V druhej funkcii spätného volania spracujte chybu, ak je nahrávanie neúspešné.

Konečná funkcia sa spustí po dokončení nahrávania a získa adresu URL na stiahnutie a potom ju zobrazí na konzole. V reálnej aplikácii ho môžete uložiť do databázy.

Stav priebehu nahrávania môžete zobraziť pomocou stavu v percentách. Pridajte tiež po kliknutí udalosť na tlačidle nahrávania na spustenie zvládnuťNahrať funkciu.

importovať { useState } od "reagovať";
funkciuApp() {
konšt [percent, setPercent] = useState(0);
vrátiť (
<div>
<typ vstupu ="súbor" onChange={handleChange} prijať="" />
<button onClick={handleUpload}>Nahrajte do Firebase</button>
<p>{percent} "% hotový"</str>
</div>
 )
}

Tu je úplný kód pre App.js:

importovať { useState } od "reagovať";
importovať { úložisko } od "./firebaseConfig";
importovať { ref, uploadBytesResumable, getDownloadURL } od "firebase/storage";
funkciuApp() {
// Stav uloženia nahraného súboru
 const [file, setFile] = useState("");
// pokrok
konšt [percent, setPercent] = useState(0);
// Spracovanie udalosti nahrávania súboru a stavu aktualizácie
funkciurukoväťZmeniť(udalosť) {
setFile(udalosť.cieľ.súbory[0]);
 }
konšt handleUpload = () => {
 if (!file) {
 upozornenie ("Najprv nahrajte obrázok!");
 }
konšt storageRef = ref (sklad, `/files/${file.name}`);
// priebeh je možné pozastaviť a obnoviť. Odhaľuje tiež aktualizácie pokroku.
// Prijme referenciu úložiska a súbor na nahranie.
konšt uploadTask = uploadBytesResumable (storageRef, súbor);
uploadTask.zap(
"state_changed",
 (snímka) => {
konšt percent = Matematika.okrúhly(
 (snapshot.bytesPrenesené / snapshot.totalBytes) * 100
 );
// priebeh aktualizácie
 setPercent (percento);
 },
 (chyba) => konzoly.log (chyba),
 () => {
// url na stiahnutie
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konzoly.log (url);
 });
 }
 );
 };
vrátiť (
<div>
<typ vstupu ="súbor" onChange={handleChange} prijať="/image/*" />
<button onClick={handleUpload}>Nahrajte do Firebase</button>
<p>{percent} "% hotový"</str>
</div>
 );
}
exportpredvolená App;

Urobte viac s úložiskom Firebase

Nahrávanie súborov je jednou z najzákladnejších funkcií úložiska Firebase. Existujú však aj iné veci, ktoré vám úložisko Firebase umožňuje. Môžete pristupovať k svojim súborom, zobrazovať ich, organizovať a mazať.

V zložitejšej aplikácii možno budete chcieť overiť používateľov, aby ste im dali povolenie na interakciu iba s ich súbormi.

Overovanie používateľov pomocou platformy Firebase & React

Prečítajte si ďalej

O autorovi