fix: limit file upload size to 10mb to prevent LF crashing due data r…

…ender component limitations (langflow-ai#3870)

* 🐛 (inputFileComponent/index.tsx): add check for file size before uploading to prevent uploading files larger than the maximum allowed size

* ✨ (alerts_constants.tsx): add new constant INVALID_FILE_SIZE_ALERT to display an alert message when the file size is too large

* ✨ (constants.ts): add constant maxSizeFilesInBytes to define the maximum file size allowed for upload in bytes

* 🐛 (inputFileComponent/index.tsx): update INVALID_FILE_SIZE_ALERT parameter from 9 to 10 to match the new file size limit
🐛 (constants/constants.ts): increase maxSizeFilesInBytes constant value from 9MB to 10MB to reflect the new file size limit

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

@@ -1,9 +1,11 @@
+import { maxSizeFilesInBytes } from "@/constants/constants";
 import { usePostUploadFile } from "@/controllers/API/queries/files/use-post-upload-file";
 import { createFileUpload } from "@/helpers/create-file-upload";
 import { useEffect } from "react";
 import {
   CONSOLE_ERROR_MSG,
   INVALID_FILE_ALERT,
+  INVALID_FILE_SIZE_ALERT,
 } from "../../constants/alerts_constants";
 import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
@@ -45,6 +47,12 @@ export default function InputFileComponent({
     createFileUpload({ multiple: false, accept: fileTypes?.join(",") }).then(
       (files) => {
         const file = files[0];
+        if (file.size > maxSizeFilesInBytes) {
+          setErrorData({
+            title: INVALID_FILE_SIZE_ALERT(10),
+          });
+          return;
+        }
         if (file) {
           if (checkFileType(file.name)) {
             // Upload the file

src/frontend/src/constants/alerts_constants.tsx

@@ -60,5 +60,6 @@ export const DEL_KEY_SUCCESS_ALERT = "Success! Key deleted!";
 export const DEL_KEY_SUCCESS_ALERT_PLURAL = "Success! Keys deleted!";
 export const FLOW_BUILD_SUCCESS_ALERT = `Flow built successfully`;
 export const SAVE_SUCCESS_ALERT = "Changes saved successfully!";
-
-// Generic Node
+export const INVALID_FILE_SIZE_ALERT = (maxSizeMB) => {
+  return `The file size is too large. Please select a file smaller than ${maxSizeMB}MB.`;
+};

src/frontend/src/constants/constants.ts

@@ -915,3 +915,5 @@ export const COLOR_OPTIONS = {
   amber: "var(--note-amber)",
   red: "var(--note-red)",
 };
+
+export const maxSizeFilesInBytes = 10 * 1024 * 1024; // 10MB in bytes