How to send additional form fields using jquery file upload

Question

I'm using jquery file upload to upload files to server side action. However, I would like to also send additional form fields as part of the form submit. Additionally, I want the formsubmit to happen only when the "submit" button is clicked.

Is this doable using jquery file upload?

I've created a jsbin: http://jsbin.com/mozujilede/1/edit?html,js,output

Desired behavior:

• user should be alerted if they try to upload more files than allowed limit
• additional form data should be sent to the server side along with multiple files
• the form submit should happen only when user clicks submit button.

This is what I'm doing at the moment:

var maxFiles = 10;
$('#fileupload').fileupload({
    singleFileUploads: false,
    url: '/uploadUrl'
}).bind('fileuploadadd', function (e, data) {
        var input = $('#input');
        data.formData = {example: input.val()};
        var fileCount = data.files.length;
        if (fileCount > maxFiles) {
            alert("The max number of files is "+maxFiles);
            return false; 
        }
    });

Answer 1

Try This

var byButton = false;
$("#sub-but").on("click",function(){
  var inp = $("#files")[0];
  if(inp.files.length > 10){
    alert("Max number of files");
    return false;
  }
  byButton = true;
  $("#myForm").submit();
});
function validate(){
  if(!byButton)
     return false;
  byButton = false;
  return true;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" onsubmit="return validate();">
  <input type="text" placeholder="some extra items"/>
  <input type="file" id="files" multiple="multiple"/>
  <input type="button" value="Submit" id="sub-but"/>
</form>