1

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

Schnodderbalken
  • 3,257
  • 4
  • 34
  • 60

0 Answers0