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?

Subjectify

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. – Matazzoni

Answer 1

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

Matazzoni

You are awesome – Elder

@John Can you help ? 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. – Forwarder

@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. – German

I had to convert items into an array for .forEach to work. Works great after that – Seabury

Answer 2

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

Vertebra

If using jQuery you can use this slightly shorter version: jQuery("body").fileClipboard({ accept: 'image/*', on: { load: function(e, file) { dropzone.addFile(file); } } }); – Pork

Answer 3

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).

Folse