I am using Dropzone plugin for multiple files drag n drop functionality. Drag n drop works fine when I am uploading pictures from my laptop / desktop.
My question is - how can I drag n drop images into dropzone from same page. Lets say I have a dropzone div and I am having another div having multiple images. I want to drag n drop those images into 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 http://codepen.io/BartSitek/pen/ZeMGjV