Enable copy and paste files in dropzone.js

Question

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?

I've commented below how you can hook up Dropzone to clipboard paste events in the browser. To answer your question why `dropZone.paste()` above isn't working: consider that the `paste()` method you've added relies on a paste event's date. Calling it directly will not have the necessary paste event so you're going to hit that first `return;` statement. — John F, Oct 23 '16 at 15:39

score 25 · Answer 1 · edited Mar 31 '22 at 09:41

25

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())
    }
  })
}

edited Mar 31 '22 at 09:41

Malaber

57
1
8

answered Oct 23 '16 at 15:37

John F

865
1
8
15

4

You are awesome – Stas Coder Jul 25 '17 at 07:49
@John Can you help ? https://codepen.io/sn4ke3ye/pen/GRppEGr I can't get my paste to work. Where do click paste ? Do I have to hover on the dropzone aread, I assume ? I tried that, and that didn't work at all. – code-8 Apr 14 '20 at 13:14
@cyber8200 You have Javascript error in your code. Comment/Remove the block `document.getElementById("submit-all").addEventListener` You dont have Element with that ID in your HTML which is restricting the execution of _document.onPaste_ block. Paste seems to be working after Removing that erroneous block. – Patel TiLAK May 20 '20 at 12:11

score 6 · Answer 2 · answered Nov 15 '15 at 18:08

This worked for me. It uses the FileReaderJS wrapper. As I am not creating the dropzone programatically, I had to store it at runtime with the init() method.

See here for the FileReaderJS part.

var myDropzone;

function checkUploadFile(filename) {
    //do some input checking here, if you want
    return true;
}

Dropzone.options.FileDropUploadZone = {
  paramName: "myDiv",
  maxFilesize: 3, // MB
  uploadMultiple: true,
  addRemoveLinks: true,
  acceptedFiles: 'image/*',
  maxFiles: 10,
  accept: function(file, done) {
      if (!checkUploadFile(file.name)) {

                done('Invalid file');
                myDropzone.removeFile(file);

      }
      else { done(); }
  },
  init: function() {
      myDropzone = this;
  }
};

$(document).ready(function () {
        FileReaderJS.setupClipboard(document.body, {
            accept: {
                'image/*': 'DataURL'
            },
            on: {
                load: function(e, file) {
                myDropzone.addFile(file);
                }
            }
        });
});

If using jQuery you can use this slightly shorter version: `jQuery("body").fileClipboard({ accept: 'image/*', on: { load: function(e, file) { dropzone.addFile(file); } } });` — Atan, Nov 18 '15 at 14:19

score -2 · Answer 3 · edited Mar 20 '19 at 06:47

var myDropzone = new Dropzone(".dropzone", { });

document.onpaste = function(event){
  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  for (index in items) {
    var item = items[index];
    if (item.kind === 'file') {
      // adds the file to your dropzone instance
      myDropzone.addFile(item.getAsFile())
    }
  }
}

Just add this code. Do not declare URL because URL also declared in PHP or coding file, paste this code in view file (HTML, PHP, etc).

Enable copy and paste files in dropzone.js

3 Answers3

Linked