JSFiddle - React, Tailwind, and code Playground

by ohcibi

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/dropzone/4.2.0/basic.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/dropzone/4.2.0/dropzone.min.css">
<script src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.js"></script>
<script src="https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js"></script>
<form id="dropzone" class="dropzone" action="/foo-bar">

</form>

CSS

#dropzone {
  width: 400px;
  text-align: center;
  line-height: 200px;
  background: lime;
}

#dropzone.dz-drag-hover {
  background: yellow;
}

Babel + JSX

$(function() {
	const FILE_EVENT = {
    dataTransfer: { files: [{ size: 1024, type: 'image/png' }], types: ['Files'] },
    originalEvent: {
      dataTransfer: { files: [{ size: 1024, type: 'image/png' }], types: ['Files'] },
      clipboardData: { items: [{}] },
    },
  };

	//let dz = new Dropzone("#dropzone"),
  let $dz = $("#dropzone");
    
  //dz.on("drop", function() { console.dir(arguments); });
  
  $dz.trigger($.Event("dragenter", FILE_EVENT));
  $dz.trigger($.Event("drop", FILE_EVENT));
});