From 0031fb82748872c24d68efa03fa7f83b44cd8a23 Mon Sep 17 00:00:00 2001 From: silentoplayz Date: Sun, 19 Oct 2025 20:15:39 -0400 Subject: [PATCH] fix: correctly handle clipboard images in prompts The textVariableHandler was using URL.createObjectURL() for clipboard images, which created a blob URL instead of the required base64-encoded data URL. This caused an "illegal base64 data" error when sending messages with images pasted via a {{CLIPBOARD}} prompt. This commit updates the handler to use FileReader.readAsDataURL() to properly encode the image, aligning it with the existing on:paste logic. Additionally, it adds error handling for navigator.clipboard.read() to address potential permission issues in Firefox. --- src/lib/components/chat/MessageInput.svelte | 29 +++++++++++---------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte index c525dcf34c..b8539c19c8 100644 --- a/src/lib/components/chat/MessageInput.svelte +++ b/src/lib/components/chat/MessageInput.svelte @@ -168,29 +168,30 @@ return '{{CLIPBOARD}}'; }); - const clipboardItems = await navigator.clipboard.read(); + const clipboardItems = await navigator.clipboard.read().catch((err) => { + console.error('Failed to read clipboard items:', err); + return []; + }); - let imageUrl = null; for (const item of clipboardItems) { - // Check for known image types for (const type of item.types) { if (type.startsWith('image/')) { const blob = await item.getType(type); - imageUrl = URL.createObjectURL(blob); + const reader = new FileReader(); + reader.onload = (event) => { + files = [ + ...files, + { + type: 'image', + url: event.target.result as string + } + ]; + }; + reader.readAsDataURL(blob); } } } - if (imageUrl) { - files = [ - ...files, - { - type: 'image', - url: imageUrl - } - ]; - } - text = text.replaceAll('{{CLIPBOARD}}', clipboardText); }