JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://rawgithub.com/jquery/jquery-ui/master/ui/jquery.ui.widget.js"></script>
<script src="http://rawgithub.com/blueimp/jQuery-File-Upload/master/js/jquery.fileupload.js"></script>
<form action="/echo/json/" method="POST">
<input name="file1[]" type="file" multiple />
<br />
<input name="file2[]" type="file" multiple />
<br />
<input name="file3[]" type="file" multiple />
<br />
<button>send by fileupload send api</button>
</form>
JavaScript
$(document).ready(function(){
var filesList = [],
paramNames = [],
elem = $("form");
file_upload = elem.fileupload({
formData:{extra:1},
autoUpload: false,
fileInput: $("input:file"),
}).on("fileuploadadd", function(e, data){
filesList.push(data.files[0]);
paramNames.push(e.delegatedEvent.target.name);
});
$("button").click(function(e){
e.preventDefault();
file_upload.fileupload('send', {files:filesList, paramName: paramNames});
})
})