[FIXED] How do I upload a file from Axios to Django?

Issue

I'm switching from Jquery AJAX to react-dropzone & Axios, I'd like to upload a file to my Django server, I have no issue posting a blob url of the image on the server but I want to get it under request.FILES but I am getting an empty queryset.

request.FILES : <MultiValueDict: {}>  <!--- empty
request.POST  : <QueryDict: {}>       <!--- able to get a blob url

---

Here's what my axios configuration looks like :

const temporaryURL = URL.createObjectURL(step3.drop[0]);

var fd = new FormData();
fd.append('image', temporaryURL);

axios({
  method: 'post',
  url: SITE_DOMAIN_NAME + '/business-card/collect/',
  data: fd,
  headers: {
    "X-CSRFToken": CSRF_TOKEN, 
    "content-type": "application/x-www-form-urlencoded"
  }
}).then(function (response) {
  console.log(response)
  URL.revokeObjectURL(temporaryURL);
}).catch(function (error) {
  console.log(error)
});

I am receiving the file on a classBasedView on POST request.

How can I upload the file? Where am I wrong?

Edit

I also tried "application/form-data", doesn't solve the problem

Solution

the problem came from the content-type as it was using "application/form-data" instead of "multipart/form-data".

Answered By - Hiroyuki Nuri

Answer Checked By - Pedro (PHPFixing Volunteer)