diff --git a/web/routes/uix/components/file-upload/+page.svelte b/web/routes/uix/components/file-upload/+page.svelte
index f35f5b9ef..a99591a58 100644
--- a/web/routes/uix/components/file-upload/+page.svelte
+++ b/web/routes/uix/components/file-upload/+page.svelte
@@ -69,7 +69,19 @@
 
 	function createDemoFile(name: string, type: string, size: number): File {
 		if (typeof File !== 'undefined') {
-			return new File([new Uint8Array(size)], name, { type, lastModified: Date.now() });
+			// For image types we ship a valid 1x1 PNG so the preview renders
+			// instead of showing the user-agent broken-image icon. atob is
+			// browser-only so this lives inside the runtime check.
+			const transparentPng = Uint8Array.from(
+				atob(
+					'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII='
+				),
+				(c) => c.charCodeAt(0)
+			);
+			const bytes = type.startsWith('image/')
+				? new Uint8Array([...transparentPng, ...new Uint8Array(Math.max(0, size - transparentPng.length))])
+				: new Uint8Array(size);
+			return new File([bytes], name, { type, lastModified: Date.now() });
 		}
 		return {
 			name,