Implement file deletion and improve file upload UX with instant feedback

cursoragent · wenxi-onyx · cursoragent · commit a1fb9c65dcda · 2025-08-22T16:33:52.000Z
Co-authored-by: wenxi &lt;wenxi@onyx.app&gt;
diff --git a/backend/onyx/server/query_and_chat/chat_backend.py b/backend/onyx/server/query_and_chat/chat_backend.py
@@ -60,6 +60,7 @@
 from onyx.db.models import User
 from onyx.db.persona import get_persona_by_id
 from onyx.db.user_documents import create_user_files
+from onyx.db.user_documents import UserFile
 from onyx.file_processing.extract_file_text import docx_to_txt_filename
 from onyx.file_store.file_store import get_default_file_store
 from onyx.file_store.models import FileDescriptor
@@ -804,6 +805,41 @@ def fetch_chat_file(
     return StreamingResponse(file_io, media_type=media_type)
 
 
+@router.delete("/file/{file_id:path}")
+def delete_chat_file(
+    file_id: str,
+    user: User | None = Depends(current_user),
+    db_session: Session = Depends(get_session),
+) -> dict[str, str]:
+    """Delete a chat file and associated user file record"""
+    user_id = user.id if user else None
+    
+    # Find the user file record that corresponds to this file_id
+    user_file = (
+        db_session.query(UserFile)
+        .filter(UserFile.file_id == file_id, UserFile.user_id == user_id)
+        .first()
+    )
+    
+    if not user_file:
+        raise HTTPException(status_code=404, detail="File not found or access denied")
+    
+    try:
+        # Delete from file store
+        file_store = get_default_file_store()
+        file_store.delete_file(file_id, db_session)
+        
+        # Delete user file record
+        db_session.delete(user_file)
+        db_session.commit()
+        
+        return {"message": "File deleted successfully"}
+    except Exception as e:
+        db_session.rollback()
+        logger.error(f"Error deleting file {file_id}: {str(e)}")
+        raise HTTPException(status_code=500, detail="Failed to delete file")
+
+
 @router.get("/search")
 async def search_chats(
     query: str | None = Query(None),
diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
@@ -2139,39 +2139,68 @@ export function ChatPage({
       return;
     }
 
+    // Immediately add files with uploading state for instant feedback
+    const tempFileDescriptors: FileDescriptor[] = acceptedFiles.map((file) => ({
+      id: `temp-${Date.now()}-${Math.random()}`,
+      name: file.name,
+      type: file.type.startsWith("image/") ? ChatFileType.IMAGE : ChatFileType.PLAIN_TEXT,
+      isUploading: true,
+    }));
+
+    setCurrentMessageFiles((prev) => [...prev, ...tempFileDescriptors]);
     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
-        };
+    try {
+      const uploadedFileDescriptors: FileDescriptor[] = [];
+      
+      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
+          };
 
-        setCurrentMessageFiles((prev) => [...prev, newFileDescriptor]);
-      } else {
-        setPopup({
-          type: "error",
-          message: "Failed to upload file",
-        });
+          uploadedFileDescriptors.push(newFileDescriptor);
+        } else {
+          setPopup({
+            type: "error",
+            message: `Failed to upload file: ${file.name}`,
+          });
+        }
       }
-    }
 
-    updateChatState("input", currentSessionId());
+      // Replace temp files with actual uploaded files
+      setCurrentMessageFiles((prev) => {
+        const filtered = prev.filter((f) => !f.id.startsWith("temp-"));
+        return [...filtered, ...uploadedFileDescriptors];
+      });
+
+    } catch (error) {
+      console.error("Error uploading files:", error);
+      setPopup({
+        type: "error",
+        message: "Failed to upload files",
+      });
+      
+      // Remove temp files on error
+      setCurrentMessageFiles((prev) => prev.filter((f) => !f.id.startsWith("temp-")));
+    } finally {
+      updateChatState("input", currentSessionId());
+    }
   };
 
   // Used to maintain a "time out" for history sidebar so our existing refs can have time to process change
diff --git a/web/src/app/chat/input/ChatInputBar.tsx b/web/src/app/chat/input/ChatInputBar.tsx
@@ -39,6 +39,7 @@ import { AgenticToggle } from "./AgenticToggle";
 import { SettingsContext } from "@/components/settings/SettingsProvider";
 import { getProviderIcon } from "@/app/admin/configuration/llm/utils";
 import { useDocumentsContext } from "../my-documents/DocumentsContext";
+import { deleteChatFile } from "../lib";
 
 const MAX_INPUT_HEIGHT = 200;
 export const SourceChip2 = ({
@@ -728,10 +729,20 @@ export function ChatInputBar({
                           )
                         }
                         title={file.name}
-                        onRemove={() => {
+                        onRemove={async () => {
                           if (file.source === "selected") {
                             removeSelectedFile(file.originalFile);
                           } else {
+                            // Delete file from backend before removing from UI
+                            try {
+                              const error = await deleteChatFile(file.id);
+                              if (error) {
+                                console.error("Failed to delete file:", error);
+                                // Still remove from UI even if backend deletion fails
+                              }
+                            } catch (error) {
+                              console.error("Error deleting file:", error);
+                            }
                             setCurrentMessageFiles(
                               currentMessageFiles.filter(
                                 (fileInFilter) => fileInFilter.id !== file.id
@@ -752,10 +763,20 @@ export function ChatInputBar({
                           />
                         }
                         title={file.name}
-                        onRemove={() => {
+                        onRemove={async () => {
                           if (file.source === "selected") {
                             removeSelectedFile(file.originalFile);
                           } else {
+                            // Delete file from backend before removing from UI
+                            try {
+                              const error = await deleteChatFile(file.id);
+                              if (error) {
+                                console.error("Failed to delete file:", error);
+                                // Still remove from UI even if backend deletion fails
+                              }
+                            } catch (error) {
+                              console.error("Error deleting file:", error);
+                            }
                             setCurrentMessageFiles(
                               currentMessageFiles.filter(
                                 (fileInFilter) => fileInFilter.id !== file.id
diff --git a/web/src/app/chat/input/SimplifiedChatInputBar.tsx b/web/src/app/chat/input/SimplifiedChatInputBar.tsx
@@ -9,6 +9,7 @@ import {
 } from "../files/InputBarPreview";
 import { SendIcon } from "@/components/icons/icons";
 import { HorizontalSourceSelector } from "@/components/search/filtering/HorizontalSourceSelector";
+import { deleteChatFile } from "../lib";
 import { Tag } from "@/lib/types";
 
 const MAX_INPUT_HEIGHT = 200;
@@ -108,7 +109,17 @@ export function SimplifiedChatInputBar({
                   {file.type === ChatFileType.IMAGE ? (
                     <InputBarPreviewImageProvider
                       file={file}
-                      onDelete={() => {
+                      onDelete={async () => {
+                        // Delete file from backend before removing from UI
+                        try {
+                          const error = await deleteChatFile(file.id);
+                          if (error) {
+                            console.error("Failed to delete file:", error);
+                            // Still remove from UI even if backend deletion fails
+                          }
+                        } catch (error) {
+                          console.error("Error deleting file:", error);
+                        }
                         setFiles(
                           files.filter(
                             (fileInFilter) => fileInFilter.id !== file.id
@@ -120,7 +131,17 @@ export function SimplifiedChatInputBar({
                   ) : (
                     <InputBarPreview
                       file={file}
-                      onDelete={() => {
+                      onDelete={async () => {
+                        // Delete file from backend before removing from UI
+                        try {
+                          const error = await deleteChatFile(file.id);
+                          if (error) {
+                            console.error("Failed to delete file:", error);
+                            // Still remove from UI even if backend deletion fails
+                          }
+                        } catch (error) {
+                          console.error("Error deleting file:", error);
+                        }
                         setFiles(
                           files.filter(
                             (fileInFilter) => fileInFilter.id !== file.id
diff --git a/web/src/app/chat/lib.tsx b/web/src/app/chat/lib.tsx
@@ -739,6 +739,60 @@ export async function uploadFilesForChat(
   return [responseJson.files as FileDescriptor[], null];
 }
 
+export async function deleteChatFile(fileId: string): Promise<string | null> {
+  const response = await fetch(`/api/chat/file/${encodeURIComponent(fileId)}`, {
+    method: "DELETE",
+  });
+  if (!response.ok) {
+    const errorData = await response.json();
+    return errorData.detail || "Failed to delete file";
+  }
+  return null;
+}
+
+export async function uploadFilesImmediately(
+  files: File[],
+  onProgress?: (fileName: string, progress: number) => void
+): Promise<[FileDescriptor[], string | null]> {
+  const tempFiles: FileDescriptor[] = files.map((file) => ({
+    id: `temp-${Date.now()}-${Math.random()}`,
+    name: file.name,
+    type: file.type.startsWith("image/") ? "IMAGE" : "PLAIN_TEXT",
+    isUploading: true,
+  }));
+
+  // Simulate progress for immediate feedback
+  if (onProgress) {
+    files.forEach((file) => {
+      onProgress(file.name, 0);
+      // Simulate progress steps
+      let progress = 0;
+      const progressInterval = setInterval(() => {
+        progress += 20;
+        if (progress <= 80) {
+          onProgress(file.name, progress);
+        } else {
+          clearInterval(progressInterval);
+        }
+      }, 100);
+    });
+  }
+
+  try {
+    const [uploadedFiles, error] = await uploadFilesForChat(files);
+    
+    if (onProgress) {
+      files.forEach((file) => {
+        onProgress(file.name, 100);
+      });
+    }
+
+    return [uploadedFiles, error];
+  } catch (error) {
+    return [[], error instanceof Error ? error.message : "Upload failed"];
+  }
+}
+
 export function useScrollonStream({
   chatState,
   scrollableDivRef,
diff --git a/web/src/app/chat/nrf/NRFPage.tsx b/web/src/app/chat/nrf/NRFPage.tsx
@@ -22,7 +22,7 @@ import {
 import { Modal } from "@/components/Modal";
 import { useNightTime } from "@/lib/dateUtils";
 import { useFilters } from "@/lib/hooks";
-import { uploadFilesForChat } from "../lib";
+import { uploadFilesForChat, deleteChatFile } from "../lib";
 import { ChatFileType, FileDescriptor } from "../interfaces";
 import { useChatContext } from "@/components/context/ChatContext";
 import Dropzone from "react-dropzone";
@@ -121,11 +121,8 @@ export default function NRFPage({
       isUploading: true,
     }));
 
-    // only show loading spinner for reasonably large files
-    const totalSize = acceptedFiles.reduce((sum, file) => sum + file.size, 0);
-    if (totalSize > 50 * 1024) {
-      setCurrentMessageFiles((prev) => [...prev, ...tempFileDescriptors]);
-    }
+    // Immediately show files with uploading state for instant feedback
+    setCurrentMessageFiles((prev) => [...prev, ...tempFileDescriptors]);
 
     const removeTempFiles = (prev: FileDescriptor[]) => {
       return prev.filter(
