Како да отпремите датотеке у Фиребасе складиште користећи Реацт.јс

Фиребасе складиште пружа једноставан начин складиштења података које генерише корисник, попут слика, видео записа и аудио датотека. Интегрише се са Фиребасе аутентификацијом, тако да можете да контролишете ко има приступ датотекама.

Можете да складиштите велике количине садржаја користећи Фиребасе јер се аутоматски прилагођава вашим потребама. Једноставан је за коришћење са оквиром треће стране као што је Реацт ЈаваСцрипт библиотека

Подешавање пројекта

Да бисте отпремили датотеке на Фиребасе складиште, потребно је да направите веб образац који омогућава корисницима да изаберу датотеку из система датотека.

Почните од креирање Реацт апликације користећи цреате-реацт-апп. Покрените ову наредбу да генеришете Реацт пројекат под називом фиребасе-уплоад:

нпк Креирај-реацт-апп фиребасе-уплоад

Да би било једноставно, потребно вам је само дугме за унос које прихвата датотеке и дугме за отпремање. Замените садржај Апп.јс са следећим кодом.

увоз {усеСтате} из "реаговати"
функцијаАпликација() {
 цонст [фајл, сетФиле] = усеСтате("");





instagram viewer

// Рукује уносом променитидогађаји ажурирања стања
функцијахандлеЦханге(догађај) {
сетФиле(догађај.таргет.фајлови[0]);
 }
повратак (
<див>
<тип уноса="фајл" аццепт="слика/*" онЦханге={хандлеЦханге}/>
<дугме>Отпремите у Фиребасе</button>
</div>
 );
}
извозУобичајено Апликација;

У горњем коду, улазни ознаке прихватити атрибут је подешен да дозвољава само слике. Тхе хандлеЦханге() функција управља променом уноса и ажурира стање за чување изабране датотеке.

Подесите Фиребасе

Пре него што отпремите датотеку у Фиребасе складиште, потребно је да креирате Фиребасе пројекат.

Направите Фиребасе пројекат

Пратите упутства у наставку да бисте креирали Фиребасе пројекат:

1. Иди на Фиребасе страницу конзоле и кликните на Додајте пројекат или Креирајте пројекат (ако правите пројекат по први пут).
2. Дајте свом пројекту име по вашем избору и кликните Настави.
3. Поништите избор Гоогле аналитике јер вам није потребна за овај пројекат и кликните Креирајте пројекат.
4. Кликните Настави када је пројекат спреман.
5. Кликните на веб икона на страници са прегледом пројекта да бисте регистровали веб апликацију.
6. Дајте својој апликацији надимак и кликните Регистровати.
7. Копирајте дати конфигурациони објекат. Требаће вам да повежете апликацију са Фиребасе-ом.

Направите корпу за складиштење у облаку

Фиребасе складишти датотеке у канту за складиштење у облаку. Пратите следеће кораке да бисте га креирали:

1. На страници са прегледом пројекта кликните на Складиште картицу на левој навигационој табли.
2. Кликните Почети и изаберите Тест Моде.
3. Изаберите подразумевану локацију за складиштење и кликните Готово.

Сада сте спремни да почнете да отпремате датотеке у Фиребасе складиште.

Додајте Фиребасе у Реацт

У свом терминалу идите до фасцикле вашег Реацт пројекта. Покрените следећу команду да бисте инсталирали Фиребасе СДК:

нпм инсталирај фиребасе

Креирајте нову датотеку, фиребасеЦонфиг.јс, и иницијализујте Фиребасе.

увоз {иницијализеАпп} из "фиребасе/апп";
увоз { гетСтораге } из "фиребасе/стораге";
// Иницијализирај Фиребасе
конст апп = инитиализеАпп ({
 апиКеи: <апиКеи>,
 аутхДомаин: <аутхДомаин>,
 ИД пројекта: <пројецтИд>,
 сторагеБуцкет: <сторагеБуцкет>,
 мессагингСендерИд: <мессагингСендерИд>,
 аппИд: <аппИд>,
 Ид мерења: <Ид мерења>,
});
// Референца за Фиребасе складиште
конст складиште = гетСтораге (апликација);
извозУобичајено складиште;

Користите објекат конфигурације који сте добили након креирања Фиребасе пројекта да бисте иницијализовали Фиребасе апликацију.

Последњи ред извози референцу за Фиребасе складиште тако да можете да приступите тој инстанци из остатка апликације.

Креирајте функцију руковаоца за отпремање слика у Фиребасе

Кликом на дугме за отпремање требало би да покрене функцију одговорну за отпремање датотеке у Фиребасе складиште. Хајде да креирамо ту функцију.

Ин Апп.јс, додајте функцију хандлеУплоад. У функцији проверите да ли датотека није празна јер корисник може кликнути на дугме за отпремање пре него што одабере датотеку. Ако датотека не постоји, подигните упозорење које каже кориснику да прво отпреми датотеку.

функцијахандлеУплоад() {
 иф (!фајл) {
 упозорење ("Молимо прво изаберите датотеку!")
 }
}

Ако датотека постоји, креирајте референцу за складиштење. Референца за складиштење делује као показивач на датотеку у облаку на којој желите да радите.

Започните увозом услуге складиштења коју сте креирали у фиребасеЦонфиг.јс фајл.

увоз складиште из "./фиребасеЦонфиг.јс"

Увоз реф из Фиребасе инстанце складишта и проследите услугу складиштења и путању датотеке као аргумент.

увоз {реф} из "фиребасе/стораге"
функцијахандлеУплоад() {
 иф (!фајл) {
 упозорење ("Молимо прво изаберите датотеку!")
 }
конст сторагеРеф = реф (складиштење, `/филес/${филе.наме}`)
}

Затим креирајте задатак за отпремање тако што ћете проследити Фиребасе инстанцу складишта у уплоадБитесРесумабле() функција. Постоји неколико метода које можете користити, али овај вам омогућава да паузирате и наставите отпремање. Такође открива ажурирања напретка.

Тхе уплоадБитесРесумабле() функција прихвата референцу за складиштење и датотеку за отпремање.

увоз {
 реф,
 уплоадБитесРесумабле 
} из "фиребасе/стораге";
функцијахандлеУплоад() {
ако (!фајл) {
 упозорење("Прво изаберите датотеку!")
 }
конст сторагеРеф = реф (складиштење, `/филес/${филе.наме}`)
конст уплоадТаск = уплоадБитесРесумабле (сторагеРеф, датотека);
}

Да бисте пратили напредак и радили са грешкама док се датотека отпрема, слушајте промене стања, грешке и завршетак.

увоз {
 реф,
 уплоадБитесРесумабле,
 гетДовнлоадУРЛ 
} од "фиребасе/стораге";
функцијахандлеУплоад() {
 иф (!фајл) {
 упозорење ("Молимо прво изаберите датотеку!")
 }
конст сторагеРеф = реф (складиштење,`/филес/${филе.наме}`)
конст уплоадТаск = уплоадБитесРесумабле (сторагеРеф, датотека);
уплоадТаск.на(
"стање_промењено",
 (снимак) => {
конст проценат = Матх.роунд(
 (снапсхот.битесТрансферред / снапсхот.тоталБитес) * 100
 );
// напредак ажурирања
 сетПерцент (проценат);
 },
 (ерр) => конзола.лог (грешка),
 () => {
// УРЛ за преузимање
 гетДовнлоадУРЛ(уплоадТаск.снапсхот.реф).тхен((урл) => {
конзола.лог (урл);
 });
 }
 ); 
}

Ево, стање_промењено догађај има три функције повратног позива. У првој функцији, пратите напредак отпремања и отпремање стања напретка. У другој функцији повратног позива обрадите грешку ако је отпремање неуспешно.

Последња функција се покреће када се отпремање заврши и добија УРЛ за преузимање, а затим га приказује на конзоли. У апликацији из стварног живота, можете је сачувати у бази података.

Можете приказати стање напретка отпремања користећи процентуално стање. Такође додајте ан онЦлицк догађај на дугмету за отпремање да бисте покренули хандлеУплоад функција.

увоз { усеСтате } из "реаговати";
функцијаАпликација() {
конст [перцент, сетПерцент] = усеСтате(0);
повратак (
<див>
<тип уноса="фајл" онЦханге={хандлеЦханге} аццепт="" />
<дугме онЦлицк={хандлеУплоад}>Отпремите у Фиребасе</button>
<стр>{проценат} "% Готово"</п>
</div>
 )
}

Ево комплетног кода за Апп.јс:

увоз { усеСтате } из "реаговати";
увоз { складиште } из "./фиребасеЦонфиг";
увоз { реф, уплоадБитесРесумабле, гетДовнлоадУРЛ } из "фиребасе/стораге";
функцијаАпликација() {
// Држава за чување отпремљене датотеке
 цонст [фајл, сетФиле] = усеСтате("");
// напредак
конст [перцент, сетПерцент] = усеСтате(0);
// Руковање догађајем отпремања датотеке и стањем ажурирања
функцијахандлеЦханге(догађај) {
сетФиле(догађај.таргет.фајлови[0]);
 }
конст хандлеУплоад = () => {
 иф (!фајл) {
 упозорење ("Прво поставите слику!");
 }
конст сторагеРеф = реф (складиштење, `/филес/${филе.наме}`);
// напредак се може паузирати и наставити. Такође открива ажурирања напретка.
// Прима референцу за складиштење и датотеку за отпремање.
конст уплоадТаск = уплоадБитесРесумабле (сторагеРеф, датотека);
уплоадТаск.на(
"стање_промењено",
 (снимак) => {
конст проценат = Матх.роунд(
 (снапсхот.битесТрансферред / снапсхот.тоталБитес) * 100
 );
// напредак ажурирања
 сетПерцент (проценат);
 },
 (ерр) => конзола.лог (грешка),
 () => {
// УРЛ за преузимање
 гетДовнлоадУРЛ(уплоадТаск.снапсхот.реф).тхен((урл) => {
конзола.лог (урл);
 });
 }
 );
 };
повратак (
<див>
<тип уноса="фајл" онЦханге={хандлеЦханге} аццепт="/image/*" />
<дугме онЦлицк={хандлеУплоад}>Отпремите у Фиребасе</button>
<стр>{проценат} "% Готово"</п>
</div>
 );
}
извозУобичајено Апликација;

Урадите више са Фиребасе складиштем

Отпремање датотека је једна од најосновнијих карактеристика Фиребасе складишта. Међутим, постоје и друге ствари које вам Фиребасе складиште омогућава. Можете приступити, приказати, организовати и избрисати своје датотеке.

У компликованијој апликацији, можда ћете желети да аутентификујете кориснике да бисте им дали дозволу да комуницирају само са својим датотекама.

Аутентификација корисника помоћу Фиребасе-а и Реацт-а

Реад Нект

О аутору