I have been chasing this bug for several days and finally found that it is axios. Why does fetch work to upload an image from React-Native to Django REST here:
export const uploadBusinessImage = createAsyncThunk(
"business/uploadBusinessImage",
async (imgPath, { rejectWithValue }) => {
var formData = new FormData();
formData.append("image", {
uri: imgPath,
name: "myfoto.jpg",
type: "image/jpg",
});
const url = "http://10.0.0.241/api/upload/";
fetch(url, {
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "multipart/form-data",
},
body: formData,
})
}
);
but axios doesn't work here:
export const uploadBusinessImage = createAsyncThunk(
"business/uploadBusinessImage",
async (imgPath, { rejectWithValue }) => {
try {
var formData = new FormData();
formData.append("image", {
uri: imgPath,
name: "myfoto.jpg",
type: "image/jpg",
});
const response = await axiosInstance({
method: "post",
url: "/api/upload/",
data: formData,
headers: {
"Accept": "application/json",
"Content-Type": 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW'
},
});
console.log(response.data);
return response.data;
} catch (err) {
console.log(err.response.data);
return rejectWithValue(err.response.data);
}
}
);
It creates the object in the database as image: null