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

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

• javascript
• angular
• typescript
• blob
• content-type

• 2 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 Commented Mar 29, 2020 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 Commented Mar 29, 2020 at 14:15

1 Answer 1

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 remended,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));
  }