nodejs display image stored in gridFS to html

Question

Hi I'm new to nodejs and gridFS I'm trying to display images stored in gridFS to my html page

Currently, I am using this code.

gfs.exist(options, function(err, found){
        if(err) return handleError(err);
        if(found)
        {
            console.log("Found Image");
            var fs_write_stream = fs.createWriteStream('public/images/'+req.user._id + '_photo' + '.jpg');
            var readstream = gfs.createReadStream({
                filename: req.user._id + '_photo'
            });
            readstream.pipe(fs_write_stream);
            readstream.on('close', function(){
                console.log('file has been written fully');
                res.render('profile', {
                    user : req.user,
                    message: req.flash('info'),
                    user_photo_url: 'images/'+req.user._id+'_photo.jpg'
                }); 
            }); 
        }
    });

But my code need to download image from gridFS. If my server storage is not enough, it should be problematic

Is there any method to display gridFS images to html directly?

score 2 · Answer 1 · answered Jul 03 '15 at 05:55

2

Add a route for resources in your images directory and pipe the gridfs readstream to the response directly like so

app.get('/images/:name', function(req, res) {
    var readstream = gfs.createReadStream({
        filename: req.param('name');
    });
    res.pipe(readstream);
})

In your html, all you need to do is specify the src url in your images correctly

answered Jul 03 '15 at 05:55

Sasikanth Bharadwaj

1,457
1
11
11

5

Ah your code did't work but changing readstream.pipe(res); it worked well – kwony Jul 04 '15 at 03:02

score 1 · Answer 2 · answered Sep 07 '15 at 12:51

         var pi_id   =  fields.pic_id;

         gfs.findOne({ _id: pi_id }, function (err, file) {
                    console.log(file);
                    if (err) return res.status(400).send(err);
                    if (!file) return res.status(404).send('');

                    res.set('Content-Type', file.contentType);
                    res.set('Content-Disposition', 'attachment; filename="' + file.filename + '"');

                    var readstream = gfs.createReadStream({
                      _id: file._id
                    });

                    readstream.on("error", function(err) {
                      console.log("Got error while processing stream " + err.message);
                      res.end();
                    });

                    readstream.pipe(res);

                    console.log(readstream.pipe(res))
                  });

this method downloads the file instead showing the image in the browser. how can I get the image with url instead downloading? — Tharindu, Jan 15 '17 at 04:11

score 0 · Answer 3 · edited Jun 06 '19 at 10:17

0

Try the function like below,

function(req,res){
  gfs.files.findOne({ filename: req.params.filename }, (err, file) => {
    res.contentType(file.contentType);
    // Check if image
    if (file) {
      // Read output to browser
      const readstream = gfs.createReadStream(file.filename);
      readstream.pipe(res);
    } else {
        console.log(err);
    }
  });
};

edited Jun 06 '19 at 10:17

Jithin Scaria

1,271
1
15
26

answered Jun 06 '19 at 09:27

Om Mo

1
1

nodejs display image stored in gridFS to html

3 Answers3

Linked