Dropzone js – Trascina n Trascina file dalla stessa pagina

Sto usando il plugin Dropzone per la funzionalità drag n drop di più file. Drag n drop funziona bene quando sto caricando immagini dal mio laptop / desktop.

La mia domanda è: come posso trascinare n immagini in dropzone dalla stessa pagina. Diciamo che ho un div di dropzone e sto avendo un altro div che ha più immagini. Voglio trascinare e rilasciare quelle immagini in dropzone.

this.on("drop", function(event) { var imageUrl = event.dataTransfer.getData('URL'); var fileName = imageUrl.split('/').pop(); // set the effectAllowed for the drag item event.dataTransfer.effectAllowed = 'copy'; function getDataUri(url, callback) { var image = new Image(); image.onload = function() { var canvas = document.createElement('canvas'); canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size canvas.getContext('2d').drawImage(this, 0, 0); // Get raw image data // callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, '')); // ... or get as Data URI callback(canvas.toDataURL('image/jpeg')); }; image.setAttribute('crossOrigin', 'anonymous'); image.src = url; } function dataURItoBlob(dataURI) { var byteString, mimestring if (dataURI.split(',')[0].indexOf('base64') !== -1) { byteString = atob(dataURI.split(',')[1]) } else { byteString = decodeURI(dataURI.split(',')[1]) } mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0] var content = new Array(); for (var i = 0; i < byteString.length; i++) { content[i] = byteString.charCodeAt(i) } return new Blob([new Uint8Array(content)], { type: mimestring }); } getDataUri(imageUrl, function(dataUri) { var blob = dataURItoBlob(dataUri); blob.name = fileName; myDropzone.addFile(blob); }); }); 

http://codepen.io/BartSitek/pen/ZeMGjV

Ecco la mia soluzione al problema. Le funzioni di conversione dei dati sono state trovate su Internet. Ed ecco una piccola spiegazione di cosa sta realmente accadendo:

  • Durante l'evento "drop" prendi l'URL dell'immagine che stai trascinando
  • Converti quell'URL in formato URI di dati
  • Converti URI dati in BLOB
  • Aggiungi il modulo Blob a Dropzone