React Axios, FormData post empty file

Question

when I post text and file through react axios my backend receives text fields only and file filed is empty.

I'm useing React, Axios on the frontend and django for the backend. I tested my backend on postman and it works well. here's my post request ;

form.js

{pasport_number: 'testtest', passport_photo: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD…uxzkdKgf7y/WpoP8AVzUc2thuyI/7SX/np+lFVaKOYs//2Q=='}
pasport_number: "testtest"
passport_photo: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAA
[[Prototype]]: Object

console.log(formData) ;

{data: {…}, status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
data: {id: 80, email: '', pasport_number: 'testtest', first_name: '', last_name: '', …}
headers: {content-length: '2863', content-type: 'application/json'}
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: "OK"
[[Prototype]]: Object

console.log(_res) ;

Answer 1

Do you use the new FormData() for creating the body of your request? If not yes it won't work. You should use FormData blob and stuff like this. Search for it on Google.