title: Uploading multiple files from multiple input fields programatically - blueimp jquery fileupload
body: <p>I'm trying to use the blueimp/jQuery-File-Upload plugin to store images in a server via a PHP uploads handler. I've been following this posts in order to make it work:</p>
  
  <ul>
  <li><a href="https://github.com/blueimp/jQuery-File-Upload/wiki/API" rel="nofollow noreferrer">https://github.com/blueimp/jQuery-File-Upload/wiki/API</a></li>
  <li><a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form" rel="nofollow noreferrer">https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form</a></li>
  <li><a href="https://stackoverflow.com/questions/25897989/sending-multiple-file-input-fields-programmatically-in-one-form">Sending multiple file input fields programmatically in one form</a></li>
  <li><a href="https://stackoverflow.com/questions/14896468/blueimp-plugin-jquery-file-upload-how-to-use-the-fileinput-option-so-that-file">BlueImp Plugin jQuery File Upload : How to use the fileInput option so that fileupload() can bind new dynamically added inputs?</a></li>
  </ul>
  
  <p>The file upload form I'm using, has multiple dynamically added file input fields. As an example, after adding 3 fields:</p>
  
  <pre><code>&lt;form id="entry_form" class="entry-form" role="form"&gt;
      &lt;div class="entry"&gt;
          ...
          &lt;input type="file" class="file-upload" name="files0[]" multiple&gt;
          ...
      &lt;/div&gt;
      &lt;div class="entry"&gt;
          ...
          &lt;input type="file" class="file-upload" name="files1[]" multiple&gt;
          ...
      &lt;/div&gt;
      &lt;div class="entry"&gt;
          ...
          &lt;input type="file" class="file-upload" name="files2[]" multiple&gt;
          ...
      &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;div class="col-xs-6 col-sm-4"&gt;
      &lt;button id="save_btn" class="btn btn-lg btn-block"&gt;Save&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can successfully upload files from this fields using the following JS code:</p>
  
  <pre><code>var imageUpload = {
      init: function (selector, context, options) {
  
          selector = selector || '.file-upload';
          context = context || $('.entry');
  
          var filesList = [];
          var url = site_url + '/doUpload';
  
          $(selector).fileupload(options || {
              url: url,
              type: 'POST',
              dataType: 'json',
              autoUpload: false,
              singleFileUploads: false,
              formData: {},
  
              add: function (e, data) {
                  for (var i = 0; i &lt; data.files.length; i++) {
                      filesList.push(data.files[i]);
                  }
  
                  return false;
              }
          }).on('change', function () {
              $(this).fileupload('add', {
                  fileInput: $(selector)
              });
          });
  
          $('#save_btn').click(function (e) {
              e.preventDefault();
  
              $(selector).fileupload('send', {files: filesList});
          });
      }
  };
  </code></pre>
  
  <p>As you can see in the 'add:' event callback and the 'send' method near the end, I'm sending all files in one POST to the server, this is the intended functionality.
  My problem is that the $_FILES server side variable is reaching the server in the following way:</p>
  
  <pre><code>$_FILES array[1]        
      [files0]    array[1]        
          [name]  array[1]        
              [0] string  "Collapse.png"  
              [1] string  "Expand.png"    
              [2] string  "Map.jpg"
  </code></pre>
  
  <p>In this way, I can't relate which image was added to which input. So, what I'd need to get to the server is something like this:</p>
  
  <pre><code>$_FILES array[3]        
      [files0]    array[1]        
          [name]  array[1]        
              [0] string  "Collapse.png"  
      [files1]    array[1]        
          [name]  array[1]        
              [0] string  "Expand.png"    
      [files2]    array[1]        
          [name]  array[1]        
              [0] string  "Map.jpg"
  </code></pre>
  
  <p>I have been looking for a solution to this for a while and haven't reached the desired result. Can you help me please?</p>
  
  <p>Thanks!</p>