diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index fd28d417a..6db935113 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/src/lib/components/chat/Chat.svelte
@@ -654,7 +654,7 @@
 			);
 		} else if (
 			files.length > 0 &&
-			files.filter((file) => file.type !== 'image' && file.status !== 'processed').length > 0
+			files.filter((file) => file.type !== 'image' && file.status === 'uploading').length > 0
 		) {
 			// Upload not done
 			toast.error(
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 4ab884318..08685f35b 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -93,7 +93,7 @@
 			url: '',
 			name: file.name,
 			collection_name: '',
-			status: '',
+			status: 'uploading',
 			size: file.size,
 			error: ''
 		};
@@ -121,7 +121,7 @@
 			const uploadedFile = await uploadFile(localStorage.token, file);
 
 			if (uploadedFile) {
-				fileItem.status = 'processed';
+				fileItem.status = 'uploaded';
 				fileItem.file = uploadedFile;
 				fileItem.id = uploadedFile.id;
 				fileItem.collection_name = uploadedFile?.meta?.collection_name;
@@ -433,7 +433,7 @@
 												name={file.name}
 												type={file.type}
 												size={file?.size}
-												status={file.status}
+												loading={file.status === 'uploading'}
 												dismissible={true}
 												edit={true}
 												on:dismiss={() => {
diff --git a/src/lib/components/common/FileItem.svelte b/src/lib/components/common/FileItem.svelte
index a51e3c48b..733623c17 100644
--- a/src/lib/components/common/FileItem.svelte
+++ b/src/lib/components/common/FileItem.svelte
@@ -4,6 +4,7 @@
 
 	import FileItemModal from './FileItemModal.svelte';
 	import GarbageBin from '../icons/GarbageBin.svelte';
+	import Spinner from './Spinner.svelte';
 
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
@@ -13,7 +14,7 @@
 	export let url: string | null = null;
 
 	export let dismissible = false;
-	export let status = 'processed';
+	export let loading = false;
 
 	export let item = null;
 	export let edit = false;
@@ -49,7 +50,7 @@
 	}}
 >
 	<div class="p-3 bg-black/20 dark:bg-white/10 text-white rounded-xl">
-		{#if status === 'processed'}
+		{#if !loading}
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 24 24"
@@ -66,42 +67,7 @@
 				/>
 			</svg>
 		{:else}
-			<svg
-				class=" size-5 translate-y-[0.5px]"
-				fill="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><style>
-					.spinner_qM83 {
-						animation: spinner_8HQG 1.05s infinite;
-					}
-					.spinner_oXPr {
-						animation-delay: 0.1s;
-					}
-					.spinner_ZTLf {
-						animation-delay: 0.2s;
-					}
-					@keyframes spinner_8HQG {
-						0%,
-						57.14% {
-							animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
-							transform: translate(0);
-						}
-						28.57% {
-							animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
-							transform: translateY(-6px);
-						}
-						100% {
-							transform: translate(0);
-						}
-					}
-				</style><circle class="spinner_qM83" cx="4" cy="12" r="2.5" /><circle
-					class="spinner_qM83 spinner_oXPr"
-					cx="12"
-					cy="12"
-					r="2.5"
-				/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="2.5" /></svg
-			>
+			<Spinner />
 		{/if}
 	</div>
 
diff --git a/src/lib/components/workspace/Knowledge/Collection.svelte b/src/lib/components/workspace/Knowledge/Collection.svelte
index 61e2b84d6..c34b2aecb 100644
--- a/src/lib/components/workspace/Knowledge/Collection.svelte
+++ b/src/lib/components/workspace/Knowledge/Collection.svelte
@@ -101,6 +101,19 @@
 	const uploadFileHandler = async (file) => {
 		console.log(file);
 
+		const fileItem = {
+			type: 'file',
+			file: '',
+			id: null,
+			url: '',
+			name: file.name,
+			size: file.size,
+			status: 'uploading',
+			error: ''
+		};
+
+		knowledge.files = [...(knowledge.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) => {
@@ -403,6 +416,7 @@
 
 	const onDrop = async (e) => {
 		e.preventDefault();
+		dragged = false;
 
 		if (e.dataTransfer?.files) {
 			const inputFiles = e.dataTransfer?.files;
@@ -415,8 +429,6 @@
 				toast.error($i18n.t(`File not found.`));
 			}
 		}
-
-		dragged = false;
 	};
 
 	onMount(async () => {
diff --git a/src/lib/components/workspace/Knowledge/Collection/Files.svelte b/src/lib/components/workspace/Knowledge/Collection/Files.svelte
index 5a84812c8..538c317e2 100644
--- a/src/lib/components/workspace/Knowledge/Collection/Files.svelte
+++ b/src/lib/components/workspace/Knowledge/Collection/Files.svelte
@@ -17,9 +17,10 @@
 					? ' bg-gray-50 dark:bg-gray-850'
 					: 'bg-transparent'} hover:bg-gray-50 dark:hover:bg-gray-850 transition"
 				{file}
-				name={file.meta.name}
+				name={file?.name ?? file?.meta?.name}
 				type="file"
-				size={file.meta?.size ?? ''}
+				size={file?.size ?? file?.meta?.size ?? ''}
+				loading={file.status === 'uploading'}
 				dismissible
 				on:click={() => {
 					dispatch('click', file.id);