I have a very strange behavior when I try to react on the paste
event in Chrome in order to let the user paste multiple files from the file system into my web frontend.
This is the code of the function I register to the paste
event:
let pasteFunction = function(event, callback) {
event.preventDefault();
if (!event.originalEvent && !event) {
return;
}
let regardedEvent = (event.originalEvent || event)
let items = regardedEvent.clipboardData.items;
if(items === undefined){
return;
};
Array.prototype.forEach.call(regardedEvent.clipboardData.files, function(file) {
callback(file);
});
}
Instead of iterating over the files
property I also tried this:
for (var i = 0; i < items.length; i++) {
let content = items[i]
if (content.kind !== 'file') continue;
var blob = content.getAsFile();
if (blob === null) {
continue;
}
callback(blob);
}
There are multiple problems with this approach:
- The array always only contains one file, no matter how many I copy
- It does not work with files other than images
- The file name is not preserved (always
image.png
)
When I try in Safari, everything works like charm. Does it mean that Chrome's security policies disallow me to use the clipboard API as intended? Or is there something I can do about it?
MacOS Sierra (10.12.6) - Chrome 65.0.3325.181