Merge pull request #8547 from juananpe/file-deletion

fix: File deletion doesn't properly clean up database entries

backend/open_webui/routers/files.py

@@ -345,6 +345,8 @@ async def get_file_content_by_id(id: str, user=Depends(get_verified_user)):
 async def delete_file_by_id(id: str, user=Depends(get_verified_user)):
     file = Files.get_file_by_id(id)
     if file and (file.user_id == user.id or user.role == "admin"):
+        # We should add Chroma cleanup here
+
         result = Files.delete_file_by_id(id)
         if result:
             try:

src/lib/components/chat/MessageInput.svelte

@@ -38,6 +38,7 @@
 	import { generateAutoCompletion } from '$lib/apis';
 	import { error, text } from '@sveltejs/kit';
 	import Image from '../common/Image.svelte';
+	import { deleteFileById } from '$lib/apis/files';
 
 	const i18n = getContext('i18n');
 
@@ -615,9 +616,19 @@
 													loading={file.status === 'uploading'}
 													dismissible={true}
 													edit={true}
-													on:dismiss={() => {
+													on:dismiss={async () => {
+														try {
+															if (file.id) {
+																// This will handle both file deletion and Chroma cleanup
+																await deleteFileById(localStorage.token, file.id);
+															}
+															// Remove from UI state
 															files.splice(fileIdx, 1);
 															files = files;
+														} catch (e) {
+															console.error('Error deleting file:', e);
+															toast.error(e);
+														}
 													}}
 													on:click={() => {
 														console.log(file);

src/lib/components/common/FileItem.svelte

@@ -25,6 +25,8 @@
 	export let type: string;
 	export let size: number;
 
+	import { deleteFileById } from '$lib/apis/files';
+
 	let showModal = false;
 </script>
 

src/lib/components/workspace/Knowledge/KnowledgeBase.svelte

@@ -11,7 +11,7 @@
 	import { page } from '$app/stores';
 	import { mobile, showSidebar, knowledge as _knowledge } from '$lib/stores';
 
-	import { updateFileDataContentById, uploadFile } from '$lib/apis/files';
+	import { updateFileDataContentById, uploadFile, deleteFileById } from '$lib/apis/files';
 	import {
 		addFileToKnowledgeById,
 		getKnowledgeById,
@@ -372,18 +372,22 @@
 	};
 
 	const deleteFileHandler = async (fileId) => {
-		const updatedKnowledge = await removeFileFromKnowledgeById(
-			localStorage.token,
-			id,
-			fileId
-		).catch((e) => {
-			toast.error(e);
-		});
+		try {
+			console.log('Starting file deletion process for:', fileId);
+
+			// Remove from knowledge base only
+			const updatedKnowledge = await removeFileFromKnowledgeById(localStorage.token, id, fileId);
+
+			console.log('Knowledge base updated:', updatedKnowledge);
 
 			if (updatedKnowledge) {
 				knowledge = updatedKnowledge;
 				toast.success($i18n.t('File removed successfully.'));
 			}
+		} catch (e) {
+			console.error('Error in deleteFileHandler:', e);
+			toast.error(e);
+		}
 	};
 
 	const updateFileContentHandler = async () => {

src/lib/components/workspace/Knowledge/KnowledgeBase/Files.svelte

@@ -19,7 +19,7 @@
 					? ' bg-gray-50 dark:bg-gray-850'
 					: 'bg-transparent'} hover:bg-gray-50 dark:hover:bg-gray-850 transition"
 				{small}
-				{file}
+				item={file}
 				name={file?.name ?? file?.meta?.name}
 				type="file"
 				size={file?.size ?? file?.meta?.size ?? ''}