JSFiddle - React, Tailwind, and code Playground
HTML
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"></script>
JavaScript
$(document).ready(function(){
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#DropZoneFiddle", {
url: "/admin/upload/",
maxFiles:1,
queueLimit:1,
acceptedFiles:".zip",
init: function() {
this.on("maxfilesexceeded", function(file) {
this.removeAllFiles();
this.addFile(file);
})
this.on("error", function(file){if (!file.accepted) this.removeFile(file);});
},
previewsContainer:"#previewsContainer",
sending:function(file, xhr, formData){
formData.append('name',$("#name").val() );
formData.append('description',$("#description").val() );
},
success: function(file, response){
alert(response);
},
autoProcessQueue: false,
});
$('#imgsubbutt').click(function(){
myDropzone.processQueue();
});
});