Display images from GridFs (MongoDB)

Question

I am using the following code to read the image file saved in MongoDB using GridFs:

app.get('/picture', function(req, res) {

 var readstream = gfs.createReadStream({
    filename: 'trooper.jpeg'
 });

 readstream.on('data', function (data) {
  // We got a buffer of data...

 var buf2 = new Buffer(data).toString('base64'); 
 res.send(buf2.toString())
 console.log(buf2.toString());
 console.log(data);
});
  readstream.on('end', function () {
// File finished reading...
});

});

The output of console.log(buff.toString()); is:

dHJvb3Blci5qcGVn

The output of console.log(data); is:

<Buffer 74 72 6f 6f 70 65 72 2e 6a 70 65 67>

To display the image I did this:

<img src="data:image/jpeg;base64,dHJvb3Blci5qcGVn">

I am unable to read and display the image in html from GridFs MongoDB

UPDATE:

I have tried this:

app.get('/picture', function(req, res) {
res.contentType('image/jpeg');
var readstream = gfs.createReadStream('trooper.jpeg');
readstream.pipe(res);

});

The output of the above is:

score 2 · Accepted Answer · answered Jan 21 '16 at 12:56

2

Unless you really need to embed images into page, use pipes as of saintedlama's answer.

dHJvb3Blci5qcGVn is base64 encoded string "trooper.jpeg". Please ensure you correctly saved binary data to GridFS at the first instance.

You can query it directly and check content of the file stored in the db.

answered Jan 21 '16 at 12:56

Alex Blex

34,704
7
48
75

Thank you so much for your answer. I am not sure whether I have saved it correctly. I posted this question which contains the code for my file upload along with images. Could you have a look http://stackoverflow.com/questions/34904157/reading-and-displaying-images-from-mongodb-using-gridfs – Skywalker Jan 21 '16 at 13:19
Yep, you saved name of the file, not the binary payload. I answered there. – Alex Blex Jan 21 '16 at 13:40

score 1 · Answer 2 · answered Apr 24 '17 at 16:45

1

var Grid = require("gridfs-stream");
Grid.mongo = mongo; 

router.get("/:filename", function(req, res){ 
        gfs = Grid(db);
        var readstream = gfs.createReadStream({filename: req.params.filename}); 
        readstream.on("error", function(err){
            res.send("No image found with that title"); 
        });
        readstream.pipe(res);
    });

This is the perfect solution to get images from gridfs

answered Apr 24 '17 at 16:45

AshvinG

56
4

can I use this to normal images in bson doucuments? – Nux May 29 '19 at 11:00

score 0 · Answer 3 · answered Jan 21 '16 at 12:26

0

You can just pipe the GridFS read stream to the response without buffering:

app.get('/picture', function(req, res) {
  // Set correct content type first
  res.contentType('image/png');

  fs
    .createReadStream('/tmp/Disneygoofy2012.jpeg')
    .pipe(res);
});

I guess the problem of your buffering solution was that you only pass the first byte package you receive from GridFS to res.send.

answered Jan 21 '16 at 12:26

saintedlama

6,838
1
28
46

First I would say thank you so much for trying to answer my question and help me. I have made the changes you suggested. I am fairly certain I am doing it wrong. Please see the updated question for my changes and output. If you can help me resolve it would amazing as I've been stuck at this for days. Thanks again. – Skywalker Jan 21 '16 at 12:54

Display images from GridFs (MongoDB)

3 Answers3