From 107a614159c00954a965edcc732f8dd178de873d Mon Sep 17 00:00:00 2001 From: Emerson Gomes Date: Tue, 1 Jul 2025 21:29:46 -0500 Subject: [PATCH 1/2] Fix broken drag&drop file upload funcionality by unified usage of chat upload API; Add a spinning loader for when file upload is ongoing --- web/src/app/chat/ChatPage.tsx | 72 ++++++++++++++++--------- web/src/app/chat/input/ChatInputBar.tsx | 16 +++--- 2 files changed, 58 insertions(+), 30 deletions(-) diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx index 18adfe84164..acc5d59868c 100644 --- a/web/src/app/chat/ChatPage.tsx +++ b/web/src/app/chat/ChatPage.tsx @@ -186,7 +186,6 @@ export function ChatPage({ setSelectedFiles, folders: userFolders, files: allUserFiles, - uploadFile, currentMessageFiles, setCurrentMessageFiles, } = useDocumentsContext(); @@ -1987,34 +1986,59 @@ export function ChatPage({ updateChatState("uploading", currentSessionId()); - for (let file of acceptedFiles) { - const formData = new FormData(); - formData.append("files", file); - const response: FileResponse[] = await uploadFile(formData, null); - - if (response.length > 0 && response[0] !== undefined) { - const uploadedFile = response[0]; - - const newFileDescriptor: FileDescriptor = { - // Use file_id (storage ID) if available, otherwise fallback to DB id - // Ensure it's a string as FileDescriptor expects - id: uploadedFile.file_id - ? String(uploadedFile.file_id) - : String(uploadedFile.id), - type: uploadedFile.chat_file_type - ? uploadedFile.chat_file_type - : ChatFileType.PLAIN_TEXT, - name: uploadedFile.name, - isUploading: false, // Mark as successfully uploaded - }; + // Create placeholder files to show upload progress + const placeholderFiles: FileDescriptor[] = acceptedFiles.map((file, index) => ({ + id: `placeholder-${Date.now()}-${index}`, + type: ChatFileType.PLAIN_TEXT, + name: file.name, + isUploading: true, + })); - setCurrentMessageFiles((prev) => [...prev, newFileDescriptor]); - } else { + // Add placeholder files to show upload progress + setCurrentMessageFiles((prev) => [...prev, ...placeholderFiles]); + + // Upload all files at once using the chat upload API + try { + const [uploadedFiles, uploadError] = await uploadFilesForChat(acceptedFiles); + + if (uploadError) { + // Remove all placeholders and show error + setCurrentMessageFiles((prev) => + prev.filter((f) => !placeholderFiles.some(p => p.id === f.id)) + ); setPopup({ type: "error", - message: "Failed to upload file", + message: uploadError, }); + return; } + + // Replace all placeholders with actual uploaded files + setCurrentMessageFiles((prev) => { + // Remove all placeholders + const withoutPlaceholders = prev.filter((f) => + !placeholderFiles.some(p => p.id === f.id) + ); + + // Add the successfully uploaded files + const newFileDescriptors: FileDescriptor[] = uploadedFiles.map((uploadedFile) => ({ + id: uploadedFile.id, + type: uploadedFile.type, + name: uploadedFile.name, + isUploading: false, + })); + + return [...withoutPlaceholders, ...newFileDescriptors]; + }); + } catch (error) { + // Remove all placeholders and show error + setCurrentMessageFiles((prev) => + prev.filter((f) => !placeholderFiles.some(p => p.id === f.id)) + ); + setPopup({ + type: "error", + message: `Failed to upload files. ${error instanceof Error ? error.message : 'Unknown error'}`, + }); } updateChatState("input", currentSessionId()); diff --git a/web/src/app/chat/input/ChatInputBar.tsx b/web/src/app/chat/input/ChatInputBar.tsx index 2c3d1598fa6..acf3c61e6fe 100644 --- a/web/src/app/chat/input/ChatInputBar.tsx +++ b/web/src/app/chat/input/ChatInputBar.tsx @@ -743,12 +743,16 @@ export function ChatInputBar({ + file.isUploading ? ( + + ) : ( + + ) } title={file.name} onRemove={() => { From fe774df90046fe583223ad191f1a5216a9d74a64 Mon Sep 17 00:00:00 2001 From: Emerson Gomes Date: Tue, 1 Jul 2025 21:39:41 -0500 Subject: [PATCH 2/2] Added null check for ID mapping at ChatPage.tsx:2025. Files with null/undefined IDs are now filtered out before creating file descriptors --- web/src/app/chat/ChatPage.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx index acc5d59868c..cc6de780880 100644 --- a/web/src/app/chat/ChatPage.tsx +++ b/web/src/app/chat/ChatPage.tsx @@ -2021,12 +2021,14 @@ export function ChatPage({ ); // Add the successfully uploaded files - const newFileDescriptors: FileDescriptor[] = uploadedFiles.map((uploadedFile) => ({ - id: uploadedFile.id, - type: uploadedFile.type, - name: uploadedFile.name, - isUploading: false, - })); + const newFileDescriptors: FileDescriptor[] = uploadedFiles + .filter((uploadedFile) => uploadedFile.id != null) + .map((uploadedFile) => ({ + id: uploadedFile.id, + type: uploadedFile.type, + name: uploadedFile.name, + isUploading: false, + })); return [...withoutPlaceholders, ...newFileDescriptors]; });