Witajcie.
Mam 2 funkcje:
$(document).ready(function(){
function getFilesToArray(){
$.ajax({
url: 'http://localhost/dropZoneUpload.php?parm=1',
type: 'get',
dataType: 'json',
success: function(response){
return response;
}
})
}
})
Dropzone.options.dpzMultipleFiles = {
// Prevents Dropzone from uploading dropped files immediately
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'
});
});
Chciałbym użyć funkcji getFilesToArray do wprowadzenia plików do Dropzone.options.dpzMultipleFiles.
Znalazłem działający przykład:
$(".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);
});
}
});
}
});
tylko nie wiem jak połączyć ten mój kod z kodem Dropzone (tak żeby działał jak przykład powyżej)
Gdyby to było istotne, to mój PHP generuje takie wyniki:
[{"Name": "q1.jpg", "size": 433382, "path", ".. \ / assets \ / uploads \ /q1.jpg"}, {"name": "bla.jpg" "size": 193540, "path", ".. \ / assets \ / uploads \ /bla.jpg"}]
Wie ktoś może jak to zrobić?