Download a PNG file served as binary/octet-stream

Question

steps that will reproduce the problem :

I am saving a Blob object as form data using a service and I am receiving the response as content-type: application/octet-stream as in attached image

What is the expected result?

To download and view the the application/octet-stream as a image into local machine and view it using applications

What happens instead?

able to download the file as image but it says we dont support this file format though its (ex:image.png)

function add() {
  $.ajax({
  url: 'https://localhost:3000/upload/sampleImage.png',
  type: 'GET',
  success: function (data) {
    const link = document.createElement('a');
    link.style.display = 'none';
    link.download = "sample image";
     link.href =  
       'data:' +
       'image/png' +
       ';base64,' +
       window.btoa(unescape(encodeURIComponent(data)));
    link.click();
  },
  error: function (request, error) {
    alert("Request: " + JSON.stringify(request));
  }
});

}

Any ways to download the file and preview it successfully

you mean you want to http get the file in your folder and download it ? and why are you using $ ajax in angular ....we can use httpclient right?? — M A Salman, Mar 29 '20 at 14:07
I wanted to directly download the file after receiving the response. for test purpose i used $ajax, yes can use httpclient as well — Kishore Jv, Mar 29 '20 at 14:15

M A Salman · Answer 1 · 2020-03-30T11:14:51.543

4

Set the responseType as blob in request

Using HttpClient:

this.http.get("https://localhost:3000/upload/sampleImage.png",{responseType:'blob'}).subscribe((img)=>{
        const link = document.createElement('a');
        link.style.display = 'none';
        link.download = "sample image";
         link.href =window.URL.createObjectURL(data);
        link.click();
  });

Now using $.ajax(not recommended,avoid using it) specify the dataType as blob and use window.URL.createObjectURL(data) to create URL

 $.ajax({
  url: 'https://localhost:3000/upload/sampleImage.png',
  type: 'GET',
  xhrFields:{
            responseType: 'blob'
        },
  success: function (data) {
    const link = document.createElement('a');
    link.style.display = 'none';
    link.download = "sample image";
    var blob = new Blob([data], {type: 'image/png'});
    link.href =window.URL.createObjectURL(blob);
    link.click();
  },
  error: function (request, error) {
    alert("Request: " + JSON.stringify(request));
  }

edited Mar 30 '20 at 11:14

answered Mar 29 '20 at 15:18

M A Salman

3,666
2
12
26

though the repsonse is success from service, its going into error block -> console.log(error) gives me parse error .. when i tried the above code – Kishore Jv Mar 29 '20 at 15:34
which method did you try angular one or ajax? – M A Salman Mar 29 '20 at 15:40
i have used ajax method. – Kishore Jv Mar 29 '20 at 15:58
xhrFields:{ responseType: 'blob' }, I've updated the answer – M A Salman Mar 29 '20 at 16:00
1

modified as mentioned, it prints [object Blob] and there is a type error `(index):41 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided. at Object.success ((index):41) at fire (jquery-3.4.1.js:3291) at Object.fireWith [as resolveWith] (jquery-3.4.1.js:3421) at done (jquery-3.4.1.js:9533) at XMLHttpRequest. (jquery-3.4.1.js:9785)` – Kishore Jv Mar 29 '20 at 17:37
got this error `(index):41 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided. at Object.success ((index):41)` – Kishore Jv Mar 30 '20 at 05:43
var blob = new Blob([data], {type: 'image/png'}); link.href =window.URL.createObjectURL(blob); try modifying your code with this.I have updated the answer – M A Salman Mar 30 '20 at 11:15

Download a PNG file served as binary/octet-stream

steps that will reproduce the problem :

1 Answers1