From 85c4bf9b76d126af810e39f733af71e12e5bc168 Mon Sep 17 00:00:00 2001
From: joshrandall8478 <joshrandall8478@gmail.com>
Date: Sat, 25 Jan 2025 10:15:47 -0500
Subject: [PATCH] progress bar added, .gitignore added
---
.gitignore | 7 +++++++
src/components/FileUploader.tsx | 16 +++++++++++++++-
src/upload.css | 8 +++++++-
src/upload.css.map | 2 +-
src/upload.scss | 8 ++++++++
5 files changed, 38 insertions(+), 3 deletions(-)
diff --git a/.gitignore b/.gitignore
index a547bf3..0e5f377 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,10 @@ dist-ssr
*.njsproj
*.sln
*.sw?
+
+# MacOS files
+.DS_Store
+**.DS_Store
+
+# Engage data files
+data
diff --git a/src/components/FileUploader.tsx b/src/components/FileUploader.tsx
index e01a90d..bc4ced5 100644
--- a/src/components/FileUploader.tsx
+++ b/src/components/FileUploader.tsx
@@ -1,3 +1,5 @@
+// Started from this youtube tutorial: https://www.youtube.com/watch?v=pWd6Enu2Pjs
+
import { ChangeEvent, useState } from "react";
import axios from "axios";
@@ -6,7 +8,7 @@ type UploadStatus = 'idle' | 'uploading' | 'success' | 'error';
export default function FileUploader() {
const [file, setFile] = useState<File | null>(null) // pass state as File or null depending on result of file upload
const [status, setStatus] = useState<UploadStatus>('idle');
-
+ const [uploadProgress, setUploadProgress] = useState(0);
function handleFileChange(e: ChangeEvent<HTMLInputElement>) {
if(e.target.files){
setFile(e.target.files[0]); // take only the first file from input
@@ -25,6 +27,12 @@ export default function FileUploader() {
await axios.post("https://httpbin.org/post", formData, { headers: {
'Content-Type': 'multipart/form-data',
},
+ onUploadProgress: (progressEvent) => {
+ const progress = progressEvent.total ? /* "?" is there because its an "optional" */
+ Math.round((progressEvent.loaded * 100) / progressEvent.total)
+ : 0;
+ setUploadProgress(progress);
+ },
});
setStatus('success');
@@ -37,6 +45,12 @@ export default function FileUploader() {
<div>
<input type="file" onChange={handleFileChange} /> {/* Executes function handleFileChange once file is submitted */}
{file && status !== 'uploading' && <button onClick={handleFileUpload}>Upload</button>}
+ {status == 'uploading' && (
+ <div>
+ <p>Progress: {uploadProgress}%</p>
+ <div className="upload-bar" style={{width: `${uploadProgress}%`}}></div>
+ </div>
+ )}
{status == 'success' && <p>Success!</p>}
{status == 'error' && <p>Upload error, please try again</p>}
</div>
diff --git a/src/upload.css b/src/upload.css
index efd0962..475d7a6 100644
--- a/src/upload.css
+++ b/src/upload.css
@@ -1 +1,7 @@
-/*# sourceMappingURL=upload.css.map */
\ No newline at end of file
+.upload-bar {
+ border: 4px solid red;
+ background-color: red;
+ max-width: 95vw;
+ margin: 10px;
+ padding-top: 2px;
+}/*# sourceMappingURL=upload.css.map */
\ No newline at end of file
diff --git a/src/upload.css.map b/src/upload.css.map
index 83142d8..39a855a 100644
--- a/src/upload.css.map
+++ b/src/upload.css.map
@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"upload.css"}
\ No newline at end of file
+{"version":3,"sources":["upload.scss","upload.css"],"names":[],"mappings":"AACA;EACI,qBAAA;EACA,qBAHU;EAIV,eAAA;EACA,YAAA;EACA,gBAAA;ACAJ","file":"upload.css"}
\ No newline at end of file
diff --git a/src/upload.scss b/src/upload.scss
index e69de29..c943a9c 100644
--- a/src/upload.scss
+++ b/src/upload.scss
@@ -0,0 +1,8 @@
+$uploadColor: red;
+.upload-bar{
+ border: 4px solid $uploadColor;
+ background-color: $uploadColor;
+ max-width: 95vw;
+ margin: 10px;
+ padding-top: 2px;
+}
\ No newline at end of file
--
GitLab