On server there is url with files stored. Url is I do $http get on this url.

$http.get(url, { responseType: "arraybuffer" });

I want to create Blob object from this. I am sure that object is of type png, because it had this extension before upload and it shows properly.

new Blob(result.data, {type: "image/png"});

I get message: Failed to construct 'Blob': The 1st argument is neither an array, nor does it have indexed properties.

Response from server GET in developer console looks like:

ÿØÿàJFIFÿþ;CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), quality = 60
ÿÛC





 ' .)10.)-,3:J>36F7,-@WAFLNRSR2>ZaZP`JQROÿÛC&&O5-5OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOÿÂÒ"ÿÄÿÄÿÚæå2ag\Ý#úDê3[Zdfc5±Ô¢¬æ)K<`¤l2¸ÊánYR±aA`Í%RÈfbz!¤tÞÑ-µd7ZªÀ[hz¨f¥>©cAV¬{3á R³F0  W>~c³"ðÈìøÖ²ÇBÙ³±+
½ò9tµ°õ

I tried to set Blob type to application/octet-stream and also do $http.get without specified responseType.

How can I create a proper Blob file? I need Blob File, to create File object which is an entry data to implemented logic to display files in slideshow with modals. I have implemented logic for files of type File, which were created by input forms - implementation was done for a need before uploading to server. Now it turns out that server doesn't return same files to me, but return only urls of files, which created an idea to convert from url to File in order to dont repeat in that logic.

On server there is url with files stored. Url is http://website./abc I do $http get on this url.

$http.get(url, { responseType: "arraybuffer" });

I want to create Blob object from this. I am sure that object is of type png, because it had this extension before upload and it shows properly.

new Blob(result.data, {type: "image/png"});

I get message: Failed to construct 'Blob': The 1st argument is neither an array, nor does it have indexed properties.

Response from server http://website./abc GET in developer console looks like:

ÿØÿàJFIFÿþ;CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), quality = 60
ÿÛC





 ' .)10.)-,3:J>36F7,-@WAFLNRSR2>ZaZP`JQROÿÛC&&O5-5OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOÿÂÒ"ÿÄÿÄÿÚæå2ag\Ý#úDê3[Zdfc5±Ô¢¬æ)K<`¤l2¸ÊánYR±aA`Í%RÈfbz!¤tÞÑ-µd7ZªÀ[hz¨f¥>©cAV¬{3á R³F0  W>~c³"ðÈìøÖ²ÇBÙ³±+
½ò9tµ°õ

I tried to set Blob type to application/octet-stream and also do $http.get without specified responseType.

How can I create a proper Blob file? I need Blob File, to create File object which is an entry data to implemented logic to display files in slideshow with modals. I have implemented logic for files of type File, which were created by input forms - implementation was done for a need before uploading to server. Now it turns out that server doesn't return same files to me, but return only urls of files, which created an idea to convert from url to File in order to dont repeat in that logic.

• javascript
• angularjs
• file
• encoding

• It seems that logic with PDFJS and Image can be created from url... – changtung Commented Oct 22, 2015 at 7:32
• "Failed to construct 'Blob': The 1st argument is not an array" seems to be a pretty explicit error message?! The Blob constructor takes an array of buffers. – Bergi Commented Oct 22, 2015 at 7:45

1 Answer 1

Try

$http.get(url, { responseType: "blob" });

or

// missing `[]` at `js` at Question
new Blob([result.data], {type: "image/png"});

Note XMLHttpRequest responseType could also be set to "blob", see How to build PDF file from binary string returned from a web-service using javascript