JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/dropzone/3.8.4/dropzone.min.js"></script>
<div id="droparea">
<p>Select a fruit and then drag fruit image file onto this area</p>
<label for="fruit">Selected fruit:</label>
<input type="text" id="fruit" value=""> <span id="basket"></span>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Pear</li>
</ul>
<p id="info">Dropzone is not ready</p>
<p id="error"></p>
<div id="preview"></div>
</div>
CSS
#error {
color: red;
}
#info {
color: green;
}
#droparea {
border: 1px solid lightblue;
padding: 10px;
}
li:hover {
cursor: pointer;
background-color: lightblue;
}
#preview {
display: none;
}
JavaScript
// Create options object for Dropzone
var myDropzoneOptions = {
url: '.',
clickable: true,
previewsContainer: '#preview',
createImageThumbnails: false,
init: function () {
$('#info').text('Dropzone is ready');
this.on('sending', function (file, xhr, formData) {
var fruit = $('#fruit').val();
formData.append('fruit', fruit);
});
},
accept: function (file, done) {
var fruit = $('#fruit').val();
if (fruit) {
$('#info').text('Uploading ' + file.name + ' (size ' + file.size + ') as new ' + fruit);
done('pretend upload file');
} else {
$('#error').text('You must select fruit first');
done('error');
}
}
};
// Init Dropzone drag-and-drop file upload plugin
var myDropzone = new Dropzone('#droparea', myDropzoneOptions);
// Clear fruit selection
$(document).on('click', '#clear', function () {
$('#basket').html('');
$('#fruit').val('');
});
// A fruit is selected
$('ul>li').on('click', function () {
var fruit = $(this).html();
$('#basket').html($('<button id="upload">Upload ' + fruit + '</button>' + '<button id="clear">Clear selection</button>'));
$('#fruit').val(fruit);
$('#error').text('');
myDropzone.destroy();
myDropzoneOptions.clickable = '#upload';
myDropzone = new Dropzone('#droparea', myDropzoneOptions);
});