How to upload file in Node.js?
- express: Popular web framework built on top of Node.js, used for creating REST-API.
- body-parser: Parse incoming request bodies in a middleware
- multer: Middleware for handling multipart/form-data — file uploads
1. Installing the dependencies
npm install express body-parser multer --save2. Package.json
{
"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"
}
}3. Server.js
var express = require("express");
var bodyParser = require('body-parser');
var multer = require('multer');
var app = express();
// for text/number data transfer between clientg and server
app.use(bodyParser());
var storage = multer.diskStorage({
destination: function (req, file, callback) {
callback(null, './uploads');
},
filename: function (req, file, callback) {
callback(null, file.fieldname + '-' + Date.now());
}
});
var upload = multer({ storage : storage}).single('userPhoto');
app.get('/', function(req, res) {
res.sendFile(__dirname + "/index.html");
});
// POST: upload for single file upload
app.post('/api/photo', function(req, res) {
upload(req,res,function(err) {
if(err) {
return res.end("Error uploading file.");
}
res.end("File is uploaded");
});
});
app.listen(3000, function(){
console.log("Listening on port 3000");
});4. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multer-File-Upload</title>
</head>
<body>
<h1>MULTER File Upload | Single File Upload</h1>
<form id = "uploadForm"
enctype = "multipart/form-data"
action = "/api/photo"
method = "post"
>
<input type="file" name="userPhoto" />
<input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>
0 Comments