How to set the html source of an image from binary data using node+mongoose

Ok, I am attempting this for the first time and thus I am not sure about a couple of things.

First, the model that I have in mongoose for storing profile pictures:

var pictureSchema = new mongoose.Schema ({
    _id      : {"type": String , "required": true,  "default": "", "unique": true},
    picture  : {"type": Buffer , "required": false, "default": ""},
    _revision: {"type": Number , "required": true,  "default": 0}
});

The first question is whether the empty string is good as default value for Buffer. Upon creation of the relevant document in the collection I can see the following in the mongo shell:

> db.pictures.findOne();
{ "_id" : "user1", "_revision" : 0, "picture" : BinData(0,""), "__v" : 0 }
> 

So far it looks pretty much ok. Now I want to store in the picture property of the document an image that is uploaded from the browser. For that I use a FileReader and I read the picture using reader.readAsBinaryString(file); (My other option seems to be reader.readAsDataURL(file); but I think I want the binary version.)

So far so good. I am performing a PUT http request so that I can replace the document in the database, where the "picture" property of the JSON document has been set equal to event.target.result from the file-event-handler that is associated with the FileReader. This part looks pretty reasonable as I can see lots of characters when I make a console.log of the JSON object that is being transmitted.

However, now I may have my first issue as in the JSON object that I receive the "picture" property starts like PNG\r\n\u001a\n\u0000\u0000\u0000\rIHDR\u0000\u0000\u0000. Another query in the mongo shell reveals that "picture" is BinData(0,"wolQTkcNChoKAAAADUlIRFIAAAB9AAAA....), so, the characters in the beginning are different. First of all, am I doing the transmission correctly?

Then, when I am getting again the same document so that I can read the picture again, I want to set the source of an img to be equal to the binary data that I just read from the JSON.

How can I set the img source to be equal to the binary data that I have in my JSON object? That is the real question that I have no clue how to do.

Thank you in advance for your time.

Update: Oct 22

I actually managed to solve my problem, but I am not happy with my method. In particular, when I have finished loading the image with the FileReader I use btoa to convert the contents to ascii; i.e. a method like this

mem.ascii  = window.btoa(mem.file);

where in mem.file the result of FileReader is stored. Btw, I also use the method reader.readAsDataURL(file); this time based on answers/tutorials scattered around the internet. Similarly I changed my model and in the picture property I set it equal to String rather than Buffer. Then - at least for me -, magic happens, and I can see that the value of the picture property starts like this

"data:image/png;base64,iVBORw0KGgoAAAAN....."

But then based on all the digging around I could simply send this back to the client and see if it works; especially because at that point I was very happy that this answer existed. And indeed, without converting anything on the client side I simply set the source of the image with a command of the form

$('<img>', { src: mem.file }).appendTo('#picPreview');

The advantage of this approach is that I ended up not using Blobs at all which seem so relevant to what I am doing but I am totally clueless (and have not managed in my limited attempts to have a working example).

But still, I am not happy with this solution because now in the model the picture is described as a String rather than a Buffer which should be the real thing.