Облачное хранилище для Firebase позволяет загружать и делиться созданным пользователями контентом, таким как изображения и видео, что позволяет встраивать мультимедийный контент в ваши приложения. Ваши данные хранятся в сегменте хранилища — объектном хранилище эксабайтного масштаба с высокой доступностью и глобальной избыточностью 🚀
- Создать проект
- Зарегистрировать приложение
3. Добавьте Firebase SDK в свое веб-приложение.
4.создайте Firebase.js в папке src
5. Создайте интерфейс загрузки изображений
app.js
import { useState } from "react";
import { ref, getDownloadURL, uploadBytesResumable } from "firebase/storage";
import { storage } from "./firebase";
function App() {
const [progress, setProgress] = useState(0);
const formHandler = (e) => {
e.preventDefault();
const file = e.target[0].files[0];
uploadFiles(file);
};
const uploadFiles = (file) => {
//
if (!file) return;
const sotrageRef = ref(storage, `files/${file.name}`);
const uploadTask = uploadBytesResumable(sotrageRef, file);
uploadTask.on("state_changed",(snapshot) => {
const prog = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100);
setProgress(prog);
},
(error) => console.log(error),
() => {
getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
console.log("File available at", downloadURL); });});};
return (
<div className="App">
<form onSubmit={formHandler}>
<input type="file" className="input" />
<button type="submit">Upload</button>
</form>
<hr />
<h2>Uploading done {progress}%</h2>
</div>
);
}
export default App;
