Create a File Upload Service using Node.js / Express / Multer

Problem:   

I needed to create a form that essentially uploads a file to a server, then posts the rest of the form data to a second server with the new file name. In other words, post the image to an “Image” server, then posts the form data (with the file URL) to a “Form Data” server.

Solution: 

Create an Express server that uses the “Multer” library to accomplish this.

The Code:

Create the express server and have it listen on a specific port

var express = require('express');
var app = express();

app.listen( 3313, function(){
    console.log('listening on port 3313');
});

Install Multer.  Read here:

https://www.npmjs.com/package/multer

Include Multer to your express app.  We’ll be tweaking the storage properties so you can name the file whatever you like. At the end, you should have an “upload” object you’ll be using in the next step. be sure to change the file destination of your choice.

var express = require('express');
var app = express();

var multer = require('multer');

var storageProperties = multer.diskStorage({

    destination: function (req, file, callback) {

        callback(null, 'files/') //file destination

    },

    filename: function (req, file, callback) {

        callback(null, Date.now() + '_' + file.originalname )

    }

});

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

app.listen( 3313, function(){

    console.log('listening on port 3313');

});

Create you’re express route that fires then upload.single() method. “Thumbnail” is the name of the HTML input object.  We’ll show the form HTML after the service is created.

var express = require('express');
var app = express();
var multer = require('multer');

var storageProperties = multer.diskStorage({

    destination: function (req, file, callback) {
        callback(null, 'files/')
    },

    filename: function (req, file, callback) {
        callback(null, Date.now() + '_' + file.originalname )
    }
});

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

app.post('/upload',upload.single('thumbnail'), function (req, res) {
    res.json({file: req.file});
});

app.listen( 3313, function(){
    console.log('listening on port 3313');
});

That’s pretty much it for the service. Make sure to start your Node service you just created.  You should get a console message “Listening on port 3313” when it’s started successfully.  When that’s done, Let’s create a simple form to test it. Notice the settings below. your action should point to your node server, and name the file input element “thumbnail”.

<form method="post" enctype="multipart/form-data" action="http://localhost:3313/upload">

    <input type="file" name="thumbnail">

    <input type="submit">

</form>

Submit the form, and you should get the json back, like this:

{  
   "file":{  
      "fieldname":"thumbnail",
      "originalname":"No Stranger.docx",
      "encoding":"7bit",
      "mimetype":"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      "destination":"files/",
      "filename":"1461607365010_No Stranger.docx",
      "path":"files\\1461607365010_No Stranger.docx",
      "size":17566
   }
}

 This means you successfully submitted the form. Confirm that your folder contains the uploaded file.

Conclusion:

Node.js saves A LOT of dev time using awesome libraries like express and Multer.

References:

https://www.npmjs.com/package/multer

https://www.npmjs.com/package/express

http://stackoverflow.com/questions/32184589/renaming-an-uploaded-file-using-multer-doesnt-work-express-js