progress bar added, .gitignore added

.gitignore

@@ -22,3 +22,10 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# MacOS files
+.DS_Store
+**.DS_Store
+
+# Engage data files
+data

src/components/FileUploader.tsx

+// 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>

src/upload.css

-/*# sourceMappingURL=upload.css.map */
+.upload-bar {
\ No newline at end of file
+  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

src/upload.css.map

-{"version":3,"sources":[],"names":[],"mappings":"","file":"upload.css"}
+{"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

src/upload.scss

+$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