Writing/Reading images into MongoDB with Meteor.

Question

I need to write image file to mongoDB, and than read it to html page element. I find this post Meteor: uploading file from client to Mongo collection vs file system vs GridFS

And try to write file to databse with first way: by DDP, saving file to a mongo collection.

I open my database with RoboMongo, and find there my image as binary type field.

Now i get another trouble: i can not find the way, that i can read image from database and convert it from binary object to image and use it as image in meteor app.

Please help, give me some examples, how i can do this operation in Meteor.

Here is my code to writing image to DB

var image_buffer;

Template.group_add_modal.events({

    'click #create-group':function(event, template){

        console.log('create group clicked');

        var group_name = template.find('#new-group-name').value,
            group_desc = template.find('#new-group-desc').value,
            reader = new FileReader(),
            group = {};


        group = {
            created_by:Meteor.userId(),
            created_at: new Date(),
            name:group_name,
            description:group_desc,
            image:image_buffer,
            participants:[
                Meteor.userId()
            ]
        };
        console.log(image_buffer);
        addGroupDocument(group);
        Modal.hide();


        function addGroupDocument(document){
            groups.insert(document);
        }
    },

    'change #new-group-image' : function(event,template){
        var file = event.target.files[0];

        console.log('change new group image event');
        if (!file) return;

        var reader = new FileReader();

        reader.onload = function(event){
            image_buffer = new Uint8Array(reader.result);
            console.log('image buffered');
        }

        reader.readAsArrayBuffer(file);
    }

});

score 0 · Accepted Answer · answered Apr 14 '16 at 19:39

Here is response for my question:

template.find('#group-image').src = 'data:image/png;base64,'+encode(image_buffer);

    function encode (input) {
        console.log(input);
        var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
        var output = "";
        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        var i = 0;

        while (i < input.length) {
            chr1 = input[i++];
            chr2 = i < input.length ? input[i++] : Number.NaN; // Not sure if the index
            chr3 = i < input.length ? input[i++] : Number.NaN; // checks are needed here

            enc1 = chr1 >> 2;
            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
            enc4 = chr3 & 63;

            if (isNaN(chr2)) {
                enc3 = enc4 = 64;
            } else if (isNaN(chr3)) {
                enc4 = 64;
            }
            output += keyStr.charAt(enc1) + keyStr.charAt(enc2) +
                keyStr.charAt(enc3) + keyStr.charAt(enc4);
        }
        return output;
    }

Writing/Reading images into MongoDB with Meteor.

1 Answers1