Upload file from clipboard (client side only)

Question

I'm maintaining an existing app (cannot change server-side code, only client-side js ) and was asked to add the capability to upload files from clipboard.
At present moment there is a standard file-selection form

<form id="file_form" name="file_form" enctype="multipart/form-data" method="post" action="/upload">
        <label for="selector">
            File Location
        </label>
        <input type="file" id="selector" name="selector" title="Choose file">
        <input type="submit" id="submit" value="ОК">
        <input type="button" id="cancel" onclick="cancel()" value="Cancel">
</form>

So what I need is a way to fill input#selector with the file from clipboard. I don't need progress bars, preview, image crop, etc... as simple as possible, but remember that I cannot change anything on the server.

Is there solution that would work in Chrome, FF and IE?

Most things I googled were either full of excessive functionality and required a lot of external js or server-side code changes or didn't work in anything other than Chrome...

Answer 1

Your can refere to this site: https://www.pastefile.com

the core code paste.js such as

(function ($) {
    'use strict';

    var readImagesFromEditable = function (element, callback) {
        setTimeout(function () {
            $(element).find('img').each(function (i, img) {
                getImageData(img.src, callback);
            });
        }, 1);
    };

    var getImageData = function (src, callback) {
        var loader = new Image();

        loader.onload = function () {
            var canvas = document.createElement('canvas');
            canvas.width = loader.width;
            canvas.height = loader.height;

            var context = canvas.getContext('2d');
            context.drawImage(loader, 0, 0, canvas.width, canvas.height);

            try {
                var dataURL = canvas.toDataURL('image/png');
                if (dataURL) {
                    callback({
                        dataURL: dataURL
                    });
                }
            } catch (err) {}
        };

        loader.src = src;
    };

    $.paste = function () {

        var handler = function (e) {

            var pasteBoard = $(this);

            var trigger = function (event, data) {

                if (arguments.length > 1)
                    return pasteBoard.trigger(event, data);

                return function (data) {
                    return pasteBoard.trigger(event, data);
                };
            };

            var clipboardData, text;

            if (e.originalEvent) {
                clipboardData = e.originalEvent.clipboardData;

                if (clipboardData.items) {
                    var items = clipboardData.items;

                    // Copy-paste on OSX
                    if (items.length === 2) {

                        // If a user pastes image data, there are 2 items: the file name (at index 0) and the file (at index 1)
                        // but if the user pastes plain text or HTML, /index 0/ is the data with markup and /index 1/ is the plain, unadorned text.

                        if (items[0].kind === 'string' && items[1].kind === 'file' && items[1].type.match(/^image/)) {

                            // If the user copied a file from Finder (OS X) and pasted it in the window, this is the result. This is also the result if a user takes a screenshot and pastes it.
                            // Unfortunately, you can't copy & paste a file from the desktop. It just returns the file's icon image data & filename (on OS X).

                        } else if (items[0].kind === 'string' && items[1].kind === 'string') {

                            // Get the plain text
                            items[0].getAsString(trigger('pasteText'));

                        }

                    } else {

                        var item = items[0];

                        if (!item) return;

                        if (item.type.match(/^image\//)) {

                            trigger('pasteImage', item.getAsFile());

                        } else if (item.type === 'text/plain') {

                            item.getAsString(trigger('pasteText'));

                        }
                    }

                } else {

                    if (clipboardData.types.length) {
                        text = clipboardData.getData('Text');
                        trigger('pasteText', text);
                    } else {
                        readImagesFromEditable(pasteBoard, trigger('pasteImage'));
                    }
                }

            } else if ((clipboardData = window.clipboardData)) {

                text = clipboardData.getData('Text');
                if (text) {
                    trigger('pasteText', text);
                } else {
                    readImagesFromEditable(pasteBoard, trigger('pasteImage'));
                }
            }

            setTimeout(function() {
                pasteBoard.empty();
            }, 1);
        };

        return $('<div/>')
            .prop('contentEditable', true)
            .css({
                width: 1,
                height: 1,
                position: 'fixed',
                left: -10000,
                overflow: 'hidden'
            })
            .on('paste', handler);
    };

})(jQuery);

it is not so hard to understand.