Upload Files with Multer

December 23, 2019

Uploading files is an essential feature for web applications these days. In this tutorial will cover how to upload files into a server from the browser as well as create an API with Node.js to handle those uploads.

To simplify everything, we are going to use Express to build our API. And to handle file uploads, we are going to use Multer. Multer is an official Express middleware for handling multipart/form-data request, which primarily used to upload files.

Getting Started

I have published the source code of this entire project. Check it out here, or clone it into your computer with this command.

$ git clone https://github.com/rahmanfadhil/multer.git

First, we need to setup a new Node.js project for our API server. And install express and multer package.

$ npm init -y
$ npm install express multer

Setup Server

Now, we need to setup our API to handle the incoming file uploads from our front-end app.

index.js
const express = require("express")
const multer = require("multer")

const storage = multer.diskStorage({
  destination: "./uploads",
  filename(req, file, cb) {
    cb(null, Date.now() + "-" + file.originalname)
  }
})
const upload = multer({ dest: "uploads/" })
const app = express()

We first initialize an Express server, as well as a Multer instance.

We also want to create a multer storage, so that we have more control over our upload configurations. In that way, we specify the upload destination in the dest property, and generate a custom file name to a new uploaded file in the filename method.

index.js
// ...

app.use(express.static("public"))

app.post("/upload", upload.single("image"), (req, res) => {
  res.send({ filename: req.file.filename })
})

Then, we add a new express.static middleware to serve our front-end files inside the public directory.

We also want to handle every POST request from the /upload endpoint. This is where we handle our file uploads. The route should have the upload.single middleware to store the file inside the defined property, which in this case is image.

In the route handler, we will get the information of the uploaded file inside req.file property. Here, we just want to fetch the file name and send it back to the client.

Finally, can start our Express server in port 3000 (or any numbers you want).

index.js
// ...

app.listen(3000, () => {
  console.log("Server has started!")
})

Setup Client

Our server is ready to go. Now it's time to setup the front-end side of our app.

public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>File Upload</title>
  </head>
  <body>
    <form action="/upload" method="POST" enctype="multipart/form-data">
      <input type="file" name="image" />
      <button type="submit">Upload</button>
    </form>
  </body>
</html>

The index.html file inside public folder is the home page our web app. Here, we are going to have a form which allows us to upload a single file to the /upload endpoint. Make sure that the input name is the exact as you defined your multer middleware.

We also want to make sure that the request method of our form is set to POST, and the encoding type is set to multipart/form-data. Otherwise, it won't work at all.

Now if we run our server, you will see our home page that looks like this.

ui 1

If we select a file and click upload, we will see the name of our uploaded file.

ui 2

JAVASCRIPT

How to Generate Unique ID in JavaScript

There are several ways to generate unique identifier in JavaScript. This could very useful in many cases, such as rendering list efficiently…

JAVASCRIPT

Advanced Data Searching with Lunr.js

Lunr.js is a full-text search library for JavaScript. It allows us to perform a complex search to a collection of data. Its small, powerful…

JAVASCRIPT

How to Search an Array in JavaScript

In the previous tutorial, we learn about how we can do CRUD operations to an array in JavaScript. In this tutorial, we are going to learn…