file-upload demo: ship valid PNG bytes so previews render

The demo seeded `cover.png` with `new Uint8Array(size)` — empty
bytes. `URL.createObjectURL` then handed a blob the browser couldn't
decode as PNG, so the preview rendered the user-agent broken-image
icon next to the row.

Fix: when the demo file type starts with `image/`, prepend a valid
1x1 transparent PNG header before the size-padding bytes. The
browser decodes a 1px image cleanly and the preview slot stays
empty-looking (which is the intended visual) instead of showing a
broken-image affordance. atob lives inside the `typeof File`
runtime check so SSR doesn't choke on it.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
active-uix
dev 5 months ago
parent e372640f0f
commit 491e4be75c

@ -69,7 +69,19 @@
function createDemoFile(name: string, type: string, size: number): File { function createDemoFile(name: string, type: string, size: number): File {
if (typeof File !== 'undefined') { 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 { return {
name, name,

Loading…
Cancel
Save

Powered by TurnKey Linux.