Upload percentage in progress bar

nooobcoder · nooobcoder · commit 29cd56653645 · 2022-06-08T07:09:25.000Z
diff --git a/firebase-storage-react/src/App.css b/firebase-storage-react/src/App.css
@@ -17,6 +17,14 @@
 	width: 100%;
 }
 
+.app__progress {
+	width: 100%;
+	height: 10px;
+	background-color: #4caf50;
+	position: relative;
+	margin-top: 10px;
+}
+
 .app {
 	height: 100vh;
 	display: flex;
diff --git a/firebase-storage-react/src/App.js b/firebase-storage-react/src/App.js
@@ -1,32 +1,75 @@
-import { getDownloadURL, ref, uploadBytes } from 'firebase/storage';
-import './App.css';
-import { storage } from './firebase';
+import {
+	getDownloadURL,
+	ref,
+	uploadBytes,
+	uploadBytesResumable,
+} from "firebase/storage";
+import { useState } from "react";
 
+import "./App.css";
+import { storage } from "./firebase";
 
 export default function App() {
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    const file = e.target[0]?.files[0];
-    if (!file) return null;
+	const [progressPercent, setProgressPercent] = useState(0);
 
-    const storageRef = ref(storage, `files/${file.name}`);
-    const snapshot = await uploadBytes(storageRef, file);
-    // console.log(snapshot);
-    if (snapshot) {
-      e.target[0].value = null;
-      const url = await getDownloadURL(storageRef)
-      console.log(url);
-    }
-  }
+	const handleSubmit = async (e) => {
+		e.preventDefault();
+		const file = e.target[0]?.files[0];
+		console.log(`Handle Submit`, e.target[0].files);
+		if (!file) return null;
 
-  return (
-    <div className='App'>
-      <div className="app" name="upload_file">
-        <form className='app__form' onSubmit={handleSubmit}>
-          <input type="file" />
-          <button type="submit" className="button" onClick={e => e.preventDefault()}>Upload</button>
-        </form>
-      </div>
-    </div >
-  );
+		const storageRef = ref(storage, `files/${file.name}`);
+		// const snapshot = await uploadBytes(storageRef, file);
+
+		// console.log(snapshot);
+		// if (snapshot) {
+		// 	e.target[0].value = null;
+		// 	const url = await getDownloadURL(storageRef);
+		// 	console.log(url);
+		// }
+
+		const uploadTask = uploadBytesResumable(storageRef, file);
+		uploadTask.on(
+			"state_changed",
+			(snapshot) => {
+				const progress = Math.round(
+					(snapshot.bytesTransferred / snapshot.totalBytes) * 100
+				);
+				setProgressPercent(progress);
+			},
+			(error) => {
+				switch (error.code) {
+					case `storage/cancelled`:
+						alert(`Upload cancelled`);
+						break;
+					default:
+						alert(error);
+				}
+			},
+			() => {
+				e.target[0].value = "";
+				getDownloadURL(storageRef).then((downloadURL) => {
+					console.log(downloadURL);
+				});
+			}
+		);
+	};
+
+	return (
+		<div className="App">
+			<div className="app" name="upload_file">
+				<form className="app__form" onSubmit={handleSubmit}>
+					<input type="file" />
+					<progress
+						className="app__progress"
+						value={progressPercent}
+						max="100"
+					/>
+					<button type="submit" className="button">
+						Upload
+					</button>
+				</form>
+			</div>
+		</div>
+	);
 }
diff --git a/firebase-storage-react/src/firebase.js b/firebase-storage-react/src/firebase.js
@@ -4,12 +4,12 @@ import { getStorage } from "firebase/storage";
 
 // Your web app's Firebase configuration
 const firebaseConfig = {
-  apiKey: "AIzaSyC5GB1ONo0cr4qAqZ9heNlaCLz6YWm2ZlM",
-  authDomain: "firestore-react-tut.firebaseapp.com",
-  projectId: "firestore-react-tut",
-  storageBucket: "firestore-react-tut.appspot.com",
-  messagingSenderId: "729522566387",
-  appId: "1:729522566387:web:c5c73bcddefcaab175b386",
+   apiKey: "AIzaSyB5DrC2FCtPhuFQ7kdxkt9TP0MBTq_Dwh0",
+  authDomain: "fir-storage-react-6fc1b.firebaseapp.com",
+  projectId: "fir-storage-react-6fc1b",
+  storageBucket: "fir-storage-react-6fc1b.appspot.com",
+  messagingSenderId: "348005102029",
+  appId: "1:348005102029:web:7fa794cdf3ab020b801484"
 };
 
 // Initialize Firebase
