0

I store images with GridFS on MongoDB and I want to display this images on the client side. The code works for little image, but when I want to display images bigger than 5 Mo, I have no return in client side.

ResultController.js :

images.forEach(function(item) {
   GridFileService.getBuffer(item.id, function(res)
   {
       var blob = UtilsService.b64toBlob(res, item.mimetype); //Convert base64 to blob
       var blobURL = URL.createObjectURL(blob);
       $scope.resultsModel.originalImage.push(blobURL); //Store for display in image src tag
   });
});

GridFileService.js :

gridFileService.getBuffer = function(id, callback)
{
   $http(
   {
      method: 'GET',
      url: '/api/file_buffer/' + id
   }).then(function successCallback(response)
   {
      callback(response.data);
   }, function errorCallback(response)
   {
      AlertService.addAlert('danger', response.data);
   });
};

api.js :

app.get('/api/file_buffer/:id', routesFiles.getBufferFile);

routeFiles.js :

function getBufferFile(req, res, next)
{
    var idFile = req.params.id;

    //Get buffer from GridFS with id file
    gfs.readFile({_id: idFile}, function (err, data) {
        if (err)
        {
            log.error('Error on get buffer file ', err);
            return res.status(500).send(err.message);
        }
        else
        {
            //Convert buffer in base64
            var base64 = new Buffer(data).toString('base64');

            return res.status(200).send(base64); // return to client side with datas
        }
    });
}

How can I do to have a quick return about the buffer of a big image ?

Pouchopa
  • 253
  • 1
  • 3
  • 11
  • 1
    Because it's a stream. You are meant to be piping the stream in the response. Why are you trying to base64 encode? And why do you have an angular service to read this? Just change the `"src"` on the image tag dynamically and let the browser do the work. Don't try to reinvent the wheel. – Neil Lunn Jun 23 '17 at 10:55
  • I didn't understand. I am trying to base64 encode to modify in blob and so, display the image. The src tag is already change dynamically with the URL object. I have an angular service to have the buffer of the image because I have the id file or the filename but not the buffer of the file which is store in GridFS. I don't see how to make in other way to obtain the image buffer. – Pouchopa Jun 23 '17 at 12:11
  • I know you don't understand. But try to. Why would you try to send a base64 encoded image to a service when you can just change a `src` tage and it's going to download? And "cache" on the browser! Amazing stufff! Point is, you simply do not do what you are trying to do. We only use base64 for silly little things like, all the icons on the navbar of this site. Let images load normally. You are just getting in the way of the normal process. Binary stream. img tag. It works. – Neil Lunn Jun 23 '17 at 12:16

0 Answers0