Jak nahrát soubory do úložiště Firebase pomocí React.js

Úložiště Firebase poskytuje jednoduchý způsob ukládání dat vytvořených uživateli, jako jsou obrázky, videa a zvukové soubory. Integruje se s ověřováním Firebase, takže můžete ovládat, kdo má k souborům přístup.

Pomocí Firebase můžete ukládat velké množství obsahu, protože se automaticky přizpůsobuje vašim potřebám. Snadno se používá s frameworkem třetí strany, jako je knihovna React JavaScript

Nastavení projektu

Chcete-li nahrát soubory do Úložiště Firebase, musíte vytvořit webový formulář, který uživatelům umožní vybrat soubor ze systému souborů.

Začněte tím vytvoření aplikace React pomocí create-react-app. Spuštěním tohoto příkazu vygenerujete projekt React s názvem Firebase-upload:

npx vytvořit-react-app firebase-upload

Aby to bylo jednoduché, potřebujete pouze vstupní tlačítko, které přijímá soubory, a tlačítko pro nahrávání. Vyměňte obsah App.js s následujícím kódem.

import {useState} z "reagovat"
funkceAplikace() {
 const [soubor, setFile] = useState("");
// Zvládá vstup změnaudálosta aktualizuje stav
funkcerukojeťZměnit(událost) {
setFile(událost.cílová.soubory[0]);
 }





instagram viewer

vrátit se (
<div>
<typ vstupu="soubor" přijmout ="obraz/*" onChange={handleChange}/>
<knoflík>Nahrajte do Firebase</button>
</div>
 );
}
vývoznívýchozí Aplikace;

Ve výše uvedeném kódu je vstup značky přijmout atribut je nastaven tak, aby povoloval pouze obrázky. The handleChange() funkce zpracovává změnu vstupu a aktualizuje stav pro uložení vybraného souboru.

Nastavte Firebase

Před nahráním souboru do úložiště Firebase je třeba vytvořit projekt Firebase.

Vytvořte projekt Firebase

Chcete-li vytvořit projekt Firebase, postupujte podle následujících pokynů:

1. Přejít na Firebase stránku konzoly a klikněte na Přidat projekt nebo Vytvořte projekt (pokud vytváříte projekt poprvé).
2. Pojmenujte svůj projekt podle svého výběru a klikněte Pokračovat.
3. Zrušte výběr služby Google Analytics, protože ji pro tento projekt nepotřebujete, a klikněte Vytvořit projekt.
4. Klikněte Pokračovat jakmile je projekt připraven.
5. Klikněte na web ikony na stránce přehledu projektu a zaregistrujte webovou aplikaci.
6. Dejte své aplikaci přezdívku a klikněte Registrovat.
7. Zkopírujte poskytnutý konfigurační objekt. Budete jej potřebovat k připojení aplikace k Firebase.

Vytvořte blok cloudového úložiště

Firebase ukládá soubory do cloudového úložiště. Chcete-li jej vytvořit, postupujte podle následujících kroků:

1. Na stránce přehledu projektu klikněte na Úložný prostor na levém navigačním panelu.
2. Klikněte Začít a vyberte testovací mód.
3. Vyberte výchozí umístění segmentu úložiště a klikněte Hotovo.

Nyní jste připraveni začít nahrávat soubory do úložiště Firebase.

Přidejte Firebase do React

Ve svém terminálu přejděte do složky projektu React. Spuštěním následujícího příkazu nainstalujte Firebase SDK:

npm Nainstalujte firebase

Vytvořte nový soubor, firebaseConfig.jsa inicializujte Firebase.

import { initializeApp } z "firebase/app";
import { getStorage } z "firebase/storage";
// Inicializace Firebase
konst app = initializeApp ({
 apiKey: <apiKey>,
 authDomain: <authDomain>,
 ID projektu: <projectId>,
 úložný kbelík: <úložný kbelík>,
 messagingSenderId: <messagingSenderId>,
 appId: <appId>,
 ID měření: <ID měření>,
});
// Reference úložiště Firebase
konst úložiště = getStorage (aplikace);
vývoznívýchozí úložný prostor;

K inicializaci aplikace Firebase použijte konfigurační objekt, který jste získali po vytvoření projektu Firebase.

Poslední řádek exportuje referenci úložiště Firebase, abyste k této instanci měli přístup ze zbytku aplikace.

Vytvořte funkci Handler pro nahrání obrázků do Firebase

Kliknutím na tlačítko nahrát by se měla spustit funkce zodpovědná za nahrání souboru do úložiště Firebase. Vytvořme tuto funkci.

v App.js, přidejte funkci rukojeťNahrát. Ve funkci zkontrolujte, zda soubor není prázdný, protože uživatel může před výběrem souboru kliknout na tlačítko pro nahrání. Pokud soubor neexistuje, aktivujte výstrahu, která uživateli řekne, aby nejprve nahrál soubor.

funkcerukojeťNahrát() {
 if (!soubor) {
 upozornění ("Nejprve prosím vyberte soubor!")
 }
}

Pokud soubor existuje, vytvořte odkaz na úložiště. Odkaz na úložiště funguje jako ukazatel na soubor v cloudu, se kterým chcete pracovat.

Začněte importem služby úložiště, kterou jste vytvořili v firebaseConfig.js soubor.

import úložný prostor z "./firebaseConfig.js"

Import ref z instance úložiště Firebase a předat službu úložiště a cestu k souboru jako argument.

import {ref} z "firebase/storage"
funkcerukojeťNahrát() {
 if (!soubor) {
 upozornění ("Nejprve prosím vyberte soubor!")
 }
konst storageRef = ref (úložiště, `/files/${file.name}`)
}

Dále vytvořte úlohu nahrávání předáním instance úložiště Firebase do uploadBytesResumable() funkce. Existuje několik metod, které můžete použít, ale tato konkrétní vám umožňuje pozastavit a obnovit nahrávání. Odhaluje také aktualizace průběhu.

The uploadBytesResumable() funkce přijímá referenci úložiště a soubor k nahrání.

import {
 ref,
 uploadBytesResumable 
} z "firebase/storage";
funkcerukojeťNahrát() {
-li (!soubor) {
 upozornění ("Nejdřív prosím vyberte soubor!")
 }
konst storageRef = ref (úložiště, `/files/${file.name}`)
konst uploadTask = uploadBytesResumable (storageRef, soubor);
}

Chcete-li sledovat průběh a zpracovávat chyby při nahrávání souboru, poslouchejte změny stavu, chyby a dokončení.

import {
 ref,
 uploadBytesResumable,
 getDownloadURL 
} z "Firebase/úložiště";
funkcerukojeťNahrát() {
 if (!soubor) {
 upozornění ("Nejprve prosím vyberte soubor!")
 }
konst storageRef = ref (úložiště,`/files/${file.name}`)
konst uploadTask = uploadBytesResumable (storageRef, soubor);
uploadTask.na(
"stav_změněn",
 (snímek) => {
konst procenta = Matematika.kolo(
 (snapshot.bytes Transferred / snapshot.totalBytes) * 100
 );
// průběh aktualizace
 setPercent (procenta);
 },
 (chyba) => řídicí panel.log (chyba),
 () => {
// url ke stažení
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
řídicí panel.log (url);
 });
 }
 ); 
}

Tady, stav_změněn událost má tři funkce zpětného volání. V první funkci sledujete průběh nahrávání a stav nahrávání. Ve druhé funkci zpětného volání zpracujte chybu, pokud je nahrávání neúspěšné.

Konečná funkce se spustí po dokončení nahrávání a získá adresu URL pro stažení a poté ji zobrazí na konzole. V reálné aplikaci jej můžete uložit do databáze.

Stav průběhu nahrávání můžete zobrazit pomocí stavu v procentech. Přidejte také při kliknutí událost na tlačítku nahrávání, která spustí rukojeťNahrát funkce.

import { useState } z "reagovat";
funkceAplikace() {
konst [percent, setPercent] = useState(0);
vrátit se (
<div>
<typ vstupu="soubor" onChange={handleChange} accept="" />
<button onClick={handleUpload}>Nahrajte do Firebase</button>
<p>{procent} "% Hotovo"</str>
</div>
 )
}

Zde je úplný kód pro App.js:

import { useState } z "reagovat";
import { úložný prostor } z "./firebaseConfig";
import { ref, uploadBytesResumable, getDownloadURL } z "firebase/storage";
funkceAplikace() {
// Stav uložení nahraného souboru
 const [soubor, setFile] = useState("");
// pokrok
konst [percent, setPercent] = useState(0);
// Zpracování události nahrávání souboru a stavu aktualizace
funkcerukojeťZměnit(událost) {
setFile(událost.cílová.soubory[0]);
 }
konst handleUpload = () => {
 if (!soubor) {
 upozornění ("Nejprve prosím nahrajte obrázek!");
 }
konst storageRef = ref (úložiště, `/files/${file.name}`);
// pokrok lze pozastavit a obnovit. Odhaluje také aktualizace průběhu.
// Přijme referenci úložiště a soubor k nahrání.
konst uploadTask = uploadBytesResumable (storageRef, soubor);
uploadTask.na(
"stav_změněn",
 (snímek) => {
konst procenta = Matematika.kolo(
 (snapshot.bytes Transferred / snapshot.totalBytes) * 100
 );
// průběh aktualizace
 setPercent (procenta);
 },
 (chyba) => řídicí panel.log (chyba),
 () => {
// url ke stažení
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
řídicí panel.log (url);
 });
 }
 );
 };
vrátit se (
<div>
<typ vstupu="soubor" onChange={handleChange} accept="/image/*" />
<button onClick={handleUpload}>Nahrajte do Firebase</button>
<p>{procent} "% Hotovo"</str>
</div>
 );
}
vývoznívýchozí Aplikace;

Udělejte více s úložištěm Firebase

Nahrávání souborů je jednou z nejzákladnějších funkcí úložiště Firebase. Existují však i další věci, které vám úložiště Firebase umožňuje. Můžete přistupovat ke svým souborům, zobrazovat je, organizovat je a mazat.

Ve složitější aplikaci můžete chtít ověřit uživatele, abyste jim dali oprávnění pracovat pouze s jejich soubory.

Ověřování uživatelů pomocí Firebase & React

Přečtěte si další

O autorovi