CODEWITHSUNDEEP
jqueryfile-uploadblueimp
Krishna Veeramachaneni
Krishna Veeramachaneni

Reputation: 2141

Upload files using Blueimp file upload only if condition is true

I have a requirement where I need to upload multiple files using Blueimp file upload. The other requirement I have is to submit some data from a set of fields (textboxes) which are required fields.

For example, users will pick a couple of files to upload and give a name, type, date, etc and these fields are mandatory. I should submit both the files and form data together.

To do this, I performed the validation of the form fields inside the submit callback of the file upload.

$('#fileupload).fileupload({
   singleFileUploads: false,
   autoUpload: false,
   acceptFileTypes: /(jpg)|(jpeg)|(png)|(gif)|(pdf)|(doc)|(docx)$/i, 
   submit:
          {
             if(formValid())
             {
                 return true;
              }
             else
             {
                  return false;
             }
          }
});

This works great if users didn't enter the mandatory fields the first time and its shows the validation errors.

Problem is if the users correct the form after we cancelled the submit and click save, submit is not getting fired unless users select another file and hit save again. 

               <button type="button" class="btn btn-primary start">
                    <i class="icon-upload icon-white"></i>
                    <span>Save</span>
                </button>

Any ideas how I could handle this. I am ok with handling the submit in code but I am not sure how to access the "files" data in javascript code.

Upvotes: 0

Views: 664

Answers (2)

Krishna Veeramachaneni
Krishna Veeramachaneni

Reputation: 2141

I was able to fix this using a work around.

File upload uses class names to fire submit of files. They use class name "start" for the button to be used for the submit.

I made the actual "Start" button hidden and created my own button and called my own method in my angularjs controller which validates and if all validation passes it then calls the click on the actual "Start" button.

  <button type="button" class="btn btn-primary" ng-click="vm.SubmitForm()">
       <i class="icon-upload icon-white"></i>
       <span>Save</span>
  </button>

  <button type="button" id="saveButton" class="btn btn-primary start" style="display:none;">
       <i class="icon-upload icon-white"></i>
       <span>Save</span>
  </button>

And in my own method in the angular controller, I had (in typescript)

     private SubmitForm()
        {
            if (this.Validate())
            {
                $('#saveButton').click();
            }
        }

This way, the submit if only fired after all the validation process (or any other custom stuff) is done.

As far as why the submit does not get called multiple times, I think the file upload code unbinds the click event on the "Start" button when we return false in the submit handler the first time and so no more clicks are handled. Another way to solve this could be to tweak the code to rebind the "start" button click handler but that seems a lot more riskier to me than what I have working.

Thanks.

Upvotes: 1

Domain
Domain

Reputation: 11808

Can't you call formValid() for click event of save button? Like 

$("#save").on("click",function(){
    if(formValid()) {
        $('#fileupload).fileupload({
        //your all stuff
        })
    }
})

Upvotes: 0

Related Questions