Image Upload with Node and Multer

Sat, Dec 3, 2016

This tutorial provides an end to end walkthrough of uploading images in Node with Multer.

To make things simple I am providing an app-template and complete code. Feel free to use the template or an app that you are working on.

App-Template

Complete Code

I am using Multer 1.2.0 and Node 6.4.0.

1. Install Multer, Mime, and Cryto and save to dependencies.

 `npm install -S multer`

 `npm install -S mime`

 `npm install -S crypto`

2. Require depencies in route `index.js`

var express = require('express'),
    router = express.Router(),
    mime = require('mime'),
    multer = require('multer');

3. Create a form in `index.ejs`

<form action="/upload" enctype="multipart/form-data" method="POST">
Select an image to upload:
<input name="image" type="file" />
<input type="submit" value="Upload Image" />
</form>

The form `enctype` must be `multipart/form-data`, which is the encoding used for forms that upload files. The `enctype` specifies how the form-data is encoded when it is submitted to a server. When submitted, the form will send a POST request to our upload route. We will construct the route in a later step.
4. Before we can write our upload route, we need to configure Multer's storage. Multer ships with two different storage engines, `DiskStorage` and `MemoryStorage`. I will be using `DiskStorage` which gives you full control over storing files to disk.
Create a folder called `uploads` in `public`. In `index.js` underneath your require statements, write the following.

var storage = multer.diskStorage({
  destination: function(req, file, cb) {
      cb(null, 'public/uploads/')
  },
  filename: function(req, file, cb) {
      crypto.pseudoRandomBytes(16, function(err, raw) {
          cb(null, raw.toString('hex') + Date.now() + '.' + mime.extension(file.mimetype));
      });
    }
});

var upload = multer({
  storage: storage
});

The two options for `DiskStorage`, `destination` and `filename`, are functions that determine where the file should be stored. As their name's suggest, destination determines the upload location and filename determines the filename. Multer does not provide a file extension for the upload, so the filename function must return a filename with an extension. Filename uses `Crypto` to generate a random name and uses `Mime` to determine the correct file extension. Generating a random filename prevents collisions if two files are uploaded with the same name. While not required, this is good practice. `upload` will be called to upload an image.
5. Write upload route

// POST Upload Image
router.post('/upload', upload.single("image"), function(req, res) {
  res.send('<img src="/uploads/' + req.file.filename + '" />');
});

This route first uses Multer to upload the image and then sends a response to the client that includes the image, now hosted on the server. You should be all set, but if there are any issues please comment.

Sources

Multer

Multer Issue: Files are uploading as ‘file without its extension