How to upload an image as drag and drop?

Question

Here is my code:

$(".modal-dropzone-img").click(function() {
    $(this).siblings(".upload_image").trigger( "click" );
})

$('.upload_image').on('change', function () {
    var files = $(this)[0].files;
    processFileUpload(files, $(this).closest('form'));
    return false;
});

$('.modal-dropzone-img').on('drop dragdrop', function (e) {
    var files = e.originalEvent.dataTransfer.files;
    processFileUpload(files, $(this).closest('form'));
    return false;
});

function processFileUpload(droppedFiles, frm) {
    var uploadFormData = new FormData(frm[0]);
    uploadFormData.append("file", droppedFiles);
    console.log(droppedFiles);

    $.ajax({
        url: base_url +  frm.attr('action'),
        type: frm.attr('method'),
        data: uploadFormData,
        cache: false,
        contentType: false,
        processData: false,
        success: function (arr) {
            // File Uploaded
        }
    });
}

My code works as well when I click on the container, but it doesn't work when I drag the image into the container and leave it there. What's wrong?

Noted that the result of console.log(droppedFiles); seems good and identical for both cases (click, drag-and-drop)

Answer 1

  (function(window) {
    function triggerCallback(e, callback) {
      if(!callback || typeof callback !== 'function') {
        return;
      }
      var files;
      if(e.dataTransfer) {
        files = e.dataTransfer.files;
      } else if(e.target) {
        files = e.target.files;
      }
      callback.call(null, files);
    }
    function makeDroppable(ele, callback) {
      var input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.setAttribute('multiple', true);
      input.style.display = 'none';
      input.addEventListener('change', function(e) {
        triggerCallback(e, callback);
      });
      ele.appendChild(input);
      
      ele.addEventListener('dragover', function(e) {
        e.preventDefault();
        e.stopPropagation();
        ele.classList.add('dragover');
      });

      ele.addEventListener('dragleave', function(e) {
        e.preventDefault();
        e.stopPropagation();
        ele.classList.remove('dragover');
      });

      ele.addEventListener('drop', function(e) {
        e.preventDefault();
        e.stopPropagation();
        ele.classList.remove('dragover');
        triggerCallback(e, callback);
      });
      
      ele.addEventListener('click', function() {
        input.value = null;
        input.click();
      });
    }
    window.makeDroppable = makeDroppable;
  })(this);
  (function(window) {
    makeDroppable(window.document.querySelector('.demo-droppable'), function(files) {
   
      var output = document.querySelector('.output');
      output.innerHTML = '';
      for(var i=0; i<files.length; i++) {
        if(files[i].type.indexOf('image/') === 0) {
          output.innerHTML += '<img width="200" src="' + URL.createObjectURL(files[i]) + '" />';
        }
        output.innerHTML += '<p>'+files[i].name+'</p>';
      }
    });
  })(this);

  .demo-droppable {
    background: #08c;
    color: #fff;
    padding: 100px 0;
    text-align: center;
  }
  .demo-droppable.dragover {
    background: #00CC71;
  }

<div class="demo-droppable">
  <p>Drag files here or click to upload</p>
</div>
<div class="output"></div>

Hope this helps.