0

On my frontend application, I have a form where a user can upload a file. I want to upload this file to my Node.js backend using the fetch API.

Frontend code

HTML:

<form id="forecast-form">
    <input type="file" id="csvFile" />
    <input type="submit" value="Submit" />
</form>

JavaScript:

const handleSubmit = (e) => {
    e.preventDefault();

    const csv = e.target.csvFile.files[0];
    console.log(csv); // This actually logs the file object

    const formData = new FormData();
    formData.append('csvFile', csv);

    const options = {
        method: 'POST',
        body: formData,
    };

    fetch('http://localhost:4000/api/v1/forecast', options)
      .then((res) => res.text())
      .then((data) => console.log(data)); // output: {}
}

Node.js + express code

create: async (req, res, next) => {
    try {
        const body = req.body;
        console.log(body); // output: {}

        res.status(201).send(body);
        next();
    } catch (err) {
        next(err);
    }
}

But the only output I get, both from the frontend and backend, is an empty object {}.

Edit: I wouldn't say this question is a duplicate since the aforementioned question in mind is not specific to the fetch API, which this question is.

Nermin
  • 749
  • 7
  • 17
  • If you logs your "e", What do you have ? – Jonathan Delean Jul 16 '20 at 08:00
  • @JonathanDelean I have the submit event. The handler should behave properly since I get the file when logging e.target.csvFile.files[0] – Nermin Jul 16 '20 at 08:14
  • can you give us more details about the express configuration ? which body parser are you using ? do you use a middleware ? – tsamaya Jul 16 '20 at 08:27
  • Express `body-parser` doesn't parse `mutipart/form-data`. You can use something like multer [https://www.npmjs.com/package/multer] to parse files – ranjan_purbey Jul 16 '20 at 08:48
  • Yes thank you @ranjan_purbey I just found out. And sorry tsamaya I should've specified that I used no middlewares – Nermin Jul 16 '20 at 08:52

1 Answers1

1

After finding some information from this question Sending a CSV file from browser to nodejs server I realised I couldn't just use vanilla req.body like I do for json data, instead I need to use some sort of middleware to handle the multipart/form-data content type.

So I used the multer middleware

const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

router.post('/forecast', upload.single('csvFile'), forecast.create);

Then on POST, the file will be uploaded under uploads/ and per multer documentation:

// req.file is the avatar file

// req.body will hold the text fields, if there were any

Nermin
  • 749
  • 7
  • 17