title: FormData not sending appended file
body: <p>I'm making a Javascript app for file uploading with Drag and Drop support - but I've hit a problem I've been stuck on for days.</p>
  
  <p>It seems that 'dropped' files (in my case via jQuery, <code>.on('drop', function(e){</code>) files aren't actually being sent.</p>
  
  <p>I've been browsing answer after answer on StackOverflow - <strong>PLEASE DON'T MARK AS DUPLICATE. THE DUPLICATES DO NOT HELP</strong> - I'm yet to find an aspect which I have not considered in my implementation. It's as if this solution is working for everyone else but me...</p>
  
  <p>Don't believe me? 
  <strong><a href="https://jsfiddle.net/nnut2s7f/8/" rel="nofollow noreferrer">FIDDLE HERE</a></strong></p>
  
  <p><em>(Disclaimer: obviously I have modified my solution to not use cross-domain requests, I am using an endpoint I found on Fiddle as a substitute, but it appears to present the same problem I have been experiencing - hopefully it is sufficient as the basis for this example)</em></p>
  
  <p>The issue is that the upload completes immediately - apparently it is only sending the text data and not uploading the file itself. Reviewing the request payload I see the data is not present.</p>
  
  <p><a href="https://i.stack.imgur.com/aI8SE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aI8SE.png" alt="Screenshot of request headers. Where the file data is supposed to appear, the header is blank"></a></p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>function uploadFile(file){
    console.log("uploadFile");
    var form = new FormData();
    form.append('file', file);
    form.append('hello', 'world');
    $.ajax({
      url: "/echo/js/?js=hello%20world!",
      type: "POST",
      data: form,
      processData: false,
      contentType: false,
      cache: false,
      success: function(data){
        alert("SUCCESS");
      }
    });
  }
  $(document).ready(function(){
  
    /* Disable default drag/drop browser behavior. */
    $("html").on('drop', function(e){e.preventDefault(); e.stopPropagation();});
    $("html").on('dragover', function(e){e.preventDefault(); e.stopPropagation();});
    $("html").on('dragenter', function(e){e.preventDefault(); e.stopPropagation();});
    $("html").on('dragleave', function(e){e.preventDefault(); e.stopPropagation();});
  
    $(".drop_area").on('drop', function(e){
      e.preventDefault(); 
      e.stopPropagation();
      var files = e.originalEvent.target.files || e.originalEvent.dataTransfer.files;
      console.log(files);
      for (var i = 0; i &lt; files.length; i++) {
        uploadFile(files[i])
      }
    });
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class='drop_area'&gt;
  Drop your file in this div.
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.drop_area {
    border: 1px solid black;
    background: #ffffff;
    height: 300px;
    width: 50%;
    position: relative;
  }
  </code></pre>