From e1b3e7252c1896c04d498547908f0fce111434e1 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 15 Feb 2026 17:53:20 -0600
Subject: [PATCH] enh: preview image in file modal

---
 .../components/common/FileItemModal.svelte    | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/common/FileItemModal.svelte b/src/lib/components/common/FileItemModal.svelte
index e34c90458..dd8896c28 100644
--- a/src/lib/components/common/FileItemModal.svelte
+++ b/src/lib/components/common/FileItemModal.svelte
@@ -30,6 +30,7 @@
 
 	let isPDF = false;
 	let isAudio = false;
+	let isImage = false;
 	let isExcel = false;
 
 	let selectedTab = '';
@@ -79,6 +80,18 @@
 		(item?.name && item?.name.toLowerCase().endsWith('.m4a')) ||
 		(item?.name && item?.name.toLowerCase().endsWith('.webm'));
 
+	$: isImage =
+		(item?.meta?.content_type ?? '').startsWith('image/') ||
+		(item?.name &&
+			(item.name.toLowerCase().endsWith('.png') ||
+				item.name.toLowerCase().endsWith('.jpg') ||
+				item.name.toLowerCase().endsWith('.jpeg') ||
+				item.name.toLowerCase().endsWith('.gif') ||
+				item.name.toLowerCase().endsWith('.webp') ||
+				item.name.toLowerCase().endsWith('.svg') ||
+				item.name.toLowerCase().endsWith('.bmp') ||
+				item.name.toLowerCase().endsWith('.ico')));
+
 	$: isExcel =
 		item?.meta?.content_type === 'application/vnd.ms-excel' ||
 		item?.meta?.content_type ===
@@ -341,7 +354,16 @@
 					</div>
 				{/if}
 
-				{#if selectedTab === ''}
+				{#if isImage}
+					<div class="w-full max-h-[70vh] overflow-auto">
+						<img
+							src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`}
+							alt={item?.name ?? 'Image'}
+							class="w-full object-contain rounded-lg"
+							loading="lazy"
+						/>
+					</div>
+				{:else if selectedTab === ''}
 					{#if item?.file?.data}
 						<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
 							{(item?.file?.data?.content ?? '').trim() || 'No content'}