I'm trying to upload files with axios.post request with the code below:
export const create = (data) => {
api.post("/api/v1/redacao", { tema: data.tema }).then(postResponse => {
const resp = api.patch("/api/v1/redacao/" + postResponse.data.redacao.id, { titulo: data.titulo, texto: data.conteudo }).then(patchResponse => {
if (patchResponse.status === 200) {
if (data.file) {
const formData = new FormData();
formData.append('file', data.file)
const config = {
headers: {
'content-type': 'multipart/form-data'
}
}
return api.post("/api/v1/redacao/uploadRedacao/" + postResponse.data.redacao.id, formData, config)
}
return false;
}
return null
})
if (resp) {
resp.then((response) => { console.log(response) })
}
return false;
})
}
But when I look the payload data at Chrome dev tools, the payload is empty. If I use the post request without chain the requests its works fine.
Anyone have a clue what's the problem with the FormData?
I have created a module call api that create a axios instance and i was using that because the Authorization headers, baseUrls and interceptors. I import the axios again and make other instance to make this specific request and its working now
export const create = (data) => {
api.post("/api/v1/redacao", { tema: data.tema }).then(postResponse => {
if (data.file) {
let formData = new FormData()
formData.append('file', data.file)
buildUploadFileHeader().then(headers => {
axios.post(REACT_APP_BACKEND_URL + '/api/v1/redacao/uploadRedacao/' + postResponse.data.redacao.id, formData, { headers }).then(uploadResponse => {
if (uploadResponse.status === 201) {
return false
}
})
})
}
else {
api.patch("/api/v1/redacao/" + postResponse.data.redacao.id, { titulo: data.titulo, texto: data.conteudo }).then(patchResponse => {
if (patchResponse.status === 200) {
return false;
}
return null
})
}
return true;
})
}