JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://diplomaphp.herokuapp.com/js/dropzone.min.js"></script>
<div class="file_area"></div>
JavaScript
$(".file_area").dropzone({
url: '/echo/json/', //url for the ajax to post
width: 300, //width of the div
height: 300, //height of the div
progressBarWidth: 300, //width of the progress bars
filesName: 'files', //name for the form submit
margin: 0, //margin added if needed
border: '2px dashed #ccc', //border property
background: '',
textColor: '#ccc', //text color
textAlign: 'center', //css style for text-align
lineHeight: 300, //vertical text align
text: 'Drop files here to upload', //text inside the div
uploadMode: 'single', //upload all files at once or upload single files, options: all or single
progressContainer: '', //progress selector if null one will be created
dropzoneWraper: 'nniicc-dropzoneParent', //wrap the dropzone div with custom class
files: [], //Access to the files that are droped
maxFileSize: '10MB', //max file size ['bytes', 'KB', 'MB', 'GB', 'TB']
allowedFileTypes: '*', //allowed files to be uploaded seperated by ',' jpg,png,gif
clickToUpload: true, //click on dropzone to select files old way
showTimer: true, //show time that has elapsed from the start of the upload,
removeComplete: true, //delete complete progress bars when adding new files
//functions
load: function(){
console.log("render done");
}, //callback when the div is loaded
/*progress: function(percent, index){
console.log(percent, index);
$(".progress-"+index).children().css("width", percent+"%").html(percent.toFixed(0)+"%");
}, //callback for the files procent*/
uploadDone: function(){
alert("Upload done");
}
});