Search code examples
jquerydropzone

How to check file uploaded or not into dropzone on button click event?


I'm setup the dropzone with button click event submit it's, Now i want to check file uploaded or not into dropzone. If file is not uploaded that time show error otherwise send file to server.

I was set dropzone with required and 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
              });
          }
      }
};

Solution

  • I was declare boolean variable with false and use addedfile and removedfile event of dropzone.

    When file is added that time boolean variable is true and file is removed the variable was false.

    Then button click event i was check boolean variable was true then myDropzone.processQueue(); otherwise show message.

    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
                  });
              }
          }
      };