title: Django: How to upload a file using ajax
body: <p>I am using django 1.5, python 2.7 and jquery 1.9. I have a form which has precisely 2 fields i.e. <strong>title and document</strong>. When I press submit I want the users chosen document to be present in the request.FILES as shown in the view.</p>
  
  <p>When I submit the regular form (without ajax), this works fine, but with ajax I do not get the file field in my request. Any suggestions on <strong>how to upload a file using ajax</strong>.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;form enctype="multipart/form-data" action="{% url 'upload_document' %}" method="post" id="uploadForm"&gt;
      {% csrf_token %}
          &lt;ul&gt;
            &lt;li&gt;
              &lt;div&gt;Title&lt;/div&gt;
              &lt;input id="title" type="text" maxlength="200"/&gt;
              &lt;div class="error"&gt;&lt;/div&gt;          
            &lt;/li&gt;
  
            &lt;li&gt;
              &lt;div&gt;Upload File&lt;/div&gt;
              &lt;input id="document" type="file" size="15" /&gt;
              &lt;div class="error"&gt;&lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
  
        &lt;input type="submit" value="submit"/&gt;&lt;/p&gt;
  &lt;/form&gt;   
  </code></pre>
  
  <p><strong>FORMS.PY:</strong></p>
  
  <pre><code>class UploadForm( forms.Form ):
      document = forms.FileField()
      title = forms.CharField(max_length = 200)
  
      def clean(self):
          cleaned_data = super(UploadForm, self).clean()
          return cleaned_data
  
      def save(self, *args, **kwargs):
          title = self.cleaned_data['title']
          doc = self.cleaned_data['document']
  
          document = Document(title = title, document = doc)
          document.save()
          return document
  </code></pre>
  
  <p><strong>SCRIPT:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $("#uploadForm").submit(function(event){
        event.preventDefault();
        $.ajax({
          url : "{% url 'upload_document' %}",
          type: "POST",
          data : {csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value,
                  title: document.getElementById('title').value,
                  //document: document: document.getElementById('document'),
          },
          dataType : "json",
          success: function( response ){
             if(response == "True"){
              // success
             }
             else {
              //append errors
             }
          }
        });
    }); 
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>VIEWs.PY</strong></p>
  
  <pre><code>def upload_document(request): 
      print request.POST
      print request.FILES
      if request.is_ajax():
          if request.method == 'POST':
              form = UploadForm(request.POST, request.FILES, user = request.user)
  
              if form.is_valid():
                  form.save()
                  return HttpResponse(simplejson.dumps('True'), mimetype = 'application/json' )
              else:
                  errors = form.errors
                  return HttpResponse(simplejson.dumps(errors), mimetype = 'application/json' )
  </code></pre>