Django & AJAX file upload

Question

When using POST request with AJAX in Django 4.0.1 I can't reach the file from the backend using request.FILES. The form used is pretty simple so I can't spot any typos etc.

HTML:

<form id="snipForm" method="POST" enctype="multipart/form-data">
  {% csrf_token %}
      <input type="file" id="multiFiles" name="files[]" multiple="multiple"/>
      <button id="upload">Upload</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

JavaScript: (sorry for quite a long code sample but I can't shrink it more)

$(document).ready(function (e) {
  $('#upload').on('click', function (event) {
    //Prevent page from reloading
    event.preventDefault()
    var form_data = new FormData();
    // check if there is any file selected
    var ins = document.getElementById('multiFiles').files.length;
    if(ins == 0) {
      $('#msg').html('<span style="color:red">Select at least one file</span>');
      return;
    }
    // add all files
    for (var x = 0; x < ins; x++) {
      form_data.append("files[]", document.getElementById('multiFiles').files[x]);
    }
    // obtain CSFR token
    csrf_token = $('input[name="csrfmiddlewaretoken"]').val();

    // set the headers
    headers = {'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest', 'X-CSRFToken': csrf_token};

    $.ajax({
      type: 'POST',
      url: '/docs/', // point to server-side URL
      dataType: "json",
      ContentType: "application/x-www-form-urlencoded",
      cache: false,
      processData: false,
      headers: headers,
      data: form_data,
      success: function (response) { // display success response
        console.log("successssssssssssss")
      },
      error: function (response) {
        console.log("NOPEEEEEE")
      }
    });
  });
});

views.py:

from django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie
def generate(request):
    is_ajax = request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest'
    if request.method == 'POST' and is_ajax:
        files = request.FILES.getlist('files[]')
        if files:
            print("file here")
            #do some stuff
        else:
            print("NO FILE AT ALL")
        return JsonResponse({...})

Request itself seems to be working console.log('sucessss') is visible after request is completed. Django however has no access to the file. The data with stored file is saved in the form_data but as far as I know we can reach files through mentioned request.FILES['name_of_the_input'].

What might be the cause?

Thank you but it doesn't clarify much - I already used new FormData() so the problem is somewhere else — Wincij
– Wincij, Commented Jul 23, 2022 at 22:06

Musa · Accepted Answer · 2022-07-25 19:49:25Z

3

When doing a file upload(with FormData) with $.ajax, you must set contentType and processData to false.
Otherwise jQuery will try to convert you FormData object to a string and set the content type of the request to "application/x-www-form-urlencoded" which is wrong.
The correct content type is multipart/formdata and will be set automatically.

$.ajax({
  type: 'POST',
  url: '/docs/', // point to server-side URL
  dataType: "json",
  cache: false,
  contentType: false,
  processData: false,
  headers: headers,
  data: form_data,
  success: function (response) { // display success response
    console.log("successssssssssssss")
  },
  error: function (response) {
    console.log("NOPEEEEEE")
  }
});

answered Jul 25, 2022 at 19:49

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wincij Over a year ago

This resolved all issues. Thank you very much

Collectives™ on Stack Overflow

Django & AJAX file upload

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related