From 2641012e8defce787959a3b723b1e560f895bc4b Mon Sep 17 00:00:00 2001
From: Gagan Singh <gagan.singh@faculty.ai>
Date: Tue, 26 Nov 2024 09:10:25 +0000
Subject: [PATCH 1/5] CHanges for the File Upload UI

---
 .../src/components/fileUploader.module.css    | 90 +++++++++++++++++++
 frontend/src/components/fileUploader.tsx      | 59 ++++++++++++
 frontend/src/components/input.module.css      | 52 ++---------
 frontend/src/components/input.tsx             | 73 +++++++++++----
 .../components/uploadedFileDisplay.module.css | 30 +++++++
 .../src/components/uploadedFileDisplay.tsx    | 16 ++++
 6 files changed, 258 insertions(+), 62 deletions(-)
 create mode 100644 frontend/src/components/fileUploader.module.css
 create mode 100644 frontend/src/components/fileUploader.tsx
 create mode 100644 frontend/src/components/uploadedFileDisplay.module.css
 create mode 100644 frontend/src/components/uploadedFileDisplay.tsx

diff --git a/frontend/src/components/fileUploader.module.css b/frontend/src/components/fileUploader.module.css
new file mode 100644
index 00000000..9c42b1fb
--- /dev/null
+++ b/frontend/src/components/fileUploader.module.css
@@ -0,0 +1,90 @@
+.uploadButton_container {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  background-color: transparent;
+  border-radius: 50%;
+  height: 36px;
+  width: 36px;
+  margin-right: 16px;
+  margin-left: 10px;
+  margin-top: 5px;
+}
+
+.uploadButton {
+  background: transparent;
+  border: none;
+  height: 36px;
+  width: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.uploadButton img {
+  width: 24px;
+  height: 24px;
+}
+
+.uploadButton:not(:disabled):hover {
+  cursor: pointer;
+}
+
+.uploadButton:active {
+  background-color: var(--grey-400);
+}
+
+.uploadButton_container:has(.uploadButton:disabled) {
+  color: var(--grey-900);
+  opacity: 0.5;
+}
+
+.uploadButton_container:has(.uploadButton:not(:disabled)):hover {
+  background-color: var(--grey-300);
+}
+
+.sendButtonContainer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  height: 100%;
+}
+
+.tooltip {
+  position: absolute;
+  bottom: 130%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 336px;
+  background-color: #333333;
+  color: #f2f2f2;
+  padding: 8px;
+  border-radius: 8px;
+  font-family: "Roboto", sans-serif;
+  font-size: 14px;
+  line-height: 16px;
+  text-align: left;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+}
+
+.tooltip p {
+  margin: 0 0 8px 0;
+}
+
+.tooltip p:last-child {
+  margin-bottom: 0;
+}
+
+.tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 8px;
+  border-style: solid;
+  border-color: #333333 transparent transparent transparent;
+}
\ No newline at end of file
diff --git a/frontend/src/components/fileUploader.tsx b/frontend/src/components/fileUploader.tsx
new file mode 100644
index 00000000..f0546446
--- /dev/null
+++ b/frontend/src/components/fileUploader.tsx
@@ -0,0 +1,59 @@
+import React, { ChangeEvent, useState } from 'react';
+import styles from './fileUploader.module.css';
+import UploadIcon from '../icons/upload.svg';
+import UploadInProgressIcon from '../icons/upload-in-progress.svg';
+import CheckCircleIcon from '../icons/check-circle.svg';
+
+interface FileUploaderProps {
+  onFileUpload: (file: File) => Promise<void>;
+  isUploading: boolean;
+  isUploaded: boolean;
+  disabled: boolean;
+}
+
+export const FileUploader = ({ onFileUpload, isUploading, isUploaded, disabled }: FileUploaderProps) => {
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
+
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      onFileUpload(file);
+    }
+  };
+
+  const tooltipContent = disabled
+    ? (
+      <>
+        <p>You already uploaded one file.</p>
+        <p>You can upload a different file by starting a new chat.</p>
+        <p>Starting a new chat will reset your existing conversation history.</p>
+      </>
+    )
+    : <p>You can only upload one .csv, .pdf or .txt file to this chat.</p>;
+
+  return (
+    <div
+      className={styles.uploadButton_container}
+      onMouseEnter={() => setShowTooltip(true)}
+      onMouseLeave={() => setShowTooltip(false)}
+    >
+      <label className={styles.uploadButton}>
+        {isUploading ? (
+          <img src={UploadInProgressIcon} alt="Uploading..."/>
+        ) : isUploaded ? (
+          <img src={CheckCircleIcon} alt="Upload Complete"/>
+        ) : (
+          <img src={UploadIcon} alt="Upload"/>
+        )}
+        <input
+          type="file"
+          accept=".csv, .pdf, .txt"
+          onChange={handleFileChange}
+          style={{ display: 'none' }}
+          disabled={disabled}
+        />
+      </label>
+      {showTooltip && <div className={styles.tooltip}>{tooltipContent}</div>}
+    </div>
+  );
+};
diff --git a/frontend/src/components/input.module.css b/frontend/src/components/input.module.css
index bca3bd42..3e2b0f9b 100644
--- a/frontend/src/components/input.module.css
+++ b/frontend/src/components/input.module.css
@@ -77,52 +77,7 @@ textarea::placeholder {
   font-family: 'Roboto', sans-serif;
 }
 
-.uploadButton_container {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  background-color: transparent;
-  border-radius: 50%;
-  height: 36px;
-  width: 36px;
-  margin-right: 16px;
-  margin-left: 10px;
-  margin-top: 5px;
-}
-
-.uploadButton {
-  background: transparent;
-  color: var(--grey-900);
-  border: none;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-}
 
-.uploadButton img {
-  width: 24px;
-  height: 24px;
-}
-
-.uploadButton:not(:disabled):hover {
-  cursor: pointer;
-}
-
-.uploadButton:active {
-  background-color: var(--grey-400);
-}
-
-.uploadButton_container:has(.uploadButton:disabled) {
-  color: var(--grey-900);
-  opacity: 0.5;
-}
-
-.uploadButton_container:has(.uploadButton:not(:disabled)):hover {
-  background-color: var(--grey-300);
-}
 
 .sendButtonContainer {
   display: flex;
@@ -130,3 +85,10 @@ textarea::placeholder {
   justify-content: center;
   height: 100%;
 }
+
+.inputRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
diff --git a/frontend/src/components/input.tsx b/frontend/src/components/input.tsx
index 9e657c2b..b9c52b9b 100644
--- a/frontend/src/components/input.tsx
+++ b/frontend/src/components/input.tsx
@@ -8,7 +8,8 @@ import React, {
 } from 'react';
 import styles from './input.module.css';
 import RightArrowIcon from '../icons/send.svg';
-import UploadIcon from '../icons/upload.svg';
+import { FileUploader } from './fileUploader';
+import { UploadedFileDisplay } from './uploadedFileDisplay';
 import { Suggestions } from './suggestions';
 import { Button } from './button';
 
@@ -20,6 +21,10 @@ export interface InputProps {
 
 export const Input = ({ sendMessage, waiting, suggestions }: InputProps) => {
   const [userInput, setUserInput] = useState<string>('');
+  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+  const [isUploaded, setIsUploaded] = useState<boolean>(false);
+  const [fileId, setFileId] = useState<string>('');
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const onChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>) => {
@@ -52,27 +57,61 @@ export const Input = ({ sendMessage, waiting, suggestions }: InputProps) => {
     [sendMessage, userInput, waiting],
   );
 
+  const uploadFile = async (file: File) => {
+    setIsUploading(true);
+    setIsUploaded(false);
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      const response = await fetch(`${process.env.BACKEND_URL}/uploadfile`, {
+        method: 'POST',
+        body: formData,
+        credentials: 'include',
+      });
+      if (!response.ok) throw new Error(`Upload failed with status ${response.status}`);
+      
+      const { filename, id } = await response.json();
+      console.log(`File uploaded successfully: ${filename} with id ${id}`);
+      setFileId(id);
+      setUploadedFile(file);
+      setIsUploading(false);
+      setIsUploaded(true);
+    } catch (error) {
+      setIsUploading(false);
+      console.error(error);
+    }
+  };
+
+  
   return (
     <>
+      {uploadedFile && <UploadedFileDisplay fileName={uploadedFile.name} />}
       <form onSubmit={onSend} className={styles.inputContainer}>
-        <div className={styles.parentDiv}>
-          <textarea
-            className={styles.textarea}
-            ref={textareaRef}
-            placeholder="Send a Message..."
-            value={userInput}
-            onChange={onChange}
-            rows={1}
-          />
-          <div className={styles.uploadButton_container}>
-            <button className={styles.uploadButton} disabled>
-              <img src={UploadIcon} />
-            </button>
+        
+        <div className={styles.inputRow}>
+          <div className={styles.parentDiv}>
+            <textarea
+              className={styles.textarea}
+              ref={textareaRef}
+              placeholder="Send a Message..."
+              value={userInput}
+              onChange={onChange}
+              rows={1}
+            />
+
+            <FileUploader
+              onFileUpload={uploadFile}
+              isUploading={isUploading}
+              isUploaded={isUploaded}
+              disabled={!!uploadedFile}
+            />
+             
+          </div> 
+          <div className={styles.sendButtonContainer}>
+            <Button icon={RightArrowIcon} disabled={waiting} />
           </div>
         </div>
-        <div className={styles.sendButtonContainer}>
-          <Button icon={RightArrowIcon} disabled={waiting} />
-        </div>
       </form>
       <Suggestions loadPrompt={setUserInput} suggestions={suggestions} />
     </>
diff --git a/frontend/src/components/uploadedFileDisplay.module.css b/frontend/src/components/uploadedFileDisplay.module.css
new file mode 100644
index 00000000..75f47460
--- /dev/null
+++ b/frontend/src/components/uploadedFileDisplay.module.css
@@ -0,0 +1,30 @@
+.uploadedFileContainer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 36px;
+  width: 50%;
+  margin-bottom: 4px;
+  box-sizing: border-box;
+}
+
+.uploadedFile {
+  font-size: 14px;
+  color: var(--grey-900);
+  background-color: var(--grey-100);
+  padding: 8px 12px;
+  border-radius: 8px;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 65px;
+  border: 1px solid var(--grey-300)
+}
+
+.attachmentIcon {
+  width: 16px; 
+  height: 16px;
+  margin-right: 8px; 
+  margin-bottom: -3px;
+}
diff --git a/frontend/src/components/uploadedFileDisplay.tsx b/frontend/src/components/uploadedFileDisplay.tsx
new file mode 100644
index 00000000..31db3940
--- /dev/null
+++ b/frontend/src/components/uploadedFileDisplay.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './uploadedFileDisplay.module.css';
+import AttachmentIcon from '../icons/attachment.svg';
+
+interface UploadedFileDisplayProps {
+  fileName: string;
+}
+
+export const UploadedFileDisplay = ({ fileName }: UploadedFileDisplayProps) => (
+  <div className={styles.uploadedFileContainer}>
+    <span className={styles.uploadedFile}>
+      <img src={AttachmentIcon} alt="Attachment" className={styles.attachmentIcon} />
+      {fileName}
+    </span>
+  </div>
+);

From edb49fce9466c891ce88c5df52188e34622a7aaa Mon Sep 17 00:00:00 2001
From: Gagan Singh <gagan.singh@faculty.ai>
Date: Tue, 26 Nov 2024 09:48:01 +0000
Subject: [PATCH 2/5] Commenting out fileId as it needs to be used later.

---
 frontend/src/components/input.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/input.tsx b/frontend/src/components/input.tsx
index b9c52b9b..86bf0307 100644
--- a/frontend/src/components/input.tsx
+++ b/frontend/src/components/input.tsx
@@ -24,7 +24,8 @@ export const Input = ({ sendMessage, waiting, suggestions }: InputProps) => {
   const [uploadedFile, setUploadedFile] = useState<File | null>(null);
   const [isUploading, setIsUploading] = useState<boolean>(false);
   const [isUploaded, setIsUploaded] = useState<boolean>(false);
-  const [fileId, setFileId] = useState<string>('');
+  // TODO: Add fileId to the state
+  // const [fileId, setFileId] = useState<string>('');
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const onChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>) => {
@@ -73,7 +74,8 @@ export const Input = ({ sendMessage, waiting, suggestions }: InputProps) => {
       
       const { filename, id } = await response.json();
       console.log(`File uploaded successfully: ${filename} with id ${id}`);
-      setFileId(id);
+      // TODO: Set fileId in the state
+      // setFileId(id);
       setUploadedFile(file);
       setIsUploading(false);
       setIsUploaded(true);

From e9304d6fb71e649b1576b632fd3f21f344199660 Mon Sep 17 00:00:00 2001
From: Gagan Singh <gagan.singh@faculty.ai>
Date: Tue, 26 Nov 2024 09:54:08 +0000
Subject: [PATCH 3/5] Adjustung CSS based on the Diana's UI changes

---
 frontend/src/components/fileUploader.module.css        | 2 +-
 frontend/src/components/uploadedFileDisplay.module.css | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/components/fileUploader.module.css b/frontend/src/components/fileUploader.module.css
index 9c42b1fb..4fc146c1 100644
--- a/frontend/src/components/fileUploader.module.css
+++ b/frontend/src/components/fileUploader.module.css
@@ -57,7 +57,7 @@
   bottom: 130%;
   left: 50%;
   transform: translateX(-50%);
-  width: 336px;
+  width: 220px;
   background-color: #333333;
   color: #f2f2f2;
   padding: 8px;
diff --git a/frontend/src/components/uploadedFileDisplay.module.css b/frontend/src/components/uploadedFileDisplay.module.css
index 75f47460..c2e0eca3 100644
--- a/frontend/src/components/uploadedFileDisplay.module.css
+++ b/frontend/src/components/uploadedFileDisplay.module.css
@@ -3,7 +3,6 @@
   justify-content: flex-end;
   align-items: center;
   height: 36px;
-  width: 50%;
   margin-bottom: 4px;
   box-sizing: border-box;
 }

From 6b0a9befc4cc73898f03e93434746d6fc7a19320 Mon Sep 17 00:00:00 2001
From: Gagan Singh <gagan.singh@faculty.ai>
Date: Tue, 26 Nov 2024 10:05:22 +0000
Subject: [PATCH 4/5] Fixing linting errors

---
 .../src/components/fileUploader.module.css    |  6 ++--
 frontend/src/components/fileUploader.tsx      | 31 +++++++++++--------
 frontend/src/components/input.module.css      |  2 --
 frontend/src/components/input.tsx             | 10 +++---
 .../components/uploadedFileDisplay.module.css |  6 ++--
 .../src/components/uploadedFileDisplay.tsx    |  6 +++-
 6 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/fileUploader.module.css b/frontend/src/components/fileUploader.module.css
index 4fc146c1..7aef28a9 100644
--- a/frontend/src/components/fileUploader.module.css
+++ b/frontend/src/components/fileUploader.module.css
@@ -62,7 +62,7 @@
   color: #f2f2f2;
   padding: 8px;
   border-radius: 8px;
-  font-family: "Roboto", sans-serif;
+  font-family: 'Roboto', sans-serif;
   font-size: 14px;
   line-height: 16px;
   text-align: left;
@@ -79,7 +79,7 @@
 }
 
 .tooltip::after {
-  content: "";
+  content: '';
   position: absolute;
   top: 100%;
   left: 50%;
@@ -87,4 +87,4 @@
   border-width: 8px;
   border-style: solid;
   border-color: #333333 transparent transparent transparent;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/fileUploader.tsx b/frontend/src/components/fileUploader.tsx
index f0546446..41936c5a 100644
--- a/frontend/src/components/fileUploader.tsx
+++ b/frontend/src/components/fileUploader.tsx
@@ -11,7 +11,12 @@ interface FileUploaderProps {
   disabled: boolean;
 }
 
-export const FileUploader = ({ onFileUpload, isUploading, isUploaded, disabled }: FileUploaderProps) => {
+export const FileUploader = ({
+  onFileUpload,
+  isUploading,
+  isUploaded,
+  disabled,
+}: FileUploaderProps) => {
   const [showTooltip, setShowTooltip] = useState<boolean>(false);
 
   const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -21,15 +26,15 @@ export const FileUploader = ({ onFileUpload, isUploading, isUploaded, disabled }
     }
   };
 
-  const tooltipContent = disabled
-    ? (
-      <>
-        <p>You already uploaded one file.</p>
-        <p>You can upload a different file by starting a new chat.</p>
-        <p>Starting a new chat will reset your existing conversation history.</p>
-      </>
-    )
-    : <p>You can only upload one .csv, .pdf or .txt file to this chat.</p>;
+  const tooltipContent = disabled ? (
+    <>
+      <p>You already uploaded one file.</p>
+      <p>You can upload a different file by starting a new chat.</p>
+      <p>Starting a new chat will reset your existing conversation history.</p>
+    </>
+  ) : (
+    <p>You can only upload one .csv, .pdf or .txt file to this chat.</p>
+  );
 
   return (
     <div
@@ -39,11 +44,11 @@ export const FileUploader = ({ onFileUpload, isUploading, isUploaded, disabled }
     >
       <label className={styles.uploadButton}>
         {isUploading ? (
-          <img src={UploadInProgressIcon} alt="Uploading..."/>
+          <img src={UploadInProgressIcon} alt="Uploading..." />
         ) : isUploaded ? (
-          <img src={CheckCircleIcon} alt="Upload Complete"/>
+          <img src={CheckCircleIcon} alt="Upload Complete" />
         ) : (
-          <img src={UploadIcon} alt="Upload"/>
+          <img src={UploadIcon} alt="Upload" />
         )}
         <input
           type="file"
diff --git a/frontend/src/components/input.module.css b/frontend/src/components/input.module.css
index bacc3fe5..462604aa 100644
--- a/frontend/src/components/input.module.css
+++ b/frontend/src/components/input.module.css
@@ -76,8 +76,6 @@ textarea::placeholder {
   font-family: 'Roboto', sans-serif;
 }
 
-
-
 .sendButtonContainer {
   display: flex;
   align-items: flex-start;
diff --git a/frontend/src/components/input.tsx b/frontend/src/components/input.tsx
index 86bf0307..acc2ef8e 100644
--- a/frontend/src/components/input.tsx
+++ b/frontend/src/components/input.tsx
@@ -70,8 +70,9 @@ export const Input = ({ sendMessage, waiting, suggestions }: InputProps) => {
         body: formData,
         credentials: 'include',
       });
-      if (!response.ok) throw new Error(`Upload failed with status ${response.status}`);
-      
+      if (!response.ok)
+        throw new Error(`Upload failed with status ${response.status}`);
+
       const { filename, id } = await response.json();
       console.log(`File uploaded successfully: ${filename} with id ${id}`);
       // TODO: Set fileId in the state
@@ -85,12 +86,10 @@ export const Input = ({ sendMessage, waiting, suggestions }: InputProps) => {
     }
   };
 
-  
   return (
     <>
       {uploadedFile && <UploadedFileDisplay fileName={uploadedFile.name} />}
       <form onSubmit={onSend} className={styles.inputContainer}>
-        
         <div className={styles.inputRow}>
           <div className={styles.parentDiv}>
             <textarea
@@ -108,8 +107,7 @@ export const Input = ({ sendMessage, waiting, suggestions }: InputProps) => {
               isUploaded={isUploaded}
               disabled={!!uploadedFile}
             />
-             
-          </div> 
+          </div>
           <div className={styles.sendButtonContainer}>
             <Button icon={RightArrowIcon} disabled={waiting} />
           </div>
diff --git a/frontend/src/components/uploadedFileDisplay.module.css b/frontend/src/components/uploadedFileDisplay.module.css
index c2e0eca3..d11c9d23 100644
--- a/frontend/src/components/uploadedFileDisplay.module.css
+++ b/frontend/src/components/uploadedFileDisplay.module.css
@@ -18,12 +18,12 @@
   overflow: hidden;
   text-overflow: ellipsis;
   margin-right: 65px;
-  border: 1px solid var(--grey-300)
+  border: 1px solid var(--grey-300);
 }
 
 .attachmentIcon {
-  width: 16px; 
+  width: 16px;
   height: 16px;
-  margin-right: 8px; 
+  margin-right: 8px;
   margin-bottom: -3px;
 }
diff --git a/frontend/src/components/uploadedFileDisplay.tsx b/frontend/src/components/uploadedFileDisplay.tsx
index 31db3940..f726dab5 100644
--- a/frontend/src/components/uploadedFileDisplay.tsx
+++ b/frontend/src/components/uploadedFileDisplay.tsx
@@ -9,7 +9,11 @@ interface UploadedFileDisplayProps {
 export const UploadedFileDisplay = ({ fileName }: UploadedFileDisplayProps) => (
   <div className={styles.uploadedFileContainer}>
     <span className={styles.uploadedFile}>
-      <img src={AttachmentIcon} alt="Attachment" className={styles.attachmentIcon} />
+      <img
+        src={AttachmentIcon}
+        alt="Attachment"
+        className={styles.attachmentIcon}
+      />
       {fileName}
     </span>
   </div>

From c356f8cd623c98c920d8c84d82beef8ac8f0ba77 Mon Sep 17 00:00:00 2001
From: Gagan Singh <gagan.singh@faculty.ai>
Date: Tue, 26 Nov 2024 17:02:51 +0000
Subject: [PATCH 5/5] Changes based on the review comments of Mike, Diana and
 Ivan

---
 ...oader.module.css => fileUpload.module.css} |  1 +
 .../{fileUploader.tsx => fileUpload.tsx}      | 14 ++++----
 frontend/src/components/input.module.css      |  1 -
 frontend/src/components/input.tsx             | 36 +++++--------------
 .../components/uploadedFileDisplay.module.css |  3 +-
 frontend/src/server.ts                        | 21 +++++++++++
 6 files changed, 38 insertions(+), 38 deletions(-)
 rename frontend/src/components/{fileUploader.module.css => fileUpload.module.css} (98%)
 rename frontend/src/components/{fileUploader.tsx => fileUpload.tsx} (88%)

diff --git a/frontend/src/components/fileUploader.module.css b/frontend/src/components/fileUpload.module.css
similarity index 98%
rename from frontend/src/components/fileUploader.module.css
rename to frontend/src/components/fileUpload.module.css
index 7aef28a9..ea0be203 100644
--- a/frontend/src/components/fileUploader.module.css
+++ b/frontend/src/components/fileUpload.module.css
@@ -34,6 +34,7 @@
 
 .uploadButton:active {
   background-color: var(--grey-400);
+  border-radius: 50%;
 }
 
 .uploadButton_container:has(.uploadButton:disabled) {
diff --git a/frontend/src/components/fileUploader.tsx b/frontend/src/components/fileUpload.tsx
similarity index 88%
rename from frontend/src/components/fileUploader.tsx
rename to frontend/src/components/fileUpload.tsx
index 41936c5a..1c3e716f 100644
--- a/frontend/src/components/fileUploader.tsx
+++ b/frontend/src/components/fileUpload.tsx
@@ -1,20 +1,18 @@
 import React, { ChangeEvent, useState } from 'react';
-import styles from './fileUploader.module.css';
+import styles from './fileUpload.module.css';
 import UploadIcon from '../icons/upload.svg';
 import UploadInProgressIcon from '../icons/upload-in-progress.svg';
 import CheckCircleIcon from '../icons/check-circle.svg';
 
 interface FileUploaderProps {
   onFileUpload: (file: File) => Promise<void>;
-  isUploading: boolean;
-  isUploaded: boolean;
+  uploadInProgress: boolean;
   disabled: boolean;
 }
 
-export const FileUploader = ({
+export const FileUpload = ({
   onFileUpload,
-  isUploading,
-  isUploaded,
+  uploadInProgress,
   disabled,
 }: FileUploaderProps) => {
   const [showTooltip, setShowTooltip] = useState<boolean>(false);
@@ -43,9 +41,9 @@ export const FileUploader = ({
       onMouseLeave={() => setShowTooltip(false)}
     >
       <label className={styles.uploadButton}>
-        {isUploading ? (
+        {uploadInProgress ? (
           <img src={UploadInProgressIcon} alt="Uploading..." />
-        ) : isUploaded ? (
+        ) : disabled ? (
           <img src={CheckCircleIcon} alt="Upload Complete" />
         ) : (
           <img src={UploadIcon} alt="Upload" />
diff --git a/frontend/src/components/input.module.css b/frontend/src/components/input.module.css
index 462604aa..c05d0826 100644
--- a/frontend/src/components/input.module.css
+++ b/frontend/src/components/input.module.css
@@ -1,7 +1,6 @@
 .inputContainer {
   box-sizing: border-box;
   display: flex;
-  margin: 1rem 0 0 0;
   position: relative;
   width: 100%;
 }
diff --git a/frontend/src/components/input.tsx b/frontend/src/components/input.tsx
index acc2ef8e..431ec6cf 100644
--- a/frontend/src/components/input.tsx
+++ b/frontend/src/components/input.tsx
@@ -8,10 +8,11 @@ import React, {
 } from 'react';
 import styles from './input.module.css';
 import RightArrowIcon from '../icons/send.svg';
-import { FileUploader } from './fileUploader';
+import { FileUpload } from './fileUpload';
 import { UploadedFileDisplay } from './uploadedFileDisplay';
 import { Suggestions } from './suggestions';
 import { Button } from './button';
+import { uploadFileToServer } from '../server';
 
 export interface InputProps {
   sendMessage: (message: string) => void;
@@ -22,10 +23,7 @@ export interface InputProps {
 export const Input = ({ sendMessage, waiting, suggestions }: InputProps) => {
   const [userInput, setUserInput] = useState<string>('');
   const [uploadedFile, setUploadedFile] = useState<File | null>(null);
-  const [isUploading, setIsUploading] = useState<boolean>(false);
-  const [isUploaded, setIsUploaded] = useState<boolean>(false);
-  // TODO: Add fileId to the state
-  // const [fileId, setFileId] = useState<string>('');
+  const [uploadInProgress, setUploadInProgress] = useState<boolean>(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const onChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>) => {
@@ -59,30 +57,16 @@ export const Input = ({ sendMessage, waiting, suggestions }: InputProps) => {
   );
 
   const uploadFile = async (file: File) => {
-    setIsUploading(true);
-    setIsUploaded(false);
+    setUploadInProgress(true);
 
     try {
-      const formData = new FormData();
-      formData.append('file', file);
-      const response = await fetch(`${process.env.BACKEND_URL}/uploadfile`, {
-        method: 'POST',
-        body: formData,
-        credentials: 'include',
-      });
-      if (!response.ok)
-        throw new Error(`Upload failed with status ${response.status}`);
-
-      const { filename, id } = await response.json();
+      const { filename, id } = await uploadFileToServer(file);
       console.log(`File uploaded successfully: ${filename} with id ${id}`);
-      // TODO: Set fileId in the state
-      // setFileId(id);
       setUploadedFile(file);
-      setIsUploading(false);
-      setIsUploaded(true);
     } catch (error) {
-      setIsUploading(false);
       console.error(error);
+    } finally {
+      setUploadInProgress(false);
     }
   };
 
@@ -100,11 +84,9 @@ export const Input = ({ sendMessage, waiting, suggestions }: InputProps) => {
               onChange={onChange}
               rows={1}
             />
-
-            <FileUploader
+            <FileUpload
               onFileUpload={uploadFile}
-              isUploading={isUploading}
-              isUploaded={isUploaded}
+              uploadInProgress={uploadInProgress}
               disabled={!!uploadedFile}
             />
           </div>
diff --git a/frontend/src/components/uploadedFileDisplay.module.css b/frontend/src/components/uploadedFileDisplay.module.css
index d11c9d23..44b19386 100644
--- a/frontend/src/components/uploadedFileDisplay.module.css
+++ b/frontend/src/components/uploadedFileDisplay.module.css
@@ -10,7 +10,7 @@
 .uploadedFile {
   font-size: 14px;
   color: var(--grey-900);
-  background-color: var(--grey-100);
+  background-color: var(--grey-200);
   padding: 8px 12px;
   border-radius: 8px;
   text-align: left;
@@ -18,7 +18,6 @@
   overflow: hidden;
   text-overflow: ellipsis;
   margin-right: 65px;
-  border: 1px solid var(--grey-300);
 }
 
 .attachmentIcon {
diff --git a/frontend/src/server.ts b/frontend/src/server.ts
index 1189b180..5f0cb712 100644
--- a/frontend/src/server.ts
+++ b/frontend/src/server.ts
@@ -76,3 +76,24 @@ export const resetChat = async (): Promise<Response> => {
     method: 'DELETE',
   });
 };
+
+export const uploadFileToServer = async (file: File): Promise<{ filename: string; id: string }> => {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  return await fetch(`${process.env.BACKEND_URL}/uploadfile`, {
+    method: 'POST',
+    body: formData,
+    credentials: 'include',
+  })
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`Upload failed with status : ${response.status}`);
+      }
+      return response.json();
+    })
+    .catch((error) => {
+      console.error('Error uploading file:', error);
+      throw error;
+    });
+};