Upload files using Blueimp file upload only if condition is true

Question

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.

Krishna Veeramachaneni · Accepted Answer · 2014-11-19 19:28:10Z

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.

Domain · Accepted Answer · 2014-11-19 17:55:28Z

0

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

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

answered Nov 19, 2014 at 17:55

Domain

11.8k3 gold badges26 silver badges45 bronze badges

1 Comment

Krishna Veeramachaneni Over a year ago

Thanks for the reply. I don't think this will work in my case. I was able to find a solution myself that I think works for me.

Collectives™ on Stack Overflow

Upload files using Blueimp file upload only if condition is true

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related