Ajax POST file upload in django

Question

I'm trying to process a POST request with a file field via Ajax post in my djano app. I'm getting this error:

Forbidden (CSRF token missing or incorrect.): /user/instance/create/new/awod/

Here's what I have tried:

From template.html

<div class="container" style="background-color: lightgray; opacity: 0.7;margin-top:10%;margin-left: 2%; padding-bottom: 10%;">
          <form method="post" class="form-horizontal" action="" id="gitForm" enctype="multipart/form-data">
          {% csrf_token %}
          <div class="form-group">
          <label class="control-label" for="inputGroupSuccess1">Deployment Name:</label>
             <div class="input-group">
               <span class="input-group-addon">@</span>
               <input type="text" class="form-control" name="name" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
             </div>
          </div>
          <div class="form-group">
              <label class="control-label">Select File</label>
              <input type="file" id="inputGroupSuccess2" name="archive"  class="file" multiple   data-allowed-file-extensions='["zip", "tar"]'>
              <small id="fileHelp" class="form-text control-label" style="color:black">Upload a Tar or Zip archive without a Dockerfile, otherwise your deployment will fail.</small>
          </div>
          <div id="spinner" style="display: none;">
               <div class="f_circleG" id="frotateG_01"></div>
               <div class="f_circleG" id="frotateG_02"></div>
               <div class="f_circleG" id="frotateG_03"></div>
               <div class="f_circleG" id="frotateG_04"></div>
               <div class="f_circleG" id="frotateG_05"></div>
               <div class="f_circleG" id="frotateG_06"></div>
               <div class="f_circleG" id="frotateG_07"></div>
               <div class="f_circleG" id="frotateG_08"></div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-lg pull-right" value="Submit"> Submit </button>
                <span style="padding-right: 5%;float: right;"><a href="{% url 'users:new-instance' %}" class="btn btn-primary btn-lg"><img src="{% static 'images/go-back-arrow.svg' %}" style="width: 24px; height: 24px;"> Go Back! </a></span>
            </div>
          </form>
       </div>
      </div>
    </div>
</div>

my javascript

<script type="text/javascript">
$(document).ajaxStart(function() {
   $('#spinner').show();
   console.log("ajax start")
});

$(document).ajaxStop(function() {
   $('#spinner').hide();
});
$(document).on('submit', '#gitForm', function (e) {
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url : '/user/instance/create/new/awod/',
        data: {
            name:$('#inputGroupSuccess1').val(),
            archive:$('#inputGroupSuccess2').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
        },
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success:function () {
            $('#message').show();
            $('#inputGroupSuccess1').val('');
            $('#inputGroupSuccess2').val('');

        }
    })
});

Even when I console.log the csrf_token field, it prints the csrf token properly.

is there something wrong?

Help me, please! Thanks in advance!

Answer 1

While you can pass the token in the data, the recommended method is to set a custom X-CSRFToken HTTP header:

$.ajax({
    type: 'POST',
    headers: {'X-CSRFToken': $.cookie('csrftoken')},
    url : '/user/instance/create/new/awod/',
    data: {
        name:$('#inputGroupSuccess1').val(),
        archive:$('#inputGroupSuccess2').val()
    },
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success:function () {
        $('#message').show();
        $('#inputGroupSuccess1').val('');
        $('#inputGroupSuccess2').val('');
    }
})

As you can see, the value is the csrftoken cookie (set by Django). I have used the jQuery.cookie library to retrieve the token, but you can retrieve it however you'd prefer.

Answer 2

It is generely a bad idea to use async:false since it'll prevent other events on the page from firing you probably don't want your code to be paused, I'd suggest you to use ajax like this :

$(document).on('submit', '#gitForm', function (e) {
    var form_data = new FormData($(this)[0]);
    $.ajax({
        type:'POST',
        url:'/user/instance/create/new/awod/',
        processData: false,
        contentType: false,
        data : form_data,
        success: function(response) {
          $('#message').show();
          $('#inputGroupSuccess1').val('');
          $('#inputGroupSuccess2').val('');
        }
    });
});

this should also resolve your issue with csrf_token.