Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Enable copy and paste files in dropzone.js

I am using dropzone.js. I want to implement the "Copy & Paste" feature in it.

What I tried is:

Inside dropzone.js:

paste: function(e) {
    Dropzone.prototype.emit("paste");
}

Dropzone.prototype.paste = function(e) {
    var items, _ref;
    if ((e != null ? (_ref = e.clipboardData) != null ? _ref.items : void 0 : void 0) == null) {
        return;
    }
    this.emit("paste", e);
    items = e.clipboardData.items;
    if (items.length) {
        return this._addFilesFromItems(items);
    }
};

Page level script:

<script>
    var dropZone = Dropzone.forElement('#dropzone1');
    dropZone.paste();
</script> 

The above is not calling paste:function(e){..}

How to rectify it?

like image 710
Vikash Avatar asked Sep 10 '15 05:09

Vikash


1 Answers

If you don't want to use other JS libraries, you can integrate dropzone with a paste event fairly easily by retrieving the data as a file from the paste event:

// create dropzone however you wish
const myDropzone = new Dropzone("div#element", { url: "/path/to/upload"});
// add paste event listener to the page
document.onpaste = function(event){
  const items = (event.clipboardData || event.originalEvent.clipboardData).items;
  items.forEach((item) => {
    if (item.kind === 'file') {
      // adds the file to your dropzone instance
      myDropzone.addFile(item.getAsFile())
    }
  })
}
like image 118
John F Avatar answered Sep 20 '22 16:09

John F