Pasting text and then pasting image results in images not pasting

[douglasg14b]

I am using the pastableNonInputable bit. If I paste an image first, it works great. However, if I paste text (Which I do nothing with), then paste an image the image does not paste. Neither the pasteImageError or pasteImage events fire.

[layerssss]

Hi , on which browser did you run into that?

[douglasg14b]

@layerssss Chrome 58.

I can't reproduce it 100% of the time, but it happens more often than not. After it happens, only a full page reload seems to fix it.

[boboxiaodd]

@layerssss Safari

[boboxiaodd]

i change the code, and safari work, but chrome paste images from clipboard don't work.

$('#textarea').on('paste', function (event) {
        var clipboardData, found , ref;
        found = false;
        if (event.clipboardData && event.clipboardData.items && event.clipboardData.items.length > 0) {
            clipboardData = event.clipboardData;
            for (var i = 0; i < clipboardData.items.length; i++) {
                var file;
                if (found) {
                    event.preventDefault();
                    return;
                }
                ref = clipboardData.items[i];
                if (ref.type.match(/^image\//)) {

                    file = ref.getAsFile();    //Chrome will undefined why?
                    found =  true;
                    var reader = new FileReader();
                    reader.onload = function (event) {
                        parseData(event.target.result);
                    };
                    try {
                        reader.readAsDataURL(file);
                    } catch (error) {
                        console.log(error.toString());
                    }
                }
            }
        }
        else {   //safari use this block
            clipboardData = event.clipboardData;
            console.log(clipboardData.getData("Text"));
            if (clipboardData.getData("Text")) {
                return true;
            }
            var HiddenEditable = $('<div />').attr('contenteditable', true).attr('aria-hidden', true).attr('tabindex', -1).css({
                width: 1,
                height: 1,
                position: 'fixed',
                left: -100,
                overflow: 'hidden'
            });
            $("body").append(HiddenEditable);
            HiddenEditable.focus();
            console.log(HiddenEditable.find("img").eq(0).attr("src"));
            setTimeout(function () {
                parseData(HiddenEditable.find("img").eq(0).attr("src"));
                HiddenEditable.find("img").eq(0).remove();
            }, 1);
        }
    }
);

[layerssss]

Hi @boboxiaodd if you have latest available Safari (10.1), it should work with the .files API (without changing the source code). Otherwise, if you try the contenteditable hack on Safari, you will only get a fake-webkit-uri://.... url, which means almost nothing (you can only display it on webpage, but can not get data out from it because of security reason)