Hi,
I have a big problem with JS.
I would like to add to my dropzona component a list of files on the server.
I have this code:
<div>
<form class="dropzone" id="dpz-multiple-files" action="http://localhost/dropZoneUpload.php"
method="post" enctype="multipart/form-data" style="border:1px solid #000;">
</form>
<br/>
<center>
<button id="submit-all" style="height: 40px;"> Upload All the files</button>
</center>
</div>
function getValueFromJson() {
let res = $.ajax({
url: 'http://localhost/dropZoneUpload.php?parm=1',
type: 'get',
dataType: 'json',
success: function (response) {
return response;
}
})
return res;
}
The php file returns the result:
[{"name":"index.html","size":0,"path":"..\/assets\/uploads\/index.html"},{"name":".DS_Store","size":8196,"path":"..\/assets\/uploads\/.DS_Store"},{"name":"q1.jpg","size":433382,"path":"..\/assets\/uploads\/q1.jpg"},{"name":"bla.jpg","size":193540,"path":"..\/assets\/uploads\/bla.jpg"},{"name":".htaccess","size":106,"path":"..\/assets\/uploads\/.htaccess"}]
In this way I define the truncated JS:
Dropzone.options.dpzMultipleFiles = {
uploadMultiple: true,
paramName: "file",
maxFilesize: 100,
maxFiles: 2,
createImageThumbnails: true,
acceptedFiles: ".png,.jpg,.jpeg",
clickable: true,
thumbnailWidth: 150,
thumbnailHeight: 150,
autoProcessQueue: false,
init: function () {
var submitButton = document.querySelector("#submit-all")
dpzMultipleFiles = this;
submitButton.addEventListener("click", function () {
dpzMultipleFiles.processQueue();
});
this.on('completemultiple', function (file, json) {
$('.sortable').sortable('enable');
});
this.on('success', function (file, json) {
let val = file.accepted;
if (file.accepted == true) {
//alert ('JSON - wgrałem!');
console.log(json);
$('.main_form').append("<input type='text' name='imgFiles[]' value='" + file.name + "'/>");
}
let val1 = file.name;
});
this.on("addedfile", function (file) {
var removeButton = Dropzone.createElement("<button> Remove file </button>");
// Capture the Dropzone instance as closure.
var _this = this;
//console.log(file);
removeButton.addEventListener("click", function (e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
_this.removeFile(file);
// If you want to the delete the file on the server as well,
// you can do the AJAX request here.
console.log("kasuje" + file.name);
console.log(file);
});
file.previewElement.appendChild(removeButton);
});
this.on('drop', function (file) {
console.log('File', file);
alert('bb');
});
this.on("maxfilesexceeded", function (file) {
this.removeFile(file);
});
}
};
$(function () {
$(".dropzone").sortable({
items: '.dz-preview',
cursor: 'move',
opacity: 0.5,
containment: '.dropzone',
distance: 20,
tolerance: 'pointer'
});
});
How can I display a list of my files in DropZoneJS (downloaded from PHP)?
I found an example on the Internet:
$(".dropzone").dropzone({
init: function() {
myDropzone = this;
$.ajax({
url: 'upload.php',
type: 'post',
data: {request: 2},
dataType: 'json',
success: function(response){
$.each(response, function(key,value) {
var mockFile = { name: value.name, size: value.size };
myDropzone.emit("addedfile", mockFile);
myDropzone.emit("thumbnail", mockFile, value.path);
myDropzone.emit("complete", mockFile);
});
}
});
}
});
But I do not know how to adapt it in my code. 🙁
Can I ask for help?
Does anyone know how to do it?
