feat: improve file uploader size validation - custom hook (langflow-a…

…i#3952)

* 📝 (inputFileComponent/index.tsx): add useFileSizeValidator hook to validate file size before upload to improve code readability and maintainability

* 📝 (chatInput/index.tsx): remove unused imports and refactor file size validation to use a custom hook for better code organization and readability

* 📝 (FileInput/index.tsx): refactor file input component to use a custom hook for file size validation instead of utility store
🔧 (FileInput/index.tsx): remove dependency on utility store for max file size upload and use a custom hook for file size validation instead

* ✨ (use-file-size-validator.tsx): introduce a new custom hook useFileSizeValidator to validate file size before uploading it

src/frontend/src/components/inputFileComponent/index.tsx

@@ -1,5 +1,6 @@
 import { usePostUploadFile } from "@/controllers/API/queries/files/use-post-upload-file";
 import { createFileUpload } from "@/helpers/create-file-upload";
+import useFileSizeValidator from "@/shared/hooks/use-file-size-validator";
 import { useUtilityStore } from "@/stores/utilityStore";
 import { useEffect } from "react";
 import {
@@ -23,7 +24,8 @@ export default function InputFileComponent({
 }: FileComponentType): JSX.Element {
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const setErrorData = useAlertStore((state) => state.setErrorData);
-  const maxFileSizeUpload = useUtilityStore((state) => state.maxFileSizeUpload);
+  const { validateFileSize } = useFileSizeValidator(setErrorData);
+
   // Clear component state
   useEffect(() => {
     if (disabled && value !== "") {
@@ -47,13 +49,11 @@ export default function InputFileComponent({
     createFileUpload({ multiple: false, accept: fileTypes?.join(",") }).then(
       (files) => {
         const file = files[0];
-        if (file.size > maxFileSizeUpload) {
-          setErrorData({
-            title: INVALID_FILE_SIZE_ALERT(maxFileSizeUpload / 1024 / 1024),
-          });
-          return;
-        }
         if (file) {
+          if (!validateFileSize(file)) {
+            return;
+          }
+
           if (checkFileType(file.name)) {
             // Upload the file
             mutate(

src/frontend/src/modals/IOModal/components/IOFieldView/components/FileInput/index.tsx

@@ -1,10 +1,9 @@
 import { Button } from "../../../../../../components/ui/button";
 
-import { INVALID_FILE_SIZE_ALERT } from "@/constants/alerts_constants";
 import { usePostUploadFile } from "@/controllers/API/queries/files/use-post-upload-file";
 import { createFileUpload } from "@/helpers/create-file-upload";
+import useFileSizeValidator from "@/shared/hooks/use-file-size-validator";
 import useAlertStore from "@/stores/alertStore";
-import { useUtilityStore } from "@/stores/utilityStore";
 import { useEffect, useState } from "react";
 import IconComponent from "../../../../../../components/genericIconComponent";
 import {
@@ -22,7 +21,7 @@ export default function IOFileInput({ field, updateValue }: IOFileInputProps) {
   const [filePath, setFilePath] = useState("");
   const [image, setImage] = useState<string | null>(null);
   const setErrorData = useAlertStore((state) => state.setErrorData);
-  const maxFileSizeUpload = useUtilityStore((state) => state.maxFileSizeUpload);
+  const { validateFileSize } = useFileSizeValidator(setErrorData);
 
   useEffect(() => {
     if (filePath) {
@@ -79,13 +78,9 @@ export default function IOFileInput({ field, updateValue }: IOFileInputProps) {
 
   const upload = async (file) => {
     if (file) {
-      if (file.size > maxFileSizeUpload) {
-        setErrorData({
-          title: INVALID_FILE_SIZE_ALERT(maxFileSizeUpload / 1024 / 1024),
-        });
+      if (!validateFileSize(file)) {
         return;
       }
-
       // Check if a file was selected
       const fileReader = new FileReader();
       fileReader.onload = (event) => {

src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx

@@ -1,7 +1,6 @@
-import { INVALID_FILE_SIZE_ALERT } from "@/constants/alerts_constants";
 import { usePostUploadFile } from "@/controllers/API/queries/files/use-post-upload-file";
+import useFileSizeValidator from "@/shared/hooks/use-file-size-validator";
 import useAlertStore from "@/stores/alertStore";
-import { useUtilityStore } from "@/stores/utilityStore";
 import { useEffect, useRef, useState } from "react";
 import ShortUniqueId from "short-unique-id";
 import {
@@ -38,12 +37,12 @@ export default function ChatInput({
   const [inputFocus, setInputFocus] = useState<boolean>(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const setErrorData = useAlertStore((state) => state.setErrorData);
-  const maxFileSizeUpload = useUtilityStore((state) => state.maxFileSizeUpload);
+  const { validateFileSize } = useFileSizeValidator(setErrorData);
 
   useFocusOnUnlock(lockChat, inputRef);
   useAutoResizeTextArea(chatValue, inputRef);
 
-  const { mutate, isPending } = usePostUploadFile();
+  const { mutate } = usePostUploadFile();
 
   const handleFileChange = async (
     event: React.ChangeEvent<HTMLInputElement> | ClipboardEvent,
@@ -68,10 +67,7 @@ export default function ChatInput({
     if (file) {
       const fileExtension = file.name.split(".").pop()?.toLowerCase();
 
-      if (file.size > maxFileSizeUpload) {
-        setErrorData({
-          title: INVALID_FILE_SIZE_ALERT(maxFileSizeUpload / 1024 / 1024),
-        });
+      if (!validateFileSize(file)) {
         return;
       }
 

src/frontend/src/shared/hooks/use-file-size-validator.tsx

@@ -0,0 +1,22 @@
+import { INVALID_FILE_SIZE_ALERT } from "@/constants/alerts_constants";
+import { useUtilityStore } from "@/stores/utilityStore";
+
+const useFileSizeValidator = (
+  setErrorData: (newState: { title: string; list?: Array<string> }) => void,
+) => {
+  const maxFileSizeUpload = useUtilityStore((state) => state.maxFileSizeUpload);
+
+  const validateFileSize = (file) => {
+    if (file.size > maxFileSizeUpload) {
+      setErrorData({
+        title: INVALID_FILE_SIZE_ALERT(maxFileSizeUpload / 1024 / 1024),
+      });
+      return false;
+    }
+    return true;
+  };
+
+  return { validateFileSize };
+};
+
+export default useFileSizeValidator;