feat: file upload error handling

backend/apps/rag/main.py

@@ -28,6 +28,7 @@ from pydantic import BaseModel
 from typing import Optional
 
 import uuid
+import time
 
 from utils.misc import calculate_sha256
 from utils.utils import get_current_user

src/lib/components/chat/MessageInput.svelte

@@ -91,6 +91,26 @@
 		}
 	};
 
+	const uploadDoc = async (file) => {
+		console.log(file);
+
+		const doc = {
+			type: 'doc',
+			name: file.name,
+			collection_name: '',
+			upload_status: false,
+			error: ''
+		};
+
+		files = [...files, doc];
+		const res = await uploadDocToVectorDB(localStorage.token, '', file);
+
+		if (res) {
+			doc.upload_status = true;
+			files = files;
+		}
+	};
+
 	onMount(() => {
 		const dropZone = document.querySelector('body');
 
@@ -123,19 +143,7 @@
 					if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
 						reader.readAsDataURL(file);
 					} else if (['application/pdf', 'text/plain', 'text/csv'].includes(file['type'])) {
-						console.log(file);
+						uploadDoc(file);
-						const res = await uploadDocToVectorDB(localStorage.token, '', file);
-
-						if (res) {
-							files = [
-								...files,
-								{
-									type: 'doc',
-									name: file.name,
-									collection_name: res.collection_name
-								}
-							];
-						}
 					} else {
 						toast.error(`Unsupported File Type '${file['type']}'.`);
 					}
@@ -241,20 +249,8 @@
 							if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
 								reader.readAsDataURL(file);
 							} else if (['application/pdf', 'text/plain', 'text/csv'].includes(file['type'])) {
-								console.log(file);
+								uploadDoc(file);
-								const res = await uploadDocToVectorDB(localStorage.token, '', file);
-
-								if (res) {
-									files = [
-										...files,
-										{
-											type: 'doc',
-											name: file.name,
-											collection_name: res.collection_name
-										}
-									];
 								filesInputElement.value = '';
-								}
 							} else {
 								toast.error(`Unsupported File Type '${file['type']}'.`);
 								inputFiles = null;
@@ -281,6 +277,7 @@
 											class="h-16 w-[15rem] flex items-center space-x-3 px-2.5 dark:bg-gray-600 rounded-xl border border-gray-200 dark:border-none"
 										>
 											<div class="p-2.5 bg-red-400 text-white rounded-lg">
+												{#if file.upload_status}
 													<svg
 														xmlns="http://www.w3.org/2000/svg"
 														viewBox="0 0 24 24"
@@ -296,6 +293,49 @@
 															d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"
 														/>
 													</svg>
+												{:else}
+													<svg
+														class=" w-6 h-6 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
+													>
+												{/if}
 											</div>
 
 											<div class="flex flex-col justify-center -space-y-0.5">

src/routes/(app)/+page.svelte

@@ -124,6 +124,14 @@
 		} else if (messages.length != 0 && messages.at(-1).done != true) {
 			// Response not done
 			console.log('wait');
+		} else if (
+			files.length > 0 &&
+			files.filter((file) => file.upload_status === false).length > 0
+		) {
+			// Upload not done
+			toast.error(
+				`Oops! Hold tight! Your files are still in the processing oven. We're cooking them up to perfection. Please be patient and we'll let you know once they're ready.`
+			);
 		} else {
 			// Reset chat message textarea height
 			document.getElementById('chat-textarea').style.height = '';