I am trying to add an image insert function to my web application using the standard procedure:
$('textarea').on('paste', function (ev) { var clipboardData = ev.originalEvent.clipboardData; $.each(clipboardData.items, function (i, item) { if (item.type.indexOf("image") !== -1) { var reader = new FileReader(); reader.readAsDataURL(item.getAsFile()); reader.addEventListener('loadend', ...); ... } }); });
A full sample can be found here: http://jsfiddle.net/t8t2zj6k/
It works correctly when I copy and paste an image from an image viewer, but when I try to do the same using a file browser (e.g. Finder on Mac or Nautilus on Linux), as a result I get only a text string from the file path or even an image with a file type icon instead of the original file.
Is there a way to properly handle pastes from a file browser?
source share