How do I upload images using MongoDB + Node.js (Express.js)?

Question

I also use Mongoose, if that is relevant. I am trying to allow users to upload a profile picture. There must be a simple way, isn't there?

Answer 1

I think you should try multer.

Simple from multer site:

var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })

app.post('/upload', uploads.any(), function(req,res){
    res.send(req.files);
});

It should upload file in your uploads folder (under root), and return file in JSON.

Answer 2

In this example you will see how to store the file you are sending in to your server directory and then pick them up from there and save them. You can also directly save them. First you pick up the file using angular, you can use anything, if you want you can check here for more details. Here is my small example the code is in jade.

<input type="file" name="file" onchange="angular.element(this).scope().selectFile(this.files)"/>
<button ng-click="savePhoto()">Save </button>

In your angular controller

 $scope.savePhoto = function () {
 var fd = new FormData();
  fd.append("file", $scope.files[0]);
  )) ;
$http.post("/xxx/photos", fd, {
        withCredentials: true,
        headers: { 'Content-Type': undefined },
        transformRequest: angular.identity
      }).success(function (data) {
        $scope.image = data; // If you want to render the image after successfully uploading in your db
      });
    };

Install multer using npm in your back end. And then in app.js you can set up a middleware to collect the files you are sending in. Just do console.log(req) here to check if you are getting the files till here. Multer does the magic here.

 app.use(multer({
  dest: path.join(__dirname, 'public/assets/img/profile'),
  rename: function (fieldname, filename, req, res) {
      console.log(req)// you will see your image url etc.
    if(req.session.user) return req.session.user.id;
  }
}));

So here the image will be stored in this path (public/assets/img/profile) in your server. Now you pick up the file from this server and add to your db.

var path = require('path');
  var imgPath =path.join(__dirname, '../public/assets/img/profile/' + id + '.jpg'); // this is the path to your server where multer already has stored your image
      console.log(imgPath);
      var a ;

      a = fs.readFileSync(imgPath);
      YourSchema.findByIdAndUpdate( id, {
            $set:
            {'img.data' : a,
              'img.contentType' : 'image/png' }
          }, function(err, doc) {
            if (err)console.log("oi");

          }
      );

   //In case you want to send back the stored image from the db.
      yourSchema.findById(id, function (err, doc) {
        if (err)console.log(err);

        var base64 = doc.img.data.toString('base64');
        res.send('data:'+doc.img.contentType+';base64,' + base64);

      });