dayuloli dayuloli - 3 months ago 12
Javascript Question

Displaying images from private subdirectory in Meteor

I have a set of images I am storing in my

/private
sub-directory, I am trying to retrieve the data inside a server method and sending the data back to the client to be displayed.

How can I do that?




I have an image named
test.png
inside
/private/photos
. Here's what I've tried.

/client/test.js

Template.test.onRendered(function () {
Meteor.call('returnPhoto', 'photos/test.png', function (e, data) {
console.log(data);
console.log(window.btoa(data));
$('#imgContainerImg').attr('src', 'data:image/png;base64,' + window.btoa(data));
});
})


/server/methods.js

returnPhoto: function (assetPath) {
return Assets.getText(assetPath);
return Assets.getBinary(assetPath);
}


I tried both
Assets.getText
and
Assets.getBinary
, the first gives me some binary gibberish, and the second gives me an array of numbers. Using the
btoa
function doesn't work regardless.




I have looked at the CollectionFS package, but I do not need to upload the pictures and store them all in a collection. I'd like the images to be available as soon as I put them in that directory, without having to call
myFSCollection.insert
.

Answer

Using the following, I was able to get images from the private directory, send it over to the client as a byte array, which then gets converted into a base64 string and displayed as data URL.

client/test.js

Template.test.onRendered(function () {
    Meteor.call('returnPhoto', 'photos/test.png', function (e, data) {
        var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(data)));
        $('#imgContainerImg').attr('src', 'data:image/png;base64,' + base64String);
    });
})

server/methods.js

returnPhoto: function (assetPath) {
    return Assets.getBinary(assetPath);
}