如何在按钮单击事件上检查文件是否上传到 dropzone？

Question

我正在使用按钮单击事件提交设置 dropzone，现在我想检查文件是否上传到 dropzone。如果该时间没有上传文件，则显示错误，否则将文件发送到服务器。

我已将 dropzone 设置为 required 和 autoProcessQueue: false，

$(document).ready( function () {
    //initilize button click event for process dropzone.
        $("#addFile").click(function (e) {
         e.preventDefault();
         myDropzone.processQueue();
   });
});
Dropzone.options.mDropzoneOne={
      method: 'POST',
      url : "{{ route('clients.file_attachment.store') }}",
      paramName:"file",
      init: function () {
          myDropzone = this;

          // Update selector to match your button
          $("#button").click(function (e) {
              e.preventDefault();
              myDropzone.processQueue();
          });

          this.on("sending", function(file, xhr, formData) {
              formData.append("file_name", $('#file_service').val());
              formData.append("file_type", $('#doc_type').val());
              formData.append("description", $('#description').val());
              formData.append("_token", '{{csrf_token()}}');
          });

          myDropzone.on("complete", function(file) {
              myDropzone.removeFile(file);
          });
      },
      maxFiles:1,
      maxFilesize:5,
      addRemoveLinks:true,
      uploadMultiple: false,
      autoProcessQueue: false,
      success: function(file, response)
      {
          if (typeof response.true !== 'undefined')
          {
              Swal.fire({
                  position: 'center',
                  type: 'success',
                  title: response.true,
                  showConfirmButton: false,
                  timer: 1500
              });
              $('#main_form').resetForm();
          }
          if (typeof response.false !== 'undefined')
          {
              Swal.fire({
                  position: 'center',
                  type: 'error',
                  title: response.false,
                  showConfirmButton: false,
                  timer: 1500
              });
          }
      }
};

Answer 1

您需要使用事件，所以只需使用下面的这些来确定上传的成功或失败

Dropzone.options.myAwesomeDropzone = {
  init: function() {
    this.on("error", function(errorMessage) { 
      console.log(errorMessage)          
      // do whatever you need to do...
    });
    this.on("success", function(serverResponse) { 
      console.log(serverResponse)
      // do whatever you need to do...
    });
  }
};

Answer 2

我用 false 声明了布尔变量，并使用了 dropzone 的 addedfile 和 removedfile 事件。

当添加文件时，布尔变量为真，而文件被删除时，该变量为假。

然后按钮单击事件我检查布尔变量是否为真然后 myDropzone.processQueue();否则显示消息。

var uploaded_file = false;
 $("#addFile").click(function (e) {
          e.preventDefault();
          if(uploaded_file ==true)
          {
              myDropzone.processQueue();
          }else {
              Swal.fire({
                  position: 'center',
                  type: 'error',
                  title: 'First upload the file and process further.',
                  showConfirmButton: false,
                  timer: 1500
              });
          }
      });

 Dropzone.options.mDropzoneOne={
      method: 'POST',
      url : "{{ route('clients.file_attachment.store') }}",
      paramName:"file",
      init: function () {
          myDropzone = this;
          // Update selector to match your button
          $("#button").click(function (e) {
              e.preventDefault();
              if(uploaded_file ==true)
              {
                  myDropzone.processQueue();
              }
              else
              {
                  Swal.fire({
                      position: 'center',
                      type: 'error',
                      title: 'First upload the file and process further.',
                      showConfirmButton: false,
                      timer: 1500
                  });
              }
          });
          this.on("sending", function(file, xhr, formData) {
              formData.append("file_name", $('#file_service').val());
              formData.append("file_type", $('#doc_type').val());
              formData.append("description", $('#description').val());
              formData.append("_token", '{{csrf_token()}}');
          });
          myDropzone.on("complete", function(file) {
              myDropzone.removeFile(file);
          });
          this.on("addedfile", function(file) {
              uploaded_file = true;
          });
          this.on("removedfile", function(file) {
              uploaded_file = false;
          });
      },
      maxFiles:1,
      maxFilesize:5,
      addRemoveLinks:true,
      uploadMultiple: false,
      autoProcessQueue: false,
      success: function(file, response)
      {
          if (typeof response.true !== 'undefined')
          {
              Swal.fire({
                  position: 'center',
                  type: 'success',
                  title: response.true,
                  showConfirmButton: false,
                  timer: 1500
              });
              $('#main_form').resetForm();
          }
          if (typeof response.false !== 'undefined')
          {
              Swal.fire({
                  position: 'center',
                  type: 'error',
                  title: response.false,
                  showConfirmButton: false,
                  timer: 1500
              });
          }
      }
  };