Allow pasting screenshots

Feature Requests
1

Hello,

Can we add a feature to allow pasting of screenshots into chats? This is very helpful for users when they are asking Pickaxe about certain questions. In ChatGPT for example, you can paste a picture and ask it questions. It’s a great feature to have!

2

We allow users to upload or add a photo. You just have to be sure your chatbot is vision-enabled (meaning it uses an GPT-4 model).

3

Thanks Mike. I’ve tested that it can read the attachment, but what I’m saying is to paste a screenshot directly and hitting enter, instead of attaching a picture. Is that possible?

image
image1920×927 62.8 KB

1 Like
4

Ah, I see. I don’t think it’s currently supported. We can look into how difficult it would be.

2 Likes
5

Hello @mikeze , following up on this. Are there any plans to allow this soon? Also, can we allow other models like Claude to view images?

1 Like
6

For anyone still after pasting images directly into chat, adding the code injection snippet below to the footer of the page worked for my studios to allow users to submit screenshots.

It works by submitting pasted pictures to the same input as the usual image upload button.

<script>
// We still wait for the page to be broadly ready.
document.addEventListener('DOMContentLoaded', function() {
    'use strict';

    // These selectors remain the same.
    const fileInputSelector = 'input#file-upload';
    const pasteTargetSelector = 'textarea[placeholder="What would you like to talk about?"]';
    
    // This is the key change: We attach the listener to the entire document.
    document.addEventListener('paste', function(event) {
        
        // We check if the element that triggered the paste event (event.target)
        // matches the selector for our chat box. If not, we do nothing.
        if (!event.target.matches(pasteTargetSelector)) {
            return;
        }

        // The rest of the logic can now run, because we know the event came from the correct element.
        
        // We find the file input at the moment it's needed.
        const fileInput = document.querySelector(fileInputSelector);
        if (!fileInput) {
            console.error("Paste-to-Upload: Could not find the file input element at the time of paste.");
            return;
        }

        const items = (event.clipboardData || window.clipboardData).items;
        let imageFile = null;

        for (const item of items) {
            if (item.type.startsWith('image/')) {
                imageFile = item.getAsFile();
                break;
            }
        }

        if (imageFile) {
            event.preventDefault();
            console.log("Image pasted into correct target. Injecting into file input...");

            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(imageFile);
            fileInput.files = dataTransfer.files;

            const changeEvent = new Event('change', {
                bubbles: true,
                cancelable: true
            });
            fileInput.dispatchEvent(changeEvent);

            console.log('Success! "change" event dispatched.');
        }
    });

    console.log("✅ Resilient Paste-to-Upload is now active.");
});
</script>