× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Setup file uploading in an Express.js application using Multer.js

Yuriy Linnyk
Jul 08, 2015
<p>To easily setup file uploading in an Express.js server application you can use <a href="https://github.com/expressjs/multer">Multer.js</a></p> <p>Start by installing required node dependencies:</p> <pre>npm init npm install -S express multer body-parser jade</pre> <p>Setup basics for your Express.js application:</p> <pre><small><span style="color:#A9A9A9">// <strong>index.js</strong> start of file</span></small> var express = require('express'); var multer = require('multer'), bodyParser = require('body-parser'), path = require('path'); var app = new express(); app.use(bodyParser.json()); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade');</pre> <p> </p> <p>Setup route for GET request, where the form will be displayed:</p> <pre><span style="color:rgb(169, 169, 169)"><small>// <strong>index.js</strong> continued</small> </span>app.get('/', function(req, res){ res.render('index'); }); </pre> <p> </p> <p>Create your form for file uploading, don't forget the <code>enctype="multipart/form-data"</code> for the <code>form</code> tag</p> <pre><span style="color:rgb(169, 169, 169)"><small>//- views/index.jade</small></span> html head title body form(method="post",enctype="multipart/form-data",action="/") p input(type="text",name="title",placeholder="title") p input(type="file",name="upl") p input(type="submit") </pre> <p> </p> <p>Setup route for POST request, the <code>action</code> field of the form:</p> <pre><span style="color:rgb(169, 169, 169)"><small>// <strong>index.js</strong> continued </small></span>app.post('/', <strong>multer({ dest: './uploads/'}).single('upl')</strong>, function(req,res){ console.log(req.body); //form fields <span style="color:#A9A9A9"> /* <small>example output:</small> { title: 'abc' } */</span> console.log(req.file); //form files <span style="color:#A9A9A9"> /* <small>example output: { fieldname: 'upl', </small></span>            <span style="color:#A9A9A9"><small>  originalname: 'grumpy.png', </small></span>            <span style="color:#A9A9A9"><small>  encoding: '7bit', </small></span>            <span style="color:#A9A9A9"><small>  mimetype: 'image/png', </small></span>            <span style="color:#A9A9A9"><small>  destination: './uploads/', </small></span>            <span style="color:#A9A9A9"><small>  filename: '436ec561793aa4dc475a88e84776b1b9', </small></span>            <span style="color:#A9A9A9"><small>  path: 'uploads/436ec561793aa4dc475a88e84776b1b9', </small></span>            <span style="color:#A9A9A9"><small>  size: 277056 }</small> */</span> res.status(204).end(); }); </pre> <p>Note, that the <code>dest</code> parameter is relative to the server root folder, that is where the <code>index.js</code> is located.</p> <p> </p> <p>Finally, start listening</p> <pre><small><span style="color:#A9A9A9">// <strong>index.js</strong> end of file</span></small><span style="color:rgb(169, 169, 169)"> </span>var port = 3000; app.listen( port, <span style="color:#808080">function(){ console.log('listening on port '+port); }</span> );</pre> <p> </p> <p>And run the server:</p> <pre>node index</pre> <p> </p> <p>Test it by uploading a file and find the uploaded file in the <code>uploads</code> folder. Multer will rename the file to a unique name to prevent collisions, so you will want to save the data from the <code>req.files</code> to your data store.</p> <p> </p>
comments powered by Disqus