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.

Answer 1

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();
    }
);