processQueue не работает, если в Dropzone не добавлено новое изображение - PullRequest
Новая
       10

processQueue не работает, если в Dropzone не добавлено новое изображение

0 голосов
/ 30 ноября 2018

Я включил Dropzone в мою форму, которая содержит другие данные.Для процесса создания это работает хорошо.Изображения можно перетаскивать в поле Dropzone, а когда нажимается кнопка «Сохранить_кнопку», изображения передаются вместе с остальными данными формы.

Я также использовал эту же страницу для редактированияпроцесс, чтобы позволить пользователям редактировать представленные изображения и другие соответствующие данные.Загруженные изображения извлекаются и отображаются в Dropzone через кодовый блок «Блокировать загруженные изображения» ниже.

Проблема возникает здесь.Если пользователь не добавляет новое изображение в Dropzone, то нажатие на кнопку «Сохранить_кнопку» не приведет к загрузке формы!Я думаю, что processQueue ничего не делает, потому что очередь изображений пуста и, следовательно, не отправляет форму.

Вопрос: Есть ли способ заставить форму быть отправленной?Например, вызвать событие «sendmultiple», чтобы можно было отправить другие данные формы? 

Dropzone.prototype.defaultOptions.dictDefaultMessage = "Drop images here to upload<br>(.jpg, .jpeg, .gif, .png)";

Dropzone.options.myDropzone = {
url: '/addpage',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 1,
acceptedFiles: '.png,.jpg,.jpeg,.gif',
addRemoveLinks: true,
init: function () {
   dzClosure = this;
   myDropzone1 = this;

   //Block with uploaded images, start
   var imagesList = ["http://www/path/to//image1.jpg"]
   
   for (var i = 0; i < imagesList.length; i++) {
       var mockFile = { id: i, name: "Image " + i, filename: imagesList[i], size: 1, type: "image/jpg", status: Dropzone.QUEUED, accepted: true, upload: {} };
       myDropzone1.emit("addedfile", mockFile);

       myDropzone1.createThumbnailFromUrl(mockFile, imagesList[i], "", "");
       myDropzone1.files.push(mockFile);
       myDropzone1.emit("complete", mockFile);
   }
   //Block with uploaded images, end

   document.getElementById("Save_button").addEventListener("click", function (e) {

       e.preventDefault();
       e.stopPropagation();

       var success = true;

       if (!someFormValuesValidation())
           success = false;

       if (!success) {
           alert("Form validation failed, please check values.");
           return false;
       }
       else {
           dzClosure.processQueue();
       }
   });

   this.on("sendingmultiple", function (data, xhr, formData) {
       $('#loading').show();

       formData.append("Title", jQuery("#Title").val());
       formData.append("Price", jQuery("#Price").val());
       formData.append("Quantity", jQuery("#Quantity").val());
   });

   this.on("successmultiple", function (file, result) {
       if (result.Response == "0") {
           alert("Success!");
       } else {
           alert("There is a problem: " + result.Error);
       }
       file.status = Dropzone.QUEUED;
       myDropzone1.status = Dropzone.QUEUED;

       $('#loading').hide();
   });

   this.on("maxfilesexceeded", function (file) {
       this.removeFile(file);
       alert("Can't add more images. Maximum only 5 images");
   });

}
}
<form action="/addpage" autocomplete="off" id="Form" method="post" enctype="multipart/form-data">
<div class="dropzone" id="my-dropzone">
    <div class="fallback">
    <input name="Images" type="file" multiple />
    </div>
</div>
<button type="button" class="save-btn" id="Save_button">Save</button>
</form>

1 Ответ

0 голосов
/ 05 декабря 2018

Я думаю, processQueue ничего не делает, потому что очередь изображений пуста и, следовательно, не отправляет форму.

Да, очередь действительно пуста - запустите console.log( myDropzone1.getQueuedFiles() )на консоли браузера, и вы получите пустой массив ([]).

Есть ли способ заставить форму быть отправленной?

Inваш mockFile, установите status на Dropzone.QUEUED: 

var mockFile = { ..., status: Dropzone.QUEUED, ... };

И mockFile должен иметь элемент upload, который может быть просто {} следующим образом: 

var mockFile = { ..., status: Dropzone.QUEUED, accepted: true, upload: {} };

ОБНОВЛЕНИЕ

Предыдущий ответ фактически был предназначен для того, чтобы форма могла быть просто отправлена ​​ без двоичных данных изображения - то есть * 1032Элемент * status и upload предназначен только для того, чтобы работала кнопка «Сохранить».

Но если вы действительно намереваетесь загрузить все изображения в массиве imagesList, тогда mockFile должен бытьдопустимый File объект / экземпляр, и я бы использовал Dropzone.prototype.addFile() для добавления файла в Dropzone.

И по этой причине ваш for loop couБудет так же просто, как: 

for (var i = 0; i < imagesList.length; i++) {
  let name = imagesList[i];
  name = name.substring(name.lastIndexOf('/') + 1);

  fetch(imagesList[i])
    .then(res => res.blob())
    .then(blob => {
      let file = new File([blob], name, blob);
      myDropzone1.addFile(file);
    });
}
...