2

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

Improve this question
1
  • 2
    Don't generate Blob instead do arraybuffer to base64; then adding data:image/jpeg;base64,responsestring will give you proper image when you will give that as a src to image tag. Ref: stackoverflow.com/questions/9267899/… . For download just use the same respponse string with data:application/octate-stream;base64,responsestring Commented Jul 12, 2017 at 9:12

2 Answers 2

Reset to default
4

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, {});
                }
            });
        },
Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

Yes the image is getting downloaded perfectly and I suppose PathURL is also correct then. Can I just simply just pass this fileURL variable from service to controller..?? ...Because I am doing that but the Image is not getting loaded in img tag.
@MozifBeigh you can pass variables in callbacks.
If am passing the variable back to controller the console.log (fileURL) just contains the Status code (200) not the URL. In service the URL is correctly displaying blob:localhost:8080/405f0b1d-fcb7-42a8-860e-2d04f033f01b.
Yes. Its working....URL is getting passed correctly but image still not getting rendered on HTML page.
comment your html code and variable in which imageUrl is stored
|
3

Instead of creating a dataURL from an arraybuffer, set the responseType to 'blob'.

To display the blob as an image with the ng-src directive, convert the blob to a data URL with URL.createObjectURL():

  var config = {
      responseType: 'blob'
  };
  $http.get(url,config)
    .then(function(response) {
      vm.blob = response.data;
      vm.dataURL = URL.createObjectURL(vm.blob);
  });

  <h1>Blob image demo</h1>
  <img ng-src="{{dataURL}}">

The DEMO

angular.module("app",[])
.run(function($rootScope, $http) {
  var vm = $rootScope;
  var config = {responseType: 'blob'};
  var url = "https://i.imgur.com/YnjcO.jpg"
  $http.get(url,config)
    .then(function(response) {
      vm.blob = response.data;
      vm.dataURL = URL.createObjectURL(vm.blob);
  });
})
<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app=app>
    <h1>Blob image demo</h1>
    <img ng-src="{{dataURL}}" style="width: 200px">
  </body>

Update

the img src is pointing to the URL but it is showing image src unsafe blob and giving just small image icon. I tried to add 

$compileProvider.aHrefSanitizationWhitelist(
     /^\s*(https?|ftp‌​‌​|mailto|chrome-ext‌​en‌​sion):/
  ); 
$compileProvider.imgSrcSanitizationWhitelist(
    /^\s*(https?|f‌‌​​tp|mailto|chrome-ex‌​t‌​ension):/
);

But still facing same issue

The use AngularJS V1.6 or set the default sanitation settings to:

var aHrefSanitizationWhitelist = 
                 /^\s*(https?|ftp|mailto|tel|file):/;
var imgSrcSanitizationWhitelist = 
                 /^\s*((https?|ftp|file|blob):|data:image\/)/;

For more information,

Improve this answer

3 Comments

the img src is pointing to the URL but it is showing image src unsafe blob and giving just small image icon. I tried to add $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp‌​|mailto|chrome-exten‌​sion):/); $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|f‌​tp|mailto|chrome-ext‌​ension):/); But still facing same issue
What version of AngularJS are you using? It works with V1.6 in the above Demo.
this solution sometimes works, rather than setting response type blob I think array buffer solves the problem as mentioned by @wasif

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.