diff --git a/.gitignore b/.gitignore
index a547bf36d8d11a4f89c59c144f24795749086dd1..0e5f3778f185056ccfe73c590dfbee9daa3aaef7 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 e01a90d84e4ebae8b40eb87e1784cf4f2c9aba28..bc4ced5a2ced7dfcb6c3bb0bf099b1b46e8de077 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 efd09627298d45f8ecf029dc5e28b90baa3b1d63..475d7a66cc3f7e98c444ac47d028cd5c5eba5421 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 83142d88ce005fa13043d92b6d5b0f17b64ac44a..39a855a99760393cd996f6c60852c62e1d45f61b 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 e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..c943a9c6b3b8324f5be991fd96334a22e576953f 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