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

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

• javascript
• django
• reactjs
• file-upload
• axios

2 Answers 2

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

I am answering in case, someone es here by searching on google:

let formData = new FormData();
formData.append('myFile', file);
formData.append('otherParam', 'myValue');

axios({
  method: 'post',
  url: 'myUrl',
  data: formData,
  headers: {
    'content-type': 'multipart/form-data'
  }
}).then(function (response) {
    // on success
}).catch(function (error) {
    // on error 
});