feat: Handles empty file uploads gracefully

Author: allozaur

tools/server/webui/src/lib/components/app/EmptyFileAlertDialog.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import { FileX } from '@lucide/svelte';
+
+	interface Props {
+		open: boolean;
+		emptyFiles: string[];
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let { open = $bindable(), emptyFiles, onOpenChange }: Props = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+		onOpenChange?.(newOpen);
+	}
+</script>
+
+<AlertDialog.Root {open} onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title class="flex items-center gap-2">
+				<FileX class="text-destructive h-5 w-5" />
+				Empty Files Detected
+			</AlertDialog.Title>
+			<AlertDialog.Description>
+				The following files are empty and have been removed from your attachments:
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+
+		<div class="space-y-3 text-sm">
+			<div class="bg-muted rounded-lg p-3">
+				<div class="mb-2 font-medium">Empty Files:</div>
+				<ul class="text-muted-foreground list-inside list-disc space-y-1">
+					{#each emptyFiles as fileName}
+						<li class="font-mono text-sm">{fileName}</li>
+					{/each}
+				</ul>
+			</div>
+
+			<div>
+				<div class="mb-2 font-medium">What happened:</div>
+				<ul class="text-muted-foreground list-inside list-disc space-y-1">
+					<li>Empty files cannot be processed or sent to the AI model</li>
+					<li>These files have been automatically removed from your attachments</li>
+					<li>You can try uploading files with content instead</li>
+				</ul>
+			</div>
+		</div>
+
+		<AlertDialog.Footer>
+			<AlertDialog.Action onclick={() => handleOpenChange(false)}>Got it</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte

@@ -3,6 +3,7 @@
 	import { processFilesToChatUploaded } from '$lib/utils/process-uploaded-files';
 	import { serverStore } from '$lib/stores/server.svelte';
 	import { isFileTypeSupported } from '$lib/constants/supported-file-types';
+	import EmptyFileAlertDialog from '$lib/components/app/EmptyFileAlertDialog.svelte';
 	import { filterFilesByModalities } from '$lib/utils/modality-file-validation';
 	import { supportsVision, supportsAudio, serverError, serverLoading } from '$lib/stores/server.svelte';
 	import { ChatForm, ChatScreenHeader, ChatMessages, ServerInfo, ServerErrorSplash, ServerLoadingSplash, SlotsInfo } from '$lib/components/app';
@@ -30,9 +31,8 @@
 	let uploadedFiles = $state<ChatUploadedFile[]>([]);
 	let isDragOver = $state(false);
 	let dragCounter = $state(0);
-
-	// Alert Dialog state for file upload errors
 	let showFileErrorDialog = $state(false);
+	
 	let fileErrorData = $state<{
 		generallyUnsupported: File[];
 		modalityUnsupported: File[];
@@ -47,6 +47,9 @@
 
 	let showDeleteDialog = $state(false);
 
+	let showEmptyFileDialog = $state(false);
+	let emptyFileNames = $state<string[]>([]);
+
 	const isEmpty = $derived(
 		showCenteredEmpty && !activeConversation() && activeMessages().length === 0 && !isLoading()
 	);
@@ -109,7 +112,20 @@
 		message: string,
 		files?: ChatUploadedFile[]
 	): Promise<boolean> {
-		const extras = files ? await parseFilesToMessageExtras(files) : undefined;
+		const result = files ? await parseFilesToMessageExtras(files) : undefined;
+
+		if (result?.emptyFiles && result.emptyFiles.length > 0) {
+			emptyFileNames = result.emptyFiles;
+			showEmptyFileDialog = true;
+
+			if (files) {
+				const emptyFileNamesSet = new Set(result.emptyFiles);
+				uploadedFiles = uploadedFiles.filter(file => !emptyFileNamesSet.has(file.name));
+			}
+			return false;
+		}
+
+		const extras = result?.extras;
 
 		// Check context limit using real-time slots data
 		const contextCheck = await contextService.checkContextLimit();
@@ -133,7 +149,6 @@
 	}
 
 	async function processFiles(files: File[]) {
-		// First filter by general file type support
 		const generallySupported: File[] = [];
 		const generallyUnsupported: File[] = [];
 
@@ -145,20 +160,17 @@
 			}
 		}
 
-		// Then filter by model modalities
 		const { supportedFiles, unsupportedFiles, modalityReasons } =
 			filterFilesByModalities(generallySupported);
 
-		// Combine all unsupported files
 		const allUnsupportedFiles = [...generallyUnsupported, ...unsupportedFiles];
 
 		if (allUnsupportedFiles.length > 0) {
-			// Determine supported types for current model
 			const supportedTypes: string[] = ['text files', 'PDFs'];
+			
 			if (supportsVision()) supportedTypes.push('images');
 			if (supportsAudio()) supportedTypes.push('audio files');
 
-			// Structure error data for better presentation
 			fileErrorData = {
 				generallyUnsupported,
 				modalityUnsupported: unsupportedFiles,
@@ -399,6 +411,16 @@
 	</AlertDialog.Portal>
 </AlertDialog.Root>
 
+<EmptyFileAlertDialog 
+	bind:open={showEmptyFileDialog} 
+	emptyFiles={emptyFileNames}
+	onOpenChange={(open) => {
+		if (!open) {
+			emptyFileNames = [];
+		}
+	}}
+/>
+
 <style>
 	.conversation-chat-form {
 		position: relative;

tools/server/webui/src/lib/utils/convert-files-to-extra.ts

@@ -1,4 +1,4 @@
-import { convertPDFToImage, convertPDFToText, isPdfMimeType } from "./pdf-processing";
+import { convertPDFToImage, convertPDFToText } from "./pdf-processing";
 import { isSvgMimeType, svgBase64UrlToPngDataURL } from "./svg-to-png";
 import { isWebpMimeType, webpBase64UrlToPngDataURL } from "./webp-to-png";
 import { config, settingsStore } from '$lib/stores/settings.svelte';
@@ -24,16 +24,17 @@ function readFileAsBase64(file: File): Promise<string> {
     });
 }
 
-// Note: This function is now redundant since we use getFileTypeCategory(file.type) === FileTypeCategory.AUDIO
-// Keeping for backward compatibility, but consider removing in future cleanup
-function isAudioMimeType(mimeType: string): boolean {
-    return getFileTypeCategory(mimeType) === FileTypeCategory.AUDIO;
+
+export interface FileProcessingResult {
+    extras: DatabaseMessageExtra[];
+    emptyFiles: string[];
 }
 
 export async function parseFilesToMessageExtras(
     files: ChatUploadedFile[]
-): Promise<DatabaseMessageExtra[]> {
+): Promise<FileProcessingResult> {
     const extras: DatabaseMessageExtra[] = [];
+    const emptyFiles: string[] = [];
 
     for (const file of files) {
         if (getFileTypeCategory(file.type) === FileTypeCategory.IMAGE) {
@@ -151,7 +152,11 @@ export async function parseFilesToMessageExtras(
             try {
                 const content = await readFileAsText(file.file);
 
-                if (isLikelyTextFile(content)) {
+                // Check if file is empty
+                if (content.trim() === '') {
+                    console.warn(`File ${file.name} is empty and will be skipped`);
+                    emptyFiles.push(file.name);
+                } else if (isLikelyTextFile(content)) {
                     extras.push({
                         type: 'textFile',
                         name: file.name,
@@ -166,5 +171,5 @@ export async function parseFilesToMessageExtras(
         }
     }
 
-    return extras;
+    return { extras, emptyFiles };
 }

tools/server/webui/src/lib/utils/text-files.ts

@@ -24,7 +24,7 @@ export async function readFileAsText(file: File): Promise<string> {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
         reader.onload = (event) => {
-            if (event.target?.result) {
+            if (event.target?.result !== null && event.target?.result !== undefined) {
                 resolve(event.target.result as string);
             } else {
                 reject(new Error('Failed to read file'));