Javascript issue, clipboardData.items and clipboardData.files are empty when pasting an image copied from the Windows clipboard when using Firefox

Question

I have Javascript code that attempts to paste an image file, which has been copied from the Windows clipboard. This code works perfectly well in Chrome and Edge but not in Firefox. It will only work in Firefox, if the image is copied from an image-editing program, e.g. Paint.

A fragment of the event handler is similar to this:

 var items = (e.clipboardData || e.originalEvent.clipboardData).items;

When executed using Firefox, the files collection in e.clipboardData is empty, as is the items collection.

I am aware that this is a duplicate question, that was asked 3 years ago: Javascript clipboardData.items and clipboardData.files are empty when pasting an image

I'm asking it again in the hope that someone knows of a work-around to this issue, or at least, an admission from Firefox that they do not support this functionality.

I'm having an issue using setting `file_input.files = e.clipboardData.files` in Firefox, specifically when I download the form and script dynamically & put them in a modal. the `FileList` is populated during the `paste` event, but as soon as the `paste` event is done, the `FileList` is empty, then submitting the form POSTs no file. If I do `submit_button.click()` DURING the `paste` event, the file gets uploaded successfully. (I'm using `.click()` instead of `form.submit()` so that my `form.onsubmit` event gets called.) It all works fine in chromium though. — Reed, Dec 22 '22 at 20:39

score 1 · Answer 1 · answered Dec 22 '22 at 21:27

I found eclipboardData.items not to be helpful and needed to use file_input.files = e.clipboardData.files.

I'm having additional issue in Firefox, specifically when using a form and script that are dynamically added to the page and shown in a modal (no iframes). I found that the File object is available DURING the paste event, but is no longer available after.

I tried using FileReader and creating a new File, but ended up with the same result. I used a (bad) workaround that auto-submits the form during the paste event, which won't be sufficient for all cases.

I have no issues with the File object later disappearing if the form & script load in the initial page request, but I want to include this just in case you're having the 'disappears after paste event' issue.

Example:

//setup the paste listener
document.body.addEventListener('paste',
    async function (e){
        const form = document.querySelector('form[action="/files/upload/"]');
        const file_input = form.querySelector('input[type="file"]');

        // display error if no files to paste
        const err = form.querySelector('.file_input_error');
        if (e.clipboardData.files.length == 0){
            err.innerText = 'No images in the clipboard. Copy an image and try again.';
            err.style.display = "block";
            return;
        }

        file_input.files = e.clipboardData.files;
        // show_file(file_input); // custom function to display the image in the form

        // fire the change event
        const changeEvent = new Event("change");
        file_input.dispatchEvent(changeEvent);
    }
);

//use a file_input change event to submit the form, so it works for both copy+paste & regularly adding the file
file_input.addEventListener('change',
    function (e){
        const form = document.querySelector('form[action="/files/upload/"]');
        form.querySelector('input[type="submit"]').click();
    }
);

is async wher is await or maybe: https://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser — user956584, Feb 18 '23 at 07:39
@user956584 Yeah I probably don't need async there & I wonder if that's why I had problems in FF. — Reed, Mar 01 '23 at 19:06

Javascript issue, clipboardData.items and clipboardData.files are empty when pasting an image copied from the Windows clipboard when using Firefox

1 Answers1