mongodb gridfs encoding picture base64

Question

i try to readout an image, saved in mongodb, via gridfs (without temporary file) it should be directly sent to ajax, which injects it into html

when i use my actual functions a large bit string is formed and sent to client (is saved in ajax response var)

but as it reaches the client, the bits arent correct anymore

so i look for a way to encode the picture before it is sent (into base64) (or is there any other way?)

Serverside - javascript, gridfs

exports.readFileFromDB = function(req, res, profile, filename, callback){
    console.log('Find data from Profile ' + JSON.stringify(profile));

    var GridReader = new GridStore(db, filename,"r");

    GridReader.open(function(err, gs) {

        var streamFile = gs.stream(true);

        streamFile.on("end", function(){

        });

        // Pipe out the data
        streamFile.pipe(res);
    GridReader.close(function(err, result) {

    });

Clientside - javascript ajax call:

function imgUpload(){

    var thumb = $("#previewPic");

    $('#uploadForm').ajaxSubmit({

        beforeSend:function(){
            //launchpreloader();
        },

        error: function(xhr) {
            //status('Error: ' + xhr.status);
        },

        success: function(response) {
            console.log(response);
            var imageData = $.base64Encode(response);
            console.log(imageData);
            thumb.attr("src","data:image/png;base64"+imageData);
            $("#spanFileName").html("File Uploaded")
        }
    });
}

score 1 · Accepted Answer · answered Jul 17 '13 at 20:45

I'm doing something similar for a current project, but when the upload is complete, I return a JSON object containing the URL for the uploaded image:

{ success : true, url : '/uploads/GRIDFSID/filename.ext' }

I have a route in Express that handles the /uploads route to retrieve the file from GridFS and stream it back to the client, so I can use the above URL in an IMG SRC. This is effectively what appears in the DOM:

<img src="/uploads/GRIDFSID/filename.ext">

The route handler looks something like this (it uses node-mime and gridfs-stream):

app.get(/^\/uploads\/([a-f0-9]+)\/(.*)$/, function(req, res) {
  var id        = req.params[0];
  var filename  = req.params[1];

  // Set correct content type.
  res.set('Content-type', mime.lookup(filename));

  // Find GridFS file by id and pipe it to the response stream.
  gridfs
    .createReadStream({ _id : id })
    .on('error', function(err) {
      res.send(404); // or 500
    })
    .pipe(res);
});

It obviously depends on your exact setup if my solution works for you.

mongodb gridfs encoding picture base64

1 Answers1