I have code:
Dropzone.options.dpzMultipleFiles = {
uploadMultiple: true,
paramName: "file",
maxFilesize: 100,
maxFiles: 2,
createImageThumbnails: true,
acceptedFiles: ".png,.jpg,.jpeg",
clickable: true,
thumbnailWidth: 200,
thumbnailHeight: 200,
autoProcessQueue: false,
init: function () {
var submitButton = document.querySelector("#submit-all")
dpzMultipleFiles = this;
submitButton.addEventListener("click", function () {
dpzMultipleFiles.processQueue();
});
$.ajax({
url: 'http://localhost/admin/dropZoneUpload.php?parm=1',
type: 'get',
dataType: 'json',
cache: false,
success: function (response) {
$.each(response, function (key, value) {
var mockFile = {name: value.name, size: value.size}
dpzMultipleFiles.emit('addedfile', mockFile)
dpzMultipleFiles.emit('thumbnail', mockFile, value.path)
dpzMultipleFiles.emit('complete', mockFile)
})
}
});
this.on('completemultiple', function (file, json) {
//$('.sortable').sortable('enable');
});
// this.on("thumbnail", function(file, dataUrl) {
// $('.dz-image').last().find('img').attr({width: '100%', height: '100%'});
// }),
this.on('success', function (file, json) {
if (file.accepted == true) {
$('.dz-preview').remove();
$.ajax({
url: 'http://localhost/psCMS2/admin/dropZoneUpload.php?parm=1',
type: 'get',
dataType: 'json',
cache: false,
success: function (response) {
console.log(response);
$.each(response, function (key, value) {
var mockFile = {name: value.name, size: value.size}
dpzMultipleFiles.emit('addedfile', mockFile)
dpzMultipleFiles.emit('thumbnail', mockFile, value.path)
dpzMultipleFiles.emit('complete', mockFile)
});
}
});
}
/////////
});
this.on("addedfile", function (file) {
var removeButton = Dropzone.createElement("<button> Remove file </button>");
var _this = this;
removeButton.addEventListener("click", function (e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
$.ajax({
url: 'http://localhost/psCMS2/admin/dropZoneUpload.php?removeFile=' + file.name,
dataType: 'text',
type: 'post',
cache: false,
data: $(this).serialize(),
success: function (data, textStatus, jQxhr) {
x = confirm('Do you want to delete this logo?');
if(!x) return false;
//_this.removeFile();
dpzMultipleFiles.options.maxFiles = dpzMultipleFiles.options.maxFiles + 1;
console.log("kasuje " + file.name);
alert('http://localhost/psCMS2/admin/dropZoneUpload.php?removeFile=' + file.name);
}, error: function (jqXhr, textStatus, errorThrown) {
console.log(errorThrown);
}
});
});
file.previewElement.appendChild(removeButton);
});
this.on("maxfilesexceeded", function (file) {
this.removeFile(file);
});
this.on('resetFiles', function() {
dpzMultipleFiles.removeAllFiles();
});
this.on('queuecomplete', function(){
//$('.dz-preview').remove();
});
this.on('drop', function(){
});
this.on('complete', function(){
this.removeFile(file);
});
}
};
I do not know why, but the above code does not clean my dropzone list before it loads new files.
I would like the code to work as follows: 1. loads files available on the server with php - works correctly 2. displays these files in the dropzone - works correctly 3. I add another file (success section) - the script uploads the file to the server - works correctly 4. The list of files should be cleared and files from the server should be loaded again - it does not work correctly.
The php script gives the correct list of files. How can I clear this list?
At the moment after uploading the photo I see the old list