Using Firebase Cloud Storage with React to Upload Files to Cloud and Get URL

Cloud Storage for Firebase lets you upload and share user generated content, such as images and video, which allows you to build rich media content into your apps. Your data is stored in a Storage bucket an exabyte scale object storage solution with high availability and global redundancy 🚀

diagram

1. Create a project
2. Register application

3.Add Firebase SDK in your web application

4.create Firebase.js in src folder

5. Create image upload interface

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;

Source code

Upload Image