displaying images using file reader and blob

Question

I want display a set of thumbnail images using fileReader api of javascript.I will send requests to my server and it will respond with a stream of bytes.I am sending requests through native xhr methods.But its not displaying any images.

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript" src="/js/jquery-2.1.1.js"></script>
        <script>
            var thumbURL = ['https://domainname.com/api/th/1','https://domainname.com/api/th/2','https://domainname.com/api/th/3','https://domainname.com/api/th/4','https://domainname.com/api/th/5','https://domainname.com/api/th/6'];
            (function(){
            for(var i=0;i<thumbURL.length;i++){
                var oReq = new XMLHttpRequest();
                 oReq.open("GET", thumbURL[i]);
                 oReq.responseType = "blob";
                 oReq.onload = function(oEvent) {

                    if (this.status == 200) {

                    var fileReader = new window.FileReader();
                    fileReader.readAsDataURL(this.response);
                    var response=fileReader.result;
    $("#thumbnails").append("<img src="+response+"></div>");
                    }
                };


                 oReq.send();
            }

            })();

        </script>   
    </head>
    <body>

        <div id="thumbnails"></div>

    </body>
</html>

Any help will be greatly appreciated.Thanks in advance.

UPDATE:correct solution

<html>
    <head>
    <script type="text/javascript" src="/js/jquery-2.1.1.js"></script>
    <script>
    var thumbURL = ['https://domainname.com/api/th/1','https://domainname.com/api/th/2','https://domainname.com/api/th/3','https://domainname.com/api/th/4','https://domainname.com/api/th/5','https://domainname.com/api/th/6'];

    (function(){
    for(var i=0;i<thumbURL.length;i++){
    var oReq = new XMLHttpRequest();
    oReq.open("GET", thumbURL[i]);
    oReq.responseType = "blob";
    oReq.onload = function(oEvent) {
    if (this.status == 200) {
    var filereader=new window.FileReader();
    filereader.readAsDataURL(this.response);
    filereader.addEventListener("load",function() {
    var response=filereader.result;
    $("#thumbnails").append("<img src="+response+"></div>"); 
    },false); 
    }
    };
    oReq.onerror=function(e){
    alert("error");
    };

    oReq.send();
    }


    })();
    </script> 
    </head>
    <body>
    <div id="thumbnails"></div>

    </body>
    </html>

Have you checked whether the generated `` element contains a properly-formatted [data URI](http://stackoverflow.com/questions/1207190/embedding-base64-images)? — Dragomok, Mar 18 '17 at 17:18
`readAsDataURL` is an async operation. The result won't be ready right away, you need to subscribe to the `load` event. See example here: [MDN](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL) — Leandro, Mar 18 '17 at 17:25

score 1 · Accepted Answer · answered Mar 18 '17 at 17:28

1

The FileReader API is asynchronous so you have to add a load handler and when triggered, then add the result:

var fileReader = new window.FileReader();
fileReader.onload = function() {   // need load handler
  var response=this.result;
  $("#thumbnails").append("<img src="+response+"></div>");
};
fileReader.readAsDataURL(this.response);

I would in any case recommend to skip the conversion part. Using the blob directly not only saves memory, but is much faster. You just have to create the image element manually, for example:

oReq.onload = function(oEvent) {
  if (this.status === 200) {
    var img = new Image;
    img.src = (URL || webkitURL).createObjectURL(this.response);
    $("#thumbnails").append(img);  // todo: append the </div> separately
  }
};

answered Mar 18 '17 at 17:28

oReq.onload = function(oEvent) { if (this.status === 200) { fileReader.addEventListener("onload", function () { var blobresponse=fileReader.result; $("#thumbnails").append(""); }, true); } }; fileReader.readAsDataURL(this.response); – bharathwaj ravi Mar 19 '17 at 16:08
I used like this but it is giving me an error message like "Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'." – bharathwaj ravi Mar 19 '17 at 16:11
@bharathwajravi you still using XMLHttpRequest() to fetch a type blob right? try console.log the response to see what the data returned is. – Mar 19 '17 at 18:04
is the data URL secured?I can even able to access it in incognito mode.Is there any way to make it not work in other tabs similar to blob URL? – bharathwaj ravi Mar 23 '17 at 05:58

displaying images using file reader and blob

1 Answers1