Ability to paste images directly from the clipboard

[wapsi]

I have been using Imgur to share images quickly, and quite often I do it by copying some image to my computer's clipboard and then just pressing CTRL+V in the Imgur's front page. This method does not work with XBackBone (at least on my setup: Firefox + Linux).

I did some research, and found out that it's not too complicated task to implement this into XBackBone, it's just couple of lines of JavaScript. I testing this by adding the following lines into web.twig file (after {% block content %} line), and then running php bin/clean cache:

<script type="text/javascript" language="javascript">
document.addEventListener('DOMContentLoaded', function () {
    document.addEventListener('paste', function (evt) {
        const clipboardItems = evt.clipboardData.items;
        const items = [].slice.call(clipboardItems).filter(function (item) {
            // Filter the image items only
            if (item.type == "undefined") {
                alert('Unsupported file type to paste from the clipboard!');
                return;
            }
            return item.type.indexOf('image') !== -1;
        });
        if (items.length === 0) {
            return;
        }

        const item = items[0];
        if (item.type != "undefined") {
            var ftypep = item.type.split('/');
            if (ftypep[0] != 'image') {
                alert('Unsupported file type to paste from the clipboard:\n' + item.type);
                return;
            }
            if (!ftypep[1].match(/^(jpg|jpeg|png|apng|gif|bmp|svg|avif|webp|ico|tiff|tif)(|\/raw)$/i)) {
                alert('Unsupported file type to paste from the clipboard:\n' + item.type);
                return;
            }
        } else {
            alert('Unsupported file type to paste from the clipboard!');
            return;
        }
        const blob = item.getAsFile();

        // Create a new FormData
        const formData = new FormData();
        formData.append('image', blob, 'Image.' + ftypep[1]);
        
        // Create new Ajax request
        const req = new XMLHttpRequest();
        req.open('POST', '/upload/web', true);
        
        // Handle the events
        req.onload = function () {
            if (req.status >= 200 && req.status < 400) {
                // Remove the placeholder text from the upload area and show the thumbnail of the uploaded image there
                const res = req.responseText;
                const resObj = JSON.parse(req.responseText);
                const resImgUrl = resObj.raw_url.replace(/\.$/, '');
                const resImgUrlThmb = resImgUrl + '?height=120';
                var dTextBox = document.getElementsByClassName("dz-message");
                dTextBox[0].style.display = "none";
                var item = document.createElement("div");
                item.classList.add('dz-preview');
                item.classList.add('dz-processing');
                item.classList.add('dz-image-preview');
                item.classList.add('dz-complete');
                item.innerHTML = '<div class="dz-image"><img data-dz-thumbnail="" alt="Pasted Image" src="' + resImgUrlThmb + '"></div><div class="dz-details"><div class="dz-size"><span data-dz-size="" style="font-size: 11px !important;">Pasted Image</span></div> <div class="dz-filename"><sp>
                document.getElementById("upload-dropzone").append(item);
            }
        };
  
        // Send it
        req.send(formData);

    });
});
</script>

And it seems to be working quite well. I know that the code needs some clean-up and refactoring (at least), and it's not a good idea to inject that HTML code (item.innerHTML) like that, but it gives an idea that maybe it's not too complicated to implement this feature to the XBackBone?