⚡Initialize fileItem first to speed up file display

src/lib/components/chat/MessageInput.svelte

 <script lang="ts">
 	import { toast } from 'svelte-sonner';
+	import { v4 as uuidv4 } from 'uuid';
 	import { onMount, tick, getContext } from 'svelte';
 	import {
 		type Model,
@@ -98,6 +99,8 @@
 
 	const uploadFileHandler = async (file) => {
 		console.log(file);
+		const fileId = uuidv4();
+
 		// Check if the file is an audio file and transcribe/convert it to text file
 		if (['audio/mpeg', 'audio/wav'].includes(file['type'])) {
 			const res = await transcribeAudio(localStorage.token, file).catch((error) => {
@@ -112,25 +115,27 @@
 			}
 		}
 
-		// Upload the file to the server
-		const uploadedFile = await uploadFile(localStorage.token, file).catch((error) => {
-			toast.error(error);
-			return null;
-		});
-
-		if (uploadedFile) {
 		const fileItem = {
 			type: 'file',
-				file: uploadedFile,
-				id: uploadedFile.id,
-				url: `${WEBUI_API_BASE_URL}/files/${uploadedFile.id}`,
+			file: '',
+			id: fileId,
+			url: '',
 			name: file.name,
 			collection_name: '',
 			status: 'uploaded',
+			size: file.size,
 			error: ''
 		};
 		files = [...files, fileItem];
 
+		try {
+			const uploadedFile = await uploadFile(localStorage.token, file);
+
+			if (uploadedFile) {
+				fileItem.file = uploadedFile;
+				fileItem.id = uploadedFile.id;
+				fileItem.url = `${WEBUI_API_BASE_URL}/files/${uploadedFile.id}`;
+
 				// TODO: Check if tools & functions have files support to skip this step to delegate file processing
 				// Default Upload to VectorDB
 				if (
@@ -146,6 +151,12 @@
 					);
 					processFileItem(fileItem);
 				}
+			} else {
+				files = files.filter((item) => item.id !== fileId);
+			}
+		} catch (error) {
+			toast.error(error);
+			files = files.filter((item) => item.id !== fileId);
 		}
 	};