cvjensen cvjensen - 2 months ago 14
Javascript Question

Populate ng-flow with jpeg/jpg as blob

I'm currently trying to populate ng-flow with images from my webserver(nodejs http-server), and I found this thread:

Populating image files with ng-flow.js from json

As you can see in the answer from Aidas, he says that you need to add the data to a blob and then use addFile(blob)

But... when I use $resource to GET an url like:

http://localhost:8080/3c6397ff-cbb4-4a1c-98b3-5304e02c1bd4.jpg

and then take the value from $resource, and adding it to a blob the image is missing - In ng-flow it says that the blob is 15kb - and not the 700kb the actually image is.

I've read that the picture could be base64 formatted, but my google dev console says:

content-length:780831
content-type:image/jpeg; charset=utf-8


If I take a look at the response data in google dev console, there's alot of questionmarks (it cannot display the character I guess).

How do I get the response formatted correctly, so I can add it to ng-flow using the addFile(blob) function?

Answer

I ended up doing like this..

My $resource function look like:

ENV.imagesEndpoint = 'http://localhost:8080/

id = the image name / ID

getimages: $resource(ENV.imagesEndpoint + id, {}, {
    get: { 
      method: 'GET',  
      isArray: false,
      responseType: 'arraybuffer',
      transformResponse: function(data) {
        // Stores the ArrayBuffer object in a property called "data"
        return { data: data };
      }
      //headers: {'Content-Type': 'image/jpeg;charset=utf-8;base64'}
    }
  })

My controller look like:

angular.forEach($scope.images, function(imageid) {
        filefactory(imageid).getimages.get().$promise.then(function(value) {
          $timeout(function() {
              var blob = new Blob([value.data], {type: 'image/jpeg'});
              blob.name = 'file.jpg';
              $scope.obj.flow.addFile(blob);
          });
        });
      });