From 7aa3c930dad8c3bb37fb4deb3547592b303c5031 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Thu, 13 Jul 2023 14:09:03 +0100
Subject: [PATCH] restrict input to just csv file

---
 .../components/portfolio/UploadCsvModal.tsx   | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/app/components/portfolio/UploadCsvModal.tsx b/src/app/components/portfolio/UploadCsvModal.tsx
index cf5410ec..dc812e9f 100644
--- a/src/app/components/portfolio/UploadCsvModal.tsx
+++ b/src/app/components/portfolio/UploadCsvModal.tsx
@@ -90,18 +90,29 @@ export function InputFile({
   fundingScheme: string;
   goalValue: string;
 }) {
+  function handleOnChange(e: React.ChangeEvent<HTMLInputElement>) {
+    if (e.target.files) {
+      // Check if files is not null
+      const file = e.target.files[0];
+      if (file.type !== "text/csv") {
+        // Show an error message
+        console.error("File is not a CSV");
+        return;
+      }
+      setCsvFile(file); // Assuming you have a state to keep the file
+      handleButtonDisabled(selectedGoal, fundingScheme, goalValue, file);
+    }
+  }
+
   return (
     <div className="grid w-full max-w-sm items-center gap-1.5 text-sm font-semibold text-gray-600">
       <Label htmlFor="csv-uploader">Upload your csv</Label>
       <Input
         id="csv-uploader"
         type="file"
+        accept=".csv, text/csv"
         className="cursor-pointer"
-        onChange={(event) => {
-          const file = event.target.files[0];
-          setCsvFile(file); // Assuming you have a state to keep the file
-          handleButtonDisabled(selectedGoal, fundingScheme, goalValue, file);
-        }}
+        onChange={handleOnChange}
       />
     </div>
   );