In my Spring MVC application, I have implemented a Dropzone, using the dropzone.js library. This works great and my JavaScript config is pasted below.
Dropzone.options.frmTarget = {
autoProcessQueue: false,
paramName: 'file',
clickable: true,
maxFilesize: 20,
uploadMultiple: false,
parallelUploads: 10,
maxFiles: 20,
addRemoveLinks: true,
acceptedFiles: '.png,.jpg,.pdf,.doc,.docx,.xls, .xlsx,.xml,.bmp,.msg,.txt',
dictDefaultMessage: 'Drag files or click here to select',
init: function () {
var myDropzone = this;
myDropzone.removeAllFiles();
// Update selector to match your button
$("#button").click(function (e) {
e.preventDefault();
myDropzone.processQueue();
});
$("#button1").click(function (e) {
e.preventDefault();
myDropzone.removeAllFiles();
});
}
}
There is one small part of the behaviour that I would like to change if possible. I have set autoProcessQueue to false, which means that the files are not uploaded as soon as they are dropped into the Dropzone. Instead, the whole queue is processed when the user clicks a button.
I have also set addRemoveLinks to true. This means that when I add my files to the Dropzone, I have the option of removing them individually before processing the queue by clicking the "Remove File" link that appears below the icon of each file. When the queue is being processed, the link text changes to "Cancel Upload" and it changes back to "Remove File" after uploading the file. This can be seen in the image below, which shows my Dropzone after an upload event.
While it is really useful to have the "Remove File" link before processing the queue and the "Cancel Upload" link during upload, I would like to not display the "Remove File" link after upload. Ideally, there would be nothing at all, or text (not a link) saying "File processed". I would be very grateful for any advice on the best way to do this, many thanks for reading.