title: Javascript: Upload some files synchronous from a form
body: <p>I need to upload multiple files from a form. I have an event "submit" that processes the data of the form, uploads the files and then shows a message. I need that this process syncronous to show the message when the files have been uploaded. </p>
  
  <p>I have this HTML code in the form:</p>
  
  <pre><code>&lt;form method="post" action="files/upload_project_file" id="upload_project_file_form" target="upload_project_file_iframe" enctype="multipart/form-data"&gt;
         &lt;input type="file" name="uploaded_file[]" class="multi" maxlength="0" accept="" /&gt;
         &lt;input type="hidden" name="action" value="upload_project_file"&gt;
         &lt;input type="hidden" name="id_project_files" value="" id="id_project_files"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And this Javascript code in the javascript Submit event: </p>
  
  <pre><code>        //processes data
          //...
  
          //Upload files
          var data = new FormData();     
          jQuery.each($('input[name^="uploaded_file"]')[0].files, function(i, file) {
              data.append('uploaded_file'+i, file);
          });
  
          data.append('id_project_files', $("#id_project_files").val());
  
          $.ajax({
              url: 'files/upload_project_file',
              enctype: 'multipart/form-data',
              data: data,
              cache: false,
              contentType: false,
              processData: false,
              async: false,
              type: 'POST',
              success: function(data){
                  //Clear
                  $('.filesToUpload').empty();
              }
          });
  
          //Then show the message and redirect page
          //...
  </code></pre>
  
  <p>I upload only one file but not all, I can't, I don't know why. I've seen Jquery.each runs only once.</p>