In this blog post we will see how to handle multipart data/file uploading with expressjs. Save files to mongodb using GridFS and rending files.
To handle file uploads in express, i will use the library located at https://github.com/expressjs/multer
[code]
$ npm install multer –save
[/code]
In your express app.js file
[js]
var app = express();
app.use(‘/uploads’, express.static(__dirname + "/uploads"));
app.use(multer({dest: ‘./uploads/’}))
[/js]
The above code catches all multipart data, fileuploads automatically and stores the file to ‘uploads/’ folder. So its super easy. So basically if you have a form tag, with its action pointed to a express route. Fileupload server handling is taken care automatically and all file move to ‘uploads’ folder.
Now let’s see how to save uploaded file to mongodb. Detailed explanation of using gridfs here
Suppose the file upload URL is http://127.0.0.1:3000/upload
[js]
var fs = require(‘fs’);
var mongoose = require(‘mongoose’);
router.all(‘/upload’,function(req,res){
var dirname = require(‘path’).dirname(__dirname);
var filename = req.files.file.name;
var path = req.files.file.path;
var type = req.files.file.mimetype;
var read_stream = fs.createReadStream(dirname + ‘/’ + path);
var conn = req.conn;
var Grid = require(‘gridfs-stream’);
Grid.mongo = mongoose.mongo;
var gfs = Grid(conn.db);
var writestream = gfs.createWriteStream({
filename: filename
});
read_stream.pipe(writestream);
});
[/js]
Now let’s see how to view image file uploaded in mongo
If URL to view files is http://127.0.0.1:3000/file/mongo_id
[js]
router.get(‘/file/:id’,function(req,res){
var pic_id = req.param(‘id’);
var gfs = req.gfs;
gfs.files.find({filename: pic_id}).toArray(function (err, files) {
if (err) {
res.json(err);
}
if (files.length > 0) {
var mime = ‘image/jpeg’;
res.set(‘Content-Type’, mime);
var read_stream = gfs.createReadStream({filename: pic_id});
read_stream.pipe(res);
} else {
res.json(‘File Not Found’);
}
});
});
[/js]