jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix: limit file upload size to 10mb to prevent LF crashing due data render component limitations (#3870)

Browse source 
* 🐛 (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
This commit is contained in:
Cristhian Zanforlin Lousa 2024-09-20 18:33:02 -03:00 • committed by GitHub
commit aa2578370b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 13 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/frontend/src/components/inputFileComponent/index.tsx
View file

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

5
src/frontend/src/constants/alerts_constants.tsx
View file

@ -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 DEL_KEY_SUCCESS_ALERT_PLURAL = "Success! Keys deleted!";
export const FLOW_BUILD_SUCCESS_ALERT = `Flow built successfully`; export const FLOW_BUILD_SUCCESS_ALERT = `Flow built successfully`;
export const SAVE_SUCCESS_ALERT = "Changes saved successfully!"; export const SAVE_SUCCESS_ALERT = "Changes saved successfully!";
export const INVALID_FILE_SIZE_ALERT = (maxSizeMB) => {
// Generic Node return `The file size is too large. Please select a file smaller than ${maxSizeMB}MB.`;
};

2
src/frontend/src/constants/constants.ts
View file

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