JSFiddle - React, Tailwind, and code Playground
by Renjith VR
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<div id="disb_drop" class="drop_zone">
<div id="receipt"></div>
<form action="#" class='dropzone' id='fbDropZone'></form>
</div>
CSS
.drop_zone {
width: 50%;
border: 2px solid #000;
border-radius: 5px;
padding: 25px;
text-align: center;
color: #BBB;
}
.removeAllImages {
cursor:pointer;
}
JavaScript
window.Dropzone;
Dropzone.autoDiscover = true;
$('#fbDropZone').dropzone = {
init: function() {
fbDropZone = this;
},
url : "folder/upload",
acceptedFiles: "image/*",
addRemoveLinks: true,
dictDefaultMessage: "Drop files here to upload or Click here",
enqueueForUpload: true,
autoProcessQueue : false,
};