Express.js File Upload

In Express.js, file upload is slightly difficult because of its asynchronous nature and networking approach.

It can be done by using middleware to handle multipart/form data. There are many middleware that can be used like multer, connect, body-parser etc.

Let's take an example to demonstrate file upload in Node.js. Here, we are using the middleware 'multer'.

Create a folder "jtp file upload" having the following files:

Express.js file upload 1

uploads: It is an empty folder i.e. created to store the uploaded images.

package: It is JSON file, having the following data:

File: package.json

snippet
{
  "name": "file_upload",
  "version": "0.0.1",
  "dependencies": {
    "express": "4.13.3",
    "multer": "1.1.0"
  },
  "devDependencies": {
    "should": "~7.1.0",
    "mocha": "~2.3.3",
    "supertest": "~1.1.0"
  }
}

File: index.html

snippet

  
    File upload in Node.js by rookienerd
 
  
  
  
  
      

Express.js File Upload: by rookienerd

File: server.js

snippet
var express	=	require("express");
var multer	=	require('multer');
var app	=	express();
var storage	=	multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  },
  filename: function (req, file, callback) {
	callback(null, file.originalname);
  }
});
var upload = multer({ storage : storage}).single('myfile');

app.get('/',function(req,res){
      res.sendFile(__dirname + "/index.html");
});

app.post('/uploadrookienerd',function(req,res){
	upload(req,res,function(err) {
		if(err) {
			return res.end("Error uploading file.");
		}
		res.end("File is uploaded successfully!");
	});
});

app.listen(2000,function(){
    console.log("Server is running on port 2000");
});

To install the package.json, execute the following code:

snippet
npm install
Express.js file upload 2

It will create a new folder "node_modules" inside the "jtp file upload" folder.

Express.js file upload 3

Dependencies are installed. Now, run the server:

snippet
node server.js
Express.js file upload 4

Open the local page http://127.0.0.1:2000/ to upload the images.

Express.js file upload 5

Select an image to upload and click on "Upload Image" button.

Express.js file upload 6

Here, you see that file is uploaded successfully. You can see the uploaded file in the "Uploads" folder.

Express.js file upload 7

Download Node.js Express File Upload Example

Download this example
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +