2

I'm uploading an image in GridFS but have no idea how to display this in an <img > tag.

I tried the following code:

conn.once('open', function () {
    var gfs = Grid(conn.db, mongoose.mongo);
    gfs.files.find({ filename: 'img1.png' }).toArray(function (err, files) {
        if (err) { console.log(err); }
        console.log(files);
    });
});

I get the result:

[ { _id: 5316f8b3840ccc8c2600003c,
    filename: 'img1.png',
    contentType: 'binary/octet-stream',
    length: 153017,
    chunkSize: 262144,
    uploadDate: Wed Mar 05 2014 15:43:07 GMT+0530 (India Standard Time),
    aliases: null,
    metadata: null,
    md5: '915c5e41a6d0a410128b3c047470e9e3' } ]

Now this is just the file info not the actual file data.

How to display image in HTML?

Oleg
  • 9,341
  • 2
  • 43
  • 58
Anup
  • 9,396
  • 16
  • 74
  • 138

1 Answers1

4

You have to define the Content-Type for the response, and using db connection you can fetch the data. Check the following example to get an idea:

app.get('/filelist', function(req, res) {
    var collection = db.collection('DbCollectionName');
    var da = collection.find().toArray(function(err, items) {
        console.log(items[0]);
        res.writeHead(200, {'Content-Type': 'image/png'});
        res.end(items[1].dbfileName.buffer, 'binary');
    });
});

Edit :

So when you want to set the image as the source, you can convert the binary data of the image(fetched from db) to base64 format. 

var img = document.createElement('img');
img.src = 'data:image/jpeg;base64,' + btoa('your-binary-data'); //JS have btoa() function for it.
document.body.appendChild(img);

or you can use hex to base64 also if your image doesn't support above 

function hexToBase64(str) {
return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
}

and call it as 

img.src = 'data:image/jpeg;base64,' + hexToBase64('your-binary-data');
yasmuru
  • 1,178
  • 2
  • 20
  • 42
  • Gives no result...Can u tell me how to get this `image` & show it in `html`. – Anup Mar 05 '14 at 12:05
  • I'm using this code in my project and its tested one . When you saved the image using gfs in mongo it will be saved as buffer , so you can fetch that using the dbconnection. After specifying the content type as image you can display that as the response – yasmuru Mar 05 '14 at 12:32
  • can you tell where u struggling exactly? – yasmuru Mar 05 '14 at 13:08
  • I am new to angular....in my `html`...i have `` this is where i need the `imgdata`...so in my `routes.js` i have `app.get('/api/getLogo', practices.getLogo);` .... My problem is when i call api...how to put that response in `` – Anup Mar 05 '14 at 13:27
  • Thanks for code.....when i directly copy paste `binary data` from database to my `` ..The image gets displayed – Anup Mar 05 '14 at 13:58
  • my only problem right now is to get that `binary data` in my client controller, when i call my `api`... – Anup Mar 05 '14 at 14:00