sending more data along with formData to an API with axios

Question

I´m writing an API that loads files in a folder

In order to select the files I’m using FormData. I use

<input type='file' ref={inputElement} onChange={handleChange} />

After choosing the file, In use axios to make a request

    const uploadFile = () => {
        const formData = new FormData();
        formData.append('file', file); // appending file
        axios
            .post('http://localhost:3001/upload', formData, {…

The api receives it and does it’s thing

app.post('/upload', (req, res) => {
    if (!req.files) {
        return res.status(500).send({ msg: 'file not specified' });
    }
    // accessing the file
    const myFile = req.files.file;

It works fine.

But, I’d like to send extra info to the endpoint, so, I send the extra info and the formdata to axios:

    const uploadFile = () => {
        const formData = new FormData();
        formData.append('file', file); // appending file
        axios
            .post('http://localhost:3001/upload', {data: formData, extraInfo: 'more info'}, {

And in the endpoint I write:

app.post('/upload', (req, res) => {
    console.log(req.body.extraInfo)
    console.log(req.body.data)

extraInfo 'more info', ok, but data is empty, I supposed that data should contain formdata, but it’s empty, what can I do in order to get the formData and the extraInfo at the same time

Thanks in advance

Rafael

Answer 1

Just add the extraInfo to the formData and then send it to your server. You may need to double check how your server wants to get the data.

const uploadFile = () => {
    const formData = new FormData();
    formData.append('file', file); // appending file
    formData.append('extraInfo', "Some Info");// additonal data
    axios
        .post('http://localhost:3001/upload', formData, {