title: Uploading Multiple Files with XMLHttpRequest Uploads First File with Different Names
body: <p>I am working on a page that has the ability to load multiple pdf files on a location for use later in another page.</p>
  <p>I am using JavaScript's XmlHttpRequest to enable me to send the necessary files to the location. When I was testing the functionality, I noticed something weird was happening: while the same number of files are uploaded with the correct names, when I open them up they are all the first file I selected to upload.</p>
  <p>I am baffled as to why this happens and was wondering if you could help me understand what is going on. That would be greatly appreciated.</p>
  <pre><code>function runRule(){
    if(!workOrdersUploadCtrlr.files){
      alert(&quot;No files have been selected!&quot;);
      return;
      }
    var thefile = workOrdersUploadCtrlr.files;
    var uploader = new XMLHttpRequest();
    var file = new FormData();
    for(var i=0; i &lt; thefile.length; i++) { 
      if(workOrdersUploadCtrlr.cancelledFiles.indexOf(i) &lt; 0){
          file.append('file',thefile[i]);
          uploader.onreadystatechange = function(){
              if(uploader.readyState === 4 &amp;&amp; uploader.status === 200){
                  console.log(uploader.responseText);
              }
          }
          uploader.open('POST',&quot;/url&quot;,true);
          uploader.send(file);    
      }
    } 
    
  }
  </code></pre>