Sending multiple file input fields programmatically in one form

[Paulo Freitas]

Hello people,

I'm trying to use the blueimp/jQuery-File-Upload plugin to programmatically send more than one file input field though the same form. When user select form files, it just append them in a JS variable to further send them with fileupload('send') method, after user click on form submit button. My goal is to use the exactly synchronous form I was using in an asynchronous way. So when user click on form submit button, it prevents default action and them let jQuery-File-Upload to do the task, sending all form data and displaying overall upload progress.

I'm mnainly following these guides:

https://github.com/blueimp/jQuery-File-Upload/wiki/API

https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form

Actually it's somewhat working, but I couldn't read more than one input file on server end. In my add() event I'm pushing both data.fileInput and data.files[0] (my file inputs are single file only, but each of them use different accept attribute) to "global" variables and then on form submission I pass something like {fileInput: my_inputs, files: my_files} to fileupload('send') call.

I guess I'm not doing it the right way, since only one file is being sent. What is the correct way to programmatically send more than one file input file using a single form?

I'm also not too confident about overall upload progress... If I use progressall() event to read the upload progress will it be reporting the progress of all uploaded files?

Thank you in advance for any help! :)