Question

141

Displaying Blob image in angularjs

rated 0 times [ 144] [ 3] / answers: 1 / hits: 17562 / 7 Years ago, wed, july 12, 2017, 12:00:00

We are displaying the details of the user in an HTML page and apart from other details it contains a link item in it, which retrieves the image stored as BLOB of the user from the database. Our angular Service is written, Click on the link item opens (which is actually the filename of that image in the database) up a browser window displaying the Image. Both storing and retrieving the image works fine Now our requirement is to just load on first load of HTML page the Image as a preview.

Angular service is like

getDownloadDoc: function(empId) {



  return $http.get(contextPath1 + /PdfServletDoc?documentID= + empId + , {

    responseType: 'arraybuffer'

  }).then(function(response) {

    var data = response.data;

    var file = new Blob([data], {

      type: 'image/jpeg'

    });

    var fileURL = URL.createObjectURL(file);

    window.open(fileURL);

    return response;

  });

},

I am new to AngularJs, if could only get the resources or documentations to look for this. That will be helpful

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

casandra

Add To Favorites

Follow

Total Points: 334

Total Questions: 93

Total Answers: 104

Location: Denmark

Member since Tue, Jul 19, 2022

2 Years ago

casandra questions

1 Difference forRoot and forFeature [Nest JS]

Thu, Feb 25, 21, 00:00, 3 Years ago

1 How to align Material-UI Menu items?

Mon, Jul 6, 20, 00:00, 4 Years ago

1 [GraphQL error]: Message: Unknown fragment

Thu, May 21, 20, 00:00, 4 Years ago

1 onChange handler for Object.keys().map in React to update object properties

Tue, Nov 19, 19, 00:00, 5 Years ago

1 pwa - prompt add to home screen dosen't show

Tue, Sep 17, 19, 00:00, 5 Years ago

View All

answered 7 Years ago shannon · Accepted Answer

I am assuming that your image is downloaded perfectly and fileURL contains path to image,
then you can do but first pass fileURL to controller and in your template file:

<img ng-src={{fileURL}}></img>

In Controller:

you will call your angular service like this:

function yourImageSuccessHandler(fileUrl, options) {

            $scope.fileUrl = fileUrl; // now you will have fileUrl in 

                                      // controller

        }

        yourService.getDownloadDoc(empId, {

            successCallBack: yourImageSuccessHandler

        });

In Service

getDownloadDoc : function(empId, options) {



    return $http.get(contextPath1+/PdfServletDoc?documentID=+empId+, {

                        responseType : 'arraybuffer'

                    }



            ).success(function(data) {

                var file = new Blob([ data ], {

                    type : 'image/jpeg'

                });

                var fileURL = URL.createObjectURL(file);



                if(options && options.successCallBack) {

                    return options.successCallBack(fileURL, {});

                }

            });

        },