CODEWITHSUNDEEP
javascriptember.jsblobhandlebars.js
Bhoomi
Bhoomi

Reputation: 801

Ember - HandleBar does not display blob image

I am getting image from the server in Base64 encoding.

My Base64 response is correct. On the client side I am using following :

var blob = base64ToBlob(content, {type: 'image/jpeg'});
            URL = window.URL || window.webkitURL;
            var blobUrl = URL.createObjectURL(blob);
            //Displaying image in div works.
            var elImage = $("#dbimage");
            elImage.append("<img src='data:image/jpeg;base64," + content+ " '/>");
            ///This doesn;t work.
            return blobUrl;

var base64ToBlob = function(base64) {
  var binary = atob(base64);
  var len = binary.length;
  var buffer = new ArrayBuffer(len);
  var view = new Uint8Array(buffer);
  for (var i = 0; i < len; i++) {
    view[i] = binary.charCodeAt(i);
  }
  return new Blob([view], {type: 'image/jpeg'});
};

I am returning the blobURL to HandleBar template. It does not seem to recognize the blob.

This conversion is encapsulated in a promise. In the HandleBar template I am writing something like this : 

<img  {{bind-attr src=image.content}}  />

This promise is present in the image attribute. The image displayed in the div works fine, but the one in the blob does not display.

Edit :

I am returning the promise, like this :

image : function() {
var promise =  jQuery.ajax({
        url: '/getattachments/?id=' + this.id + "&name=" + docname,
       contentType: 'image/jpeg',
        type: 'GET',
        processData : false,
        success: function(content) {
            var blob = base64ToBlob(content, { type: 'image/jpeg'} );
           URL = window.URL || window.webkitURL;
            var blobUrl = URL.createObjectURL(blob);
            return blobUrl;                
        },
       error : function(content)
       {
           Em.Logger.info('Model:', this.id, 'has no image', err);
           return '';
        }
       return DS.PromiseObject.create({ promise: promise });
      }.property('_attachments'),
    });

Pl help.

Thanks.

Upvotes: 1

Views: 1839

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

In the particular answer you provided there are a couple of little issues.

The property needs to be a computed property, not just a function

foo: function(){

}.property()  // <-------this here

Additionally you were using part of Ember Data (the DS namespace) which isn't part of Ember, it is a separate product. This is fine, but you'll need to include the file if you're going to use it.

And since the promise is returning straight text, and not an object, you'll need to hook up to the content property of the promise object.

<img {{bind-attr src=img.content}}/>

http://emberjs.jsbin.com/qiyodojo/8/edit

Upvotes: 1

Related Questions