Try to upload file with axios post request

Question

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?

Check whether patch request returned the expected data with file? — lry, Nov 05 '21 at 02:49
Remove the `config`, [you don't need it](https://stackoverflow.com/a/68643919/283366). Adding `multipart/form-data` headers manually usually messes up the request — Phil, Nov 05 '21 at 03:56
Does this answer your question? [How to see form data with enctype = "multipart/form-data" in Chrome debugger](https://stackoverflow.com/questions/55743964/how-to-see-form-data-with-enctype-multipart-form-data-in-chrome-debugger) — Andrey, Nov 05 '21 at 06:11
@Andrey it doesnt. When i use the request for upload a file as the first request, its working. The problem is when i using the chain of promises. — Danilo Oliveira, Nov 05 '21 at 14:06
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. — Danilo Oliveira, Nov 05 '21 at 15:01

score 0 · Answer 1 · answered Nov 05 '21 at 15:02

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;
})

}

Try to upload file with axios post request

1 Answers1