Image Upload Drag & Drop

by dshilkret

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css">
<form id="dropzone-img" class="dropzone dz-clickable">
  <div class="dz-default dz-message">
    <span>Drag and drop files here or click to open your file finder.</span>
  </div>
</form>

JavaScript

Dropzone.autoDiscover = false;

$(function() {
  if ($('#dropzone-img').length) {

    Dropzone.options.dropzoneImg = {

      uploadMultiple: true,
      clickable: true,
      forceFallback: false, // make true to debug unsupported browsers
      dictFallbackMessage: 'Your browser does not support drag and drop file uploads.',
      dictFallbackText: 'Please use the form below to upload your files.',

      init: function() {
        console.log('hit init function');
        this.on('drop', function() {
          console.log('image dropped');
        });
      },

      accept: function(file) {
        console.log(file);
      }

    }

    var dropzoneImg = new Dropzone('form#dropzone-img', {
      url: '#'
    });
    console.log(dropzoneImg);

  }
});