title: HTML5 file upload: what should be append to FormData
body: <p>This post looks promising, but I can't figure out what is <code>blobFile</code> in the code? Where can I get this variable?  </p>
  
  <p><a href="https://stackoverflow.com/questions/9622901/how-to-upload-a-file-using-jquery-ajax-and-formdata">How to upload a file using jQuery.ajax and FormData</a><br>
  <br><br>
  <em>Extra question:</em>  </p>
  
  <p>I assume that <code>FormData</code> object contains data in <strong>ALL</strong> input fields <strong>including</strong> file input. But it seems not the case. Otherwise we don't need to append the file data to <code>FormData</code>. Could anyone explain why file input is not included in the <code>FormData</code>?</p>
  
  <p>Also, I use Django backend, which by convention access uploaded files in <code>request.FILES</code>. How can I put file data in <code>request.FILES</code> rather than <code>request.POST</code> with <code>$.ajax()</code>?</p>
  
  <p><strong>EDIT</strong>
  I just figured out that NOTHING is in my <code>request.POST</code> and <code>formData</code> in empty. can't figure out why.. Here is relevant code:</p>
  
  <p>// html</p>
  
  <pre><code>&lt;form action="" method="POST" enctype="multipart/form-data"&gt;{% csrf_token %}
      &lt;span class='file-name' id='file-name-1'&gt;FILE 1&lt;/span&gt;
      &lt;input type="file" id='id_image'&gt;
      &lt;input class="browse-click" type="button" value="+"/&gt;
      &lt;input id="send" type="submit" value="change"&gt;
  &lt;/form&gt; 
  </code></pre>
  
  <p>// js</p>
  
  <pre><code>&lt;script&gt;
      // when button is clicked, the file browser opens
      $('.browse-click').on("click" , function () {
          $('#id_image').click();
      });
  
      // upload file async when file is selected in file browser
      $('#id_image').on('change', function () {
          var currentpath = window.location.pathname;
          var formData = new FormData($('form')[0]);
          formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
          $.ajax({
              url: currentpath,  //server script to process data
              type: 'POST',
              xhr: function() {  // custom xhr
                  var myXhr = $.ajaxSettings.xhr();
                  if(myXhr.upload){ // check if upload property exists
                      myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
                  }
                  return myXhr;
              },
              data: formData, 
              cache: false,
              contentType: false,
              processData: false
          });
      });
  
      function progressHandlingFunction(e){
          if(e.lengthComputable){
              $('progress').attr({value:e.loaded,max:e.total});
          }
      }
  &lt;/script&gt;
  </code></pre>