Store Image file in Binary data in mongoose schema and Display image in html form

Question

I am using Express, Node.js, and Mongodb to create the webpage that uploads and displays the image file.

I saved the binary of image in mongodb using schema.

Here is my little bit of code in index.js and db.js..

var Post = mongoose.Schema({
   image: {data: Buffer, contentType: String}
});

var post= new Post({ });
post.image.data=fs.readFileSync(req.file.path);
post.image.contentType='image/png';

and here is the part of mongo shell after I submitted image file and searched for post, and its image field

"image:     {"data:BinData(0,"iVBORw0KGgoAAAANSUhEUE....(I
just cut off the rest of the code.. cuz it was too long)          
rkJggg=="), 
"contentType" : "image/png" }

so it seemed like it's successfully saving the binary data of image file in mogngodb,

but my problem is how to display the image on the webpage now using binary data. How do I convert binary buffer data to create image tag??

<img src= "data:{{image.contentType}};base64,{{image.data}}">

I tried this, but it gives me an error:

Failed to load resource: net::ERR_INVALID_URL

Could you guys please let me know how do I solve this?? I will really appreciate for your help :(((

Semih Gokceoglu · Accepted Answer · 2016-05-07 16:40:03Z

1

First of all, you have to convert buffer data to base64. You can do it in back-end or front-end it does not matter. Just use yourBufferData.toString('base64'). Then you can use it.

However, I would suggest another way to store images instead of storing binary data. Assuming you use nodejs. You can create image in a repository with that binary data using fs.writeFile method. Then you can store that image path in record (db). AFter that, just put the file path into ng-src="file path which you saved". Here is the example which I use:

var path = 'upload/profiles/' +req.body.userId + '_profile.jpg';
      fs.writeFile(path, base64data, function(err) {
        if (err) return next(err);
        User.findByIdAndUpdate({
          _id: req.body.userId
        }, {
          $set: {
            profileImg: 'upload/profiles/' +req.body.userId + '_profile.jpg'
          }
        }, function(err, user) {
          if (err) return next(err);
          return res.send(user);
        });
      });

  <img ng-src="savedpath">

answered May 7, 2016 at 16:40

Semih Gokceoglu

1,4382 gold badges14 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dinesh Ram Over a year ago

Hey @semih Can you tell me a way to store my base64 image string in db directly, instead of file path ?

SSH This Over a year ago

Good idea, but when your Nodejs API is behind a load balancer, it's usually not a good idea to store anything on the file system.

Michael Oryl Over a year ago

This isn't a good idea. If you were to take this approach, you'd be better off sticking the file in an Amazon S3 bucket or some other sort of file serving system and then serving the URL for it. Writing to the local file system only works with a single node, and can lead to the entire system going down for lack of disk space if you don't have proper controls in place.

Collectives™ on Stack Overflow

Store Image file in Binary data in mongoose schema and Display image in html form

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related