CODEWITHSUNDEEP
javascriptangularjsfileencoding
changtung
changtung

Reputation: 1624

Creating Blob object from raw file downloaded from server with $http.

On server there is url with files stored. Url is http://website.com/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.com/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.

Upvotes: 3

Views: 10120

Answers (1)

guest271314
guest271314

Reputation: 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

Upvotes: 11

Related Questions