refac/perf: channel image upload behaviour

backend/open_webui/routers/files.py

@@ -179,7 +179,7 @@ def upload_file_handler(
     user=Depends(get_verified_user),
     background_tasks: Optional[BackgroundTasks] = None,
 ):
-    log.info(f"file.content_type: {file.content_type}")
+    log.info(f"file.content_type: {file.content_type} {process}")
 
     if isinstance(metadata, str):
         try:

src/lib/apis/files/index.ts

@@ -1,16 +1,26 @@
 import { WEBUI_API_BASE_URL } from '$lib/constants';
 import { splitStream } from '$lib/utils';
 
-export const uploadFile = async (token: string, file: File, metadata?: object | null) => {
+export const uploadFile = async (
+	token: string,
+	file: File,
+	metadata?: object | null,
+	process?: boolean | null
+) => {
 	const data = new FormData();
 	data.append('file', file);
 	if (metadata) {
 		data.append('metadata', JSON.stringify(metadata));
 	}
 
+	const searchParams = new URLSearchParams();
+	if (process !== undefined && process !== null) {
+		searchParams.append('process', String(process));
+	}
+
 	let error = null;
 
-	const res = await fetch(`${WEBUI_API_BASE_URL}/files/`, {
+	const res = await fetch(`${WEBUI_API_BASE_URL}/files/?${searchParams.toString()}`, {
 		method: 'POST',
 		headers: {
 			Accept: 'application/json',

src/lib/components/channel/MessageInput.svelte

@@ -421,13 +421,10 @@
 						imageUrl = await compressImageHandler(imageUrl, $settings, $config);
 					}
 
-					files = [
-						...files,
-						{
-							type: 'image',
-							url: `${imageUrl}`
-						}
-					];
+					const blob = await (await fetch(imageUrl)).blob();
+					const compressedFile = new File([blob], file.name, { type: file.type });
+
+					uploadFileHandler(compressedFile, false);
 				};
 
 				reader.readAsDataURL(file['type'] === 'image/heic' ? await convertHeicToJpeg(file) : file);
@@ -437,7 +434,7 @@
 		});
 	};
 
-	const uploadFileHandler = async (file) => {
+	const uploadFileHandler = async (file, process = true) => {
 		const tempItemId = uuidv4();
 		const fileItem = {
 			type: 'file',
@@ -461,7 +458,6 @@
 
 		try {
 			// During the file upload, file content is automatically extracted.
-
 			// If the file is an audio file, provide the language for STT.
 			let metadata = null;
 			if (
@@ -473,7 +469,7 @@
 				};
 			}
 
-			const uploadedFile = await uploadFile(localStorage.token, file, metadata);
+			const uploadedFile = await uploadFile(localStorage.token, file, metadata, process);
 
 			if (uploadedFile) {
 				console.info('File upload completed:', {
@@ -492,6 +488,7 @@
 				fileItem.id = uploadedFile.id;
 				fileItem.collection_name =
 					uploadedFile?.meta?.collection_name || uploadedFile?.collection_name;
+				fileItem.content_type = uploadedFile.meta?.content_type || uploadedFile.content_type;
 				fileItem.url = `${WEBUI_API_BASE_URL}/files/${uploadedFile.id}`;
 
 				files = files;
@@ -807,11 +804,11 @@
 							{#if files.length > 0}
 								<div class="mx-2 mt-2.5 -mb-1 flex flex-wrap gap-2">
 									{#each files as file, fileIdx}
-										{#if file.type === 'image'}
+										{#if file.type === 'image' || (file?.content_type ?? '').startsWith('image/')}
 											<div class=" relative group">
 												<div class="relative">
 													<Image
-														src={file.url}
+														src={`${file.url}${file?.content_type ? '/content' : ''}`}
 														alt=""
 														imageClassName=" size-10 rounded-xl object-cover"
 													/>

src/lib/components/channel/Messages/Message.svelte

@@ -341,8 +341,12 @@
 					<div class="my-2.5 w-full flex overflow-x-auto gap-2 flex-wrap">
 						{#each message?.data?.files as file}
 							<div>
-								{#if file.type === 'image'}
-									<Image src={file.url} alt={file.name} imageClassName=" max-h-96 rounded-lg" />
+								{#if file.type === 'image' || (file?.content_type ?? '').startsWith('image/')}
+									<Image
+										src={`${file.url}${file?.content_type ? '/content' : ''}`}
+										alt={file.name}
+										imageClassName=" max-h-96 rounded-lg"
+									/>
 								{:else}
 									<FileItem
 										item={file}