From 5e28f2d00529d4d21e4c5f8b94d961145509b645 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Fri, 7 Jun 2024 19:15:39 -0300
Subject: [PATCH] Refactor: Block user from sending files that are not images
 extensions

---
 .../hooks/use-handle-file-change.tsx          | 17 ++++++++++++++
 .../chatView/chatInput/hooks/use-upload.tsx   | 23 +++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-handle-file-change.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-handle-file-change.tsx
index 748ca7fe5..6e16587f2 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-handle-file-change.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-handle-file-change.tsx
@@ -1,13 +1,30 @@
 import ShortUniqueId from "short-unique-id";
 import useFileUpload from "./use-file-upload";
+import useAlertStore from "../../../../../../stores/alertStore";
+
+const fsErrorText =
+  "Please ensure your file has one of the following extensions:";
+const snErrorTxt = "png, jpg, jpeg, gif, bmp, webp";
 
 export const useHandleFileChange = (setFiles, currentFlowId) => {
+  const setErrorData = useAlertStore((state) => state.setErrorData);
   const handleFileChange = async (
     event: React.ChangeEvent<HTMLInputElement>,
   ) => {
     const fileInput = event.target;
     const file = fileInput.files?.[0];
     if (file) {
+      const allowedExtensions = ["png", "jpg", "jpeg", "gif", "bmp", "webp"];
+      const fileExtension = file.name.split(".").pop()?.toLowerCase();
+
+      if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+        setErrorData({
+          title: "Error uploading file",
+          list: [fsErrorText, snErrorTxt],
+        });
+        return;
+      }
+
       const uid = new ShortUniqueId({ length: 10 }); // Increase the length to ensure uniqueness
       const id = uid();
       const type = file.type.split("/")[0];
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx
index 88e9b3509..f41cada11 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx
@@ -1,8 +1,14 @@
 import { useEffect } from "react";
 import ShortUniqueId from "short-unique-id";
 import useFileUpload from "./use-file-upload";
+import useAlertStore from "../../../../../../stores/alertStore";
+
+const fsErrorText =
+  "Please ensure your file has one of the following extensions:";
+const snErrorTxt = "png, jpg, jpeg, gif, bmp, webp";
 
 const useUpload = (uploadFile, currentFlowId, setFiles, lockChat) => {
+  const setErrorData = useAlertStore((state) => state.setErrorData);
   useEffect(() => {
     const handlePaste = (event: ClipboardEvent): void => {
       if (lockChat) {
@@ -15,6 +21,23 @@ const useUpload = (uploadFile, currentFlowId, setFiles, lockChat) => {
           const uid = new ShortUniqueId({ length: 3 });
           const blob = items[i].getAsFile();
           if (blob) {
+            const allowedExtensions = [
+              "png",
+              "jpg",
+              "jpeg",
+              "gif",
+              "bmp",
+              "webp",
+            ];
+            const fileExtension = blob.name.split(".").pop()?.toLowerCase();
+
+            if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+              setErrorData({
+                title: "Error uploading file",
+                list: [fsErrorText, snErrorTxt],
+              });
+              return;
+            }
             const id = uid();
             setFiles((prevFiles) => [
               ...prevFiles,