0

I want to upload the file with Ajax in DRF, but I fail!

var form = new FormData();
form.append("files[1]file", "/home/mshzsh/Pictures/photo.jpg");

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://127.0.0.1:8000/api/pc/update/155/",
  "method": "PUT",
  "headers": {
    "User-Agent": "PostmanRuntime/7.20.1",
    "Accept": "*/*",
    "Cache-Control": "no-cache",
    "Postman-Token": "379c280a-c620-4e5f-8b9b-0ace0a9e6fa6,8c381931-20bb-480d-827d-11bb05718224",
    "Host": "127.0.0.1:8000",
    "Content-Type": "multipart/form-data; boundary=--------------------------641148104724362550775599",
    "Accept-Encoding": "gzip, deflate",
    "Content-Length": "1355503",
    "Connection": "keep-alive",
    "cache-control": "no-cache"
  },
  "processData": false,
  "contentType": false,
  "mimeType": "multipart/form-data",
  "data": form
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

I have copied these codes from the postman but I get error :

The submitted data was not a file. Check the encoding type on the form.

I tried a variety of AJAX methods but failed!

Note: These codes work correctly in Postman and Curl

Amax
  • 75
  • 1
  • 10
  • Does this answer your question? [Django REST Framework upload image: "The submitted data was not a file"](https://stackoverflow.com/questions/28036404/django-rest-framework-upload-image-the-submitted-data-was-not-a-file) – Prabhjot Singh Kainth Dec 10 '19 at 08:34
  • @PrabhjotSinghKainth thank you for your comment. I think this is for images, but I want to use more file types – Amax Dec 10 '19 at 09:42
  • "/home/mshzsh/Pictures/photo.jpg" is just a string. It doesn't have anything to do with any file that might live at that path. And even if it did, browser Javascript is specifically prevented from accessing a user's filesystem, for what should be obvious security reasons. – Daniel Roseman Dec 10 '19 at 09:47
  • thanks @DanielRoseman , But what is the solution? i use session for pass files, so I don't have access to file Input. – Amax Dec 10 '19 at 09:56
  • I don't know what the session has to do with anything here. You need to upload the file from somewhere in the first place. – Daniel Roseman Dec 10 '19 at 10:29
  • @DanielRoseman , I have a six-step order, in the third step the user has to upload the file, then in the final step all the data is stored in the database along with the file. From the third to the sixth step the file must be moved with the session. – Amax Dec 10 '19 at 11:32

1 Answers1

1

I think the second line is wrong

form.append("files[1]file", "/home/mshzsh/Pictures/photo.jpg");

You should use a file input to select file, then append that file to your form data

This topic maybe helpful for you: jQuery Ajax File Upload

Phan Dinh
  • 245
  • 2
  • 11
  • Agreed it is not possible to upload a file using AJAX without any fileUpload control. If anyone wants to upload asynchronously he/she can use iFrame. – yash vadhvani Dec 10 '19 at 08:44
  • Thanks for answering I use the session to pass files to other pages and eventually send the file address to Ajax. These codes work correctly in Postman and Curl but not work in Ajax – Amax Dec 10 '19 at 09:49