title: Sending image file via AJAX. request.FILES is empty?
body: <p>I am trying to send image data using Ajax. But <code>request.FILES</code> that I get at the backend is empty. I have added <code>multipart/form-data</code> to my form and the method is <code>POST</code>. </p>
  
  <p>here is my AJAX call:</p>
  
  <pre><code> $(document).on('submit', '#profile_edit_form', function(event){
  
    event.preventDefault();
  
  
    $.ajax({
        url     : "/users/update_profile_info/",
        type    : 'post',
        dataType: 'json',
        data    : $(this).serialize(),
        success : function(data) {
  
          $('#profile_name_tag').html(data.username);
          $('#username_navbar').html(data.username);
  
          //SENDING THE IMAGE VIA AJAX HERE
          var img_data = $('#id_image').get(0).files;
          formdata = new FormData();
          formdata.append("img_data", img_data);
  
          $.ajax({
              url         : "/users/update_profile_image/",
              type        : 'POST',
              enctype     : "multipart/form-data",
              data        : formdata,
              cache       : false,
              contentType : false,
              processData : false,
              success : function(data) {
                console.log('success');
                //$('#profile_picture').html(data.)
  
              },
              error: function(data) {
                console.log('fail');
              }
          });
  
        },
        error: function(data) {
            console.log('fail');
        }
    });
  
  
  });
  </code></pre>
  
  <p>and here is my form:</p>
  
  <pre><code>   &lt;form id="profile_edit_form" method="POST"&gt;
       {% csrf_token %}
       &lt;fieldset class="form-group"&gt;
         &lt;legend class="border-bottom mb4"&gt; Profile Info &lt;/legend&gt;
               {{u_form|crispy}}
              {{p_form|crispy}}
       &lt;/fieldset&gt;
       &lt;button class="btn btn-outline-info" type="submit"&gt; Update Info &lt;/button&gt;
     &lt;/form&gt;
  </code></pre>
  
  <p>As you can see  I am using cispy forms. the image field is inside the <code>p_form</code></p>
  
  <p>and here is my <code>django view</code></p>
  
  <pre><code>@login_required
  def update_profile_image(request):
      print(not request.FILES)
  
      if request.method == 'POST':
          p_form = ProfileUpdateForm(request.POST, request.FILES, instance=request.user)
          if p_form.is_valid():
              p_form.save()
  
              context = {'None': 'none'}
              return JsonResponse(context)
          else:
              return HttpResponse('None')
  </code></pre>
  
  <p><code>print(not request.FILES)</code> returns True and the image is of course not uploaded.</p>
  
  <p>I have checked so many similar questions. but in all of them the solution was adding <code>multipart/form-data</code> to the form which I have already done. 
  So any ideas where the problem is?</p>
  
  <p>thanks!</p>