refac: chat input file handling

backend/open_webui/apps/webui/models/files.py

@@ -73,6 +73,8 @@ class FileModelResponse(BaseModel):
     created_at: int  # timestamp in epoch
     updated_at: int  # timestamp in epoch
 
+    model_config = ConfigDict(extra="allow")
+
 
 class FileMetadataResponse(BaseModel):
     id: str

backend/open_webui/apps/webui/routers/files.py

@@ -38,7 +38,7 @@ router = APIRouter()
 ############################
 
 
-@router.post("/")
+@router.post("/", response_model=FileModelResponse)
 def upload_file(file: UploadFile = File(...), user=Depends(get_verified_user)):
     log.info(f"file.content_type: {file.content_type}")
     try:
@@ -73,6 +73,12 @@ def upload_file(file: UploadFile = File(...), user=Depends(get_verified_user)):
         except Exception as e:
             log.exception(e)
             log.error(f"Error processing file: {file_item.id}")
+            file_item = FileModelResponse(
+                **{
+                    **file_item.model_dump(),
+                    "error": e,
+                }
+            )
 
         if file_item:
             return file_item

src/lib/components/chat/MessageInput.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
+	import { v4 as uuidv4 } from 'uuid';
+
 	import { onMount, tick, getContext, createEventDispatcher, onDestroy } from 'svelte';
 	const dispatch = createEventDispatcher();
 
@@ -89,6 +91,7 @@
 	const uploadFileHandler = async (file) => {
 		console.log(file);
 
+		const tempItemId = uuidv4();
 		const fileItem = {
 			type: 'file',
 			file: '',
@@ -98,10 +101,16 @@
 			collection_name: '',
 			status: 'uploading',
 			size: file.size,
-			error: ''
+			error: '',
+			itemId: tempItemId
 		};
-		files = [...files, fileItem];
 
+		if (fileItem.size == 0) {
+			toast.error($i18n.t('You cannot upload an empty file.'));
+			return null;
+		}
+
+		files = [...files, fileItem];
 		// Check if the file is an audio file and transcribe/convert it to text file
 		if (['audio/mpeg', 'audio/wav', 'audio/ogg', 'audio/x-m4a'].includes(file['type'])) {
 			const res = await transcribeAudio(localStorage.token, file).catch((error) => {
@@ -132,11 +141,11 @@
 
 				files = files;
 			} else {
-				files = files.filter((item) => item.status !== null);
+				files = files.filter((item) => item?.itemId !== tempItemId);
 			}
 		} catch (e) {
 			toast.error(e);
-			files = files.filter((item) => item.status !== null);
+			files = files.filter((item) => item?.itemId !== tempItemId);
 		}
 	};