From 9a90a6b995b3c8cb511ca6a0c579951aa30b914e Mon Sep 17 00:00:00 2001 From: Venkateswarlu Marthula Date: Tue, 19 Aug 2025 22:43:30 +0530 Subject: [PATCH 1/9] file upload changes commit --- src/frontend/src/components/uploadButton.tsx | 35 ++++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/components/uploadButton.tsx b/src/frontend/src/components/uploadButton.tsx index ac2deaf5..35d90dcf 100644 --- a/src/frontend/src/components/uploadButton.tsx +++ b/src/frontend/src/components/uploadButton.tsx @@ -52,6 +52,7 @@ const FileUploadZone: React.FC = ({ const [batchId, setBatchId] = useState(uuidv4()); const [allUploadsComplete, setAllUploadsComplete] = useState(false); const [fileLimitExceeded, setFileLimitExceeded] = useState(false); + const [fileRejectionErrors, setFileRejectionErrors] = useState([]); const [showFileLimitDialog, setShowFileLimitDialog] = useState(false); const navigate = useNavigate(); @@ -187,8 +188,22 @@ const FileUploadZone: React.FC = ({ if (onFileUpload) onFileUpload(acceptedFiles); } - if (onFileReject && fileRejections.length > 0) { - onFileReject(fileRejections); + if (fileRejections.length > 0) { + // Build error messages for each rejection + const errors: string[] = []; + fileRejections.forEach(rejection => { + rejection.errors.forEach(err => { + if (err.code === "file-too-large") { + errors.push(`File '${rejection.file.name}' exceeds the 200MB size limit.`); + } else if (err.code === "file-invalid-type") { + errors.push(`File '${rejection.file.name}' is not a valid SQL file.`); + } else { + errors.push(`File '${rejection.file.name}': ${err.message}`); + } + }); + }); + setFileRejectionErrors(errors); + if (onFileReject) onFileReject(fileRejections); } }, [onFileUpload, onFileReject, uploadingFiles.length] @@ -521,6 +536,22 @@ const FileUploadZone: React.FC = ({
+ {/* Show file rejection errors for invalid type or size */} + {fileRejectionErrors.length > 0 && ( + setFileRejectionErrors([])} + dismissButtonAriaLabel="Close" + styles={{ root: { display: "flex", alignItems: "left", background: "#fff4f4" } }} + > +
+ {fileRejectionErrors.map((err, idx) => ( + {err} + ))} +
+ + )} {/* Show network error message bar if any file has error */} {uploadingFiles.some(f => f.status === 'error') && ( Date: Wed, 20 Aug 2025 11:34:32 +0530 Subject: [PATCH 2/9] file upload message code changes commit --- src/frontend/src/components/uploadButton.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/components/uploadButton.tsx b/src/frontend/src/components/uploadButton.tsx index 35d90dcf..8e83cb90 100644 --- a/src/frontend/src/components/uploadButton.tsx +++ b/src/frontend/src/components/uploadButton.tsx @@ -40,7 +40,7 @@ const FileUploadZone: React.FC = ({ onFileReject, onUploadStateChange, maxSize = 200 * 1024 * 1024, - acceptedFileTypes = { 'application/sql': ['.sql'] }, + acceptedFileTypes = ['.sql'], // Accept only .sql files selectedCurrentLanguage, selectedTargetLanguage }) => { @@ -194,9 +194,9 @@ const FileUploadZone: React.FC = ({ fileRejections.forEach(rejection => { rejection.errors.forEach(err => { if (err.code === "file-too-large") { - errors.push(`File '${rejection.file.name}' exceeds the 200MB size limit.`); + errors.push(`File '${rejection.file.name}' exceeds the 200MB size limit. Please upload a file smaller than 200MB.`); } else if (err.code === "file-invalid-type") { - errors.push(`File '${rejection.file.name}' is not a valid SQL file.`); + errors.push(`File '${rejection.file.name}' is not a valid SQL file. Only .sql files are allowed.`); } else { errors.push(`File '${rejection.file.name}': ${err.message}`); } @@ -213,7 +213,7 @@ const FileUploadZone: React.FC = ({ onDrop, noClick: true, maxSize, - accept: acceptedFileTypes, + accept: acceptedFileTypes, // Only .sql files //maxFiles: MAX_FILES, }; From b381e07d9dab30ed79374825f621fae25a61381e Mon Sep 17 00:00:00 2001 From: Venkateswarlu Marthula Date: Wed, 20 Aug 2025 13:00:21 +0530 Subject: [PATCH 3/9] new changes commit 1 --- src/frontend/src/components/uploadButton.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/frontend/src/components/uploadButton.tsx b/src/frontend/src/components/uploadButton.tsx index 8e83cb90..d5d6923f 100644 --- a/src/frontend/src/components/uploadButton.tsx +++ b/src/frontend/src/components/uploadButton.tsx @@ -362,6 +362,22 @@ const FileUploadZone: React.FC = ({ return (
+ {/* Show file rejection errors for invalid type or size at the very top */} + {fileRejectionErrors.length > 0 && ( + setFileRejectionErrors([])} + dismissButtonAriaLabel="Close" + styles={{ root: { display: "flex", alignItems: "left", background: "#fff4f4", marginBottom: "16px" } }} + > +
+ {fileRejectionErrors.map((err, idx) => ( + {err} + ))} +
+ + )} Date: Thu, 21 Aug 2025 06:32:11 +0530 Subject: [PATCH 4/9] file upload notification message width set --- src/frontend/src/components/uploadButton.tsx | 68 +++++++++----------- 1 file changed, 30 insertions(+), 38 deletions(-) diff --git a/src/frontend/src/components/uploadButton.tsx b/src/frontend/src/components/uploadButton.tsx index d5d6923f..8e5bcb86 100644 --- a/src/frontend/src/components/uploadButton.tsx +++ b/src/frontend/src/components/uploadButton.tsx @@ -40,7 +40,7 @@ const FileUploadZone: React.FC = ({ onFileReject, onUploadStateChange, maxSize = 200 * 1024 * 1024, - acceptedFileTypes = ['.sql'], // Accept only .sql files + acceptedFileTypes = ['.sql'], // Accept only .sql files by extension selectedCurrentLanguage, selectedTargetLanguage }) => { @@ -163,34 +163,42 @@ const FileUploadZone: React.FC = ({ const onDrop = useCallback( (acceptedFiles: File[], fileRejections: FileRejection[]) => { + // Manual extension check: only allow .sql files + const validFiles = acceptedFiles.filter(file => file.name.toLowerCase().endsWith('.sql')); + const invalidFiles = acceptedFiles.filter(file => !file.name.toLowerCase().endsWith('.sql')); + // Check current files count and determine how many more can be added const remainingSlots = MAX_FILES - uploadingFiles.length; + + if (validFiles.length > 0) { + setFileRejectionErrors([]); // Clear error notification when valid file is selected + } + if (remainingSlots <= 0) { - // Already at max files, show dialog setShowFileLimitDialog(true); return; } // If more files are dropped than slots available - if (acceptedFiles.length > remainingSlots) { - // Take only the first `remainingSlots` files - const filesToUpload = acceptedFiles.slice(0, remainingSlots); + if (validFiles.length > remainingSlots) { + const filesToUpload = validFiles.slice(0, remainingSlots); filesToUpload.forEach(file => simulateFileUpload(file)); - if (onFileUpload) onFileUpload(filesToUpload); - - // Show dialog about exceeding limit setShowFileLimitDialog(true); } else { - // Normal case, upload all files - acceptedFiles.forEach(file => simulateFileUpload(file)); - if (onFileUpload) onFileUpload(acceptedFiles); + validFiles.forEach(file => simulateFileUpload(file)); + if (onFileUpload) onFileUpload(validFiles); } + // Build error messages for invalid extension files + const errors: string[] = []; + invalidFiles.forEach(file => { + errors.push(`File '${file.name}' is not a valid SQL file. Only .sql files are allowed.`); + }); + + // Existing fileRejections (size/type) if (fileRejections.length > 0) { - // Build error messages for each rejection - const errors: string[] = []; fileRejections.forEach(rejection => { rejection.errors.forEach(err => { if (err.code === "file-too-large") { @@ -202,9 +210,11 @@ const FileUploadZone: React.FC = ({ } }); }); - setFileRejectionErrors(errors); if (onFileReject) onFileReject(fileRejections); } + if (errors.length > 0) { + setFileRejectionErrors(errors); + } }, [onFileUpload, onFileReject, uploadingFiles.length] ); @@ -213,7 +223,7 @@ const FileUploadZone: React.FC = ({ onDrop, noClick: true, maxSize, - accept: acceptedFileTypes, // Only .sql files + accept: acceptedFileTypes, // Only .sql files regardless of mime type //maxFiles: MAX_FILES, }; @@ -362,22 +372,6 @@ const FileUploadZone: React.FC = ({ return (
- {/* Show file rejection errors for invalid type or size at the very top */} - {fileRejectionErrors.length > 0 && ( - setFileRejectionErrors([])} - dismissButtonAriaLabel="Close" - styles={{ root: { display: "flex", alignItems: "left", background: "#fff4f4", marginBottom: "16px" } }} - > -
- {fileRejectionErrors.map((err, idx) => ( - {err} - ))} -
- - )} = ({
{/* Show file rejection errors for invalid type or size */} {fileRejectionErrors.length > 0 && ( - setFileRejectionErrors([])} - dismissButtonAriaLabel="Close" - styles={{ root: { display: "flex", alignItems: "left", background: "#fff4f4" } }} - > +
{fileRejectionErrors.map((err, idx) => ( {err} From 812c84d8dbfeb95d3b3208095d72c2a86bdee35b Mon Sep 17 00:00:00 2001 From: Venkateswarlu Marthula Date: Thu, 21 Aug 2025 07:45:05 +0530 Subject: [PATCH 5/9] final changes for file upload error notification --- src/frontend/src/components/uploadButton.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/frontend/src/components/uploadButton.tsx b/src/frontend/src/components/uploadButton.tsx index 8e5bcb86..f2773730 100644 --- a/src/frontend/src/components/uploadButton.tsx +++ b/src/frontend/src/components/uploadButton.tsx @@ -547,18 +547,23 @@ const FileUploadZone: React.FC = ({
{/* Show file rejection errors for invalid type or size */} - {fileRejectionErrors.length > 0 && ( + {fileRejectionErrors.length > 0 && ( -
- {fileRejectionErrors.map((err, idx) => ( - {err} +
+ + {fileRejectionErrors[0]} +
+ {fileRejectionErrors.slice(1).map((err, idx) => ( +
{err}
))} -
- + )} {/* Show network error message bar if any file has error */} {uploadingFiles.some(f => f.status === 'error') && ( From 0569ff7fa163ba403458a3a39c88ff43f01e9353 Mon Sep 17 00:00:00 2001 From: Venkateswarlu Marthula Date: Thu, 21 Aug 2025 08:28:21 +0530 Subject: [PATCH 6/9] error notification front end changes final commit --- src/frontend/src/components/uploadButton.tsx | 27 ++++++++++---------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/src/frontend/src/components/uploadButton.tsx b/src/frontend/src/components/uploadButton.tsx index f2773730..7208b0a0 100644 --- a/src/frontend/src/components/uploadButton.tsx +++ b/src/frontend/src/components/uploadButton.tsx @@ -40,7 +40,7 @@ const FileUploadZone: React.FC = ({ onFileReject, onUploadStateChange, maxSize = 200 * 1024 * 1024, - acceptedFileTypes = ['.sql'], // Accept only .sql files by extension + acceptedFileTypes = { 'application/sql': ['.sql'] }, // Accept only .sql files by extension selectedCurrentLanguage, selectedTargetLanguage }) => { @@ -255,18 +255,19 @@ const FileUploadZone: React.FC = ({ }; const cancelAllUploads = useCallback(() => { - // Clear all upload intervals - dispatch(deleteBatch({ batchId, headers: null })); - - Object.values(uploadIntervals).forEach(interval => clearInterval(interval)); - setUploadIntervals({}); - setUploadingFiles([]); - setUploadState('IDLE'); - onUploadStateChange?.('IDLE'); - setShowCancelDialog(false); - setShowLogoCancelDialog(false); - //setBatchId(); - startNewBatch(); + // Clear all upload intervals + dispatch(deleteBatch({ batchId, headers: null })); + + Object.values(uploadIntervals).forEach(interval => clearInterval(interval)); + setUploadIntervals({}); + setUploadingFiles([]); + setUploadState('IDLE'); + onUploadStateChange?.('IDLE'); + setShowCancelDialog(false); + setShowLogoCancelDialog(false); + setFileRejectionErrors([]); // Clear error notification when cancel is clicked + //setBatchId(); + startNewBatch(); }, [uploadIntervals, onUploadStateChange]); useEffect(() => { From 91d7b74a28d293c5ae319de3606c1f2250539993 Mon Sep 17 00:00:00 2001 From: Venkateswarlu Marthula Date: Mon, 25 Aug 2025 17:01:43 +0530 Subject: [PATCH 7/9] Copilot changes commit in the file upload --- src/frontend/src/components/uploadButton.tsx | 52 +++++++++++--------- 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/src/frontend/src/components/uploadButton.tsx b/src/frontend/src/components/uploadButton.tsx index 7208b0a0..2b692af8 100644 --- a/src/frontend/src/components/uploadButton.tsx +++ b/src/frontend/src/components/uploadButton.tsx @@ -1,4 +1,12 @@ import React, { useCallback, useState, useEffect } from 'react'; +// Helper function to check for .sql extension +const isSqlFile = (file: File): boolean => file.name.toLowerCase().endsWith('.sql'); + +// MessageBar styles constant +const messageBarErrorStyles = { + root: { display: "flex", flexDirection: "column", alignItems: "left", background: "#fff4f4" }, + icon: { display: "none" }, +}; import { useDropzone, FileRejection, DropzoneOptions } from 'react-dropzone'; import { CircleCheck, X } from 'lucide-react'; import { @@ -163,14 +171,13 @@ const FileUploadZone: React.FC = ({ const onDrop = useCallback( (acceptedFiles: File[], fileRejections: FileRejection[]) => { - // Manual extension check: only allow .sql files - const validFiles = acceptedFiles.filter(file => file.name.toLowerCase().endsWith('.sql')); - const invalidFiles = acceptedFiles.filter(file => !file.name.toLowerCase().endsWith('.sql')); + // Use helper for .sql extension check + const validFiles = acceptedFiles.filter(isSqlFile); + const invalidFiles = acceptedFiles.filter(file => !isSqlFile(file)); // Check current files count and determine how many more can be added const remainingSlots = MAX_FILES - uploadingFiles.length; - if (validFiles.length > 0) { setFileRejectionErrors([]); // Clear error notification when valid file is selected } @@ -191,26 +198,26 @@ const FileUploadZone: React.FC = ({ if (onFileUpload) onFileUpload(validFiles); } - // Build error messages for invalid extension files - const errors: string[] = []; - invalidFiles.forEach(file => { - errors.push(`File '${file.name}' is not a valid SQL file. Only .sql files are allowed.`); - }); - - // Existing fileRejections (size/type) - if (fileRejections.length > 0) { - fileRejections.forEach(rejection => { - rejection.errors.forEach(err => { + // Efficient error array construction + const errors: string[] = [ + ...invalidFiles.map(file => + `File '${file.name}' is not a valid SQL file. Only .sql files are allowed.` + ), + ...fileRejections.flatMap(rejection => + rejection.errors.map(err => { if (err.code === "file-too-large") { - errors.push(`File '${rejection.file.name}' exceeds the 200MB size limit. Please upload a file smaller than 200MB.`); + return `File '${rejection.file.name}' exceeds the 200MB size limit. Please upload a file smaller than 200MB.`; } else if (err.code === "file-invalid-type") { - errors.push(`File '${rejection.file.name}' is not a valid SQL file. Only .sql files are allowed.`); + return `File '${rejection.file.name}' is not a valid SQL file. Only .sql files are allowed.`; } else { - errors.push(`File '${rejection.file.name}': ${err.message}`); + return `File '${rejection.file.name}': ${err.message}`; } - }); - }); - if (onFileReject) onFileReject(fileRejections); + }) + ) + ]; + + if (fileRejections.length > 0 && onFileReject) { + onFileReject(fileRejections); } if (errors.length > 0) { setFileRejectionErrors(errors); @@ -552,10 +559,7 @@ const FileUploadZone: React.FC = ({
From f8c76662638894c488773421a0e6e41d4f87b742 Mon Sep 17 00:00:00 2001 From: Venkateswarlu Marthula Date: Mon, 25 Aug 2025 17:15:21 +0530 Subject: [PATCH 8/9] styles changes commit --- src/frontend/src/components/uploadButton.tsx | 37 ++++++++++++-------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/src/frontend/src/components/uploadButton.tsx b/src/frontend/src/components/uploadButton.tsx index 2b692af8..67966229 100644 --- a/src/frontend/src/components/uploadButton.tsx +++ b/src/frontend/src/components/uploadButton.tsx @@ -1,12 +1,27 @@ import React, { useCallback, useState, useEffect } from 'react'; -// Helper function to check for .sql extension -const isSqlFile = (file: File): boolean => file.name.toLowerCase().endsWith('.sql'); - -// MessageBar styles constant +// MessageBar styles constants const messageBarErrorStyles = { root: { display: "flex", flexDirection: "column", alignItems: "left", background: "#fff4f4" }, icon: { display: "none" }, }; + +const messageBarNetworkErrorStyles = { + root: { display: "flex", alignItems: "left", background: "#fff4f4" }, + icon: { display: "none" }, +}; + +const messageBarSuccessStyles = { + root: { display: "flex", alignItems: "left" }, + icon: { display: "none" }, +}; + +const messageBarWarningStyles = { + root: { display: "flex", alignItems: "center" }, +}; +// Helper function to check for .sql extension +const isSqlFile = (file: File): boolean => file.name.toLowerCase().endsWith('.sql'); + +// ...existing code... import { useDropzone, FileRejection, DropzoneOptions } from 'react-dropzone'; import { CircleCheck, X } from 'lucide-react'; import { @@ -575,10 +590,7 @@ const FileUploadZone: React.FC = ({
= ({
= ({ isMultiline={false} onDismiss={() => setFileLimitExceeded(false)} dismissButtonAriaLabel="Close" - styles={{ - root: { display: "flex", alignItems: "center" }, - }} + styles={messageBarWarningStyles} > Date: Mon, 25 Aug 2025 17:23:54 +0530 Subject: [PATCH 9/9] style in file changes commit --- src/frontend/src/components/uploadButton.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/frontend/src/components/uploadButton.tsx b/src/frontend/src/components/uploadButton.tsx index 67966229..2bc9540b 100644 --- a/src/frontend/src/components/uploadButton.tsx +++ b/src/frontend/src/components/uploadButton.tsx @@ -5,10 +5,7 @@ const messageBarErrorStyles = { icon: { display: "none" }, }; -const messageBarNetworkErrorStyles = { - root: { display: "flex", alignItems: "left", background: "#fff4f4" }, - icon: { display: "none" }, -}; + const messageBarSuccessStyles = { root: { display: "flex", alignItems: "left" }, @@ -590,7 +587,7 @@ const FileUploadZone: React.FC = ({