Just a few weeks until the 2021 JavaScript Full-Stack Bootcamp opens.
Signup to the waiting list!

In how to upload a file using Fetch I explained how to upload a file to a server using Fetch.

In this post I’m going to show you part 2: how to use Node.js, and in particular Express, to handle uploaded files.

Install the express-fileupload npm module:

npm install express-fileupload

and add it to your middleware:

import fileupload from 'express-fileupload'

//or

const fileupload = require('express-fileupload')

After you created your Express app, add:

app.use(
  fileupload(),
  //...

This is needed because otherwise the server can’t parse file uploads.

Now uploaded files are provided in req.files. If you forget to add that middleware, req.files would be undefined.

app.post('/saveImage', (req, res) => {
  const image = req.files.myFile
  const path = __dirname + '/images/' + image.name


  image.mv(path, (error) => {
    if (error) {
      console.error(error)
      res.writeHead(500, {
        'Content-Type': 'application/json'
      })
      res.end(JSON.stringify({ status: 'error', message: error }))
      return
    }

    res.writeHead(200, {
      'Content-Type': 'application/json'
    })
    res.end(JSON.stringify({ status: 'success', path: '/images/' + image.name }))
  })
})

This is the smallest amount of code needed to handle files.

We call the mv property of the uploaded image. That is provided to us by the express-fileupload module. We move it to path and then we communicate the success (or an error!) back to the client.

Download my free Node.js Handbook


The 2021 JavaScript Full-Stack Bootcamp will start at the end of March 2021. Don't miss this opportunity, signup to the waiting list!

More node tutorials: