I try to make a patch request to an api in order to upload a file which i can make it work using Postman but not in my react project where i use axios. (response is status 200 but the file i try to upload is not getting uploaded).
So i check the code that postman generates for that request (it is generated for node.js) and what seems different from what i do is that in headers besides
'Content-Type': 'application/json',
'Authorization': 'Bearer randomstring.randomstring.randomstring',
he also uses the headers from the FormData. So what is the equivalent of formData.getHeaders() in react?
var axios = require('axios');
var FormData = require('form-data');
var fs = require('fs');
var data = new FormData();
data.append('userImageFile', fs.createReadStream('/C:/Users/George/Downloads/dummy.jpg'));
var config = {
method: 'patch',
url: 'https://api.services.thenameoftheapi.net/api/v3/billing/cebfecea-ff40-4e1f-9fb0-ca588496c787/',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer randomstring.randomstring.randomstring',
...data.getHeaders()
},
data : data
};
axios(config)
.then(function (response) {
console.log(JSON.stringify(response.data));
})
.catch(function (error) {
console.log(error);
});
PS: Also what headers does .getHeaders() extract from form data if form data only contains the file i uploaded?
var userImageFile;
function onFileFormSubmit(e) {
e.preventDefault();
const formData = new FormData();
formData.append("userimage", userImageFile);
// var headers = formData.getHeaders() // what would headers contain?
props.patchUser(formData); //redux saga flow
}
function onFileChange(e) {
userImageFile= e.target.files[0]
e.target.nextSibling.click(); // To submit the form
}
// an in return of react component the form is the following
<form onSubmit={onFileFormSubmit}>
<label htmlFor={"upload" + i} className="table_upload">Upload</label>
<input className="d-none" id={"upload" + i} onChange={onFileChange} type="file"></input>
<button className="d-none" type="submit"></button>
</form>
The code that makes the actually patch request is the following
import axios from "axios"
const axiosApi = axios.create({
baseURL: 'https://api.services.thenameoftheapi.net/api/v3',
'Authorization': 'Bearer '
})
axiosApi.interceptors.request.use(function (config) {
let access_token = localStorage.getItem("accessToken");
config.headers = {
...config.headers,
'Authorization': 'Bearer ' + access_token
}
config = {...config, Authorization: 'Bearer ' + access_token}
return config;
});
export async function patch(url, data, config = {}) {
console.log('url = ', url); // This outputs correct url
console.log('data = ', data); // This outputs FormData {}
console.log('config = ', config); // Empty now but exists to pass parameters if needed
var headers = {};
for (var pair of data.entries()) {
console.log(pair[0]+ ', ' + pair[1]); // This outputs userimage, [object File]
}
if ('headers' in config && config.headers ) {
headers = config.headers
delete config.headers;
}
return axiosApi
.patch(url, { ...data }, { params: { ...config }, headers: headers })
.then( response => response.data)
}