Angular 2+ downloading image from server

Question

I am working to download image from server using express api, Image data is receiving in front end in special characters form, but image does not download. I want to download the image.

Front end code:

downloadFile(data: Response) {
    var blob = new Blob([data], { type: 'image/jpeg' });
    var url = window.URL.createObjectURL(blob);
    window.open(url);
  }

  downloadData() {        
    this.workshopService.downloadData(this.workshop.id)
      .subscribe((result) => {
        this.downloadFile(result)            
      }, error => {
        console.log(error)           
      });
  }

Observable which creates http get request:

downloadData(id) {
    let apiUrl = 'http://localhost:3000/api/download-data/';            
    return this.http.get(`${apiUrl}${id}`)         
      .catch((error: Response) => Observable.throw(error.json()));
  }

Express js api:

router.get('/download-data/:id', function (req, res, next) {       
    Workshop.findById(req.params.id).then((task) => {            
        res.download(task.workshopData,'me.jpg')
    }).catch(next);
});

Please help, how to download the image that is receiving now in special characters notation. I am getting this response from server, I think the image is receiving in base64 format.

Sandip Jaiswal · Accepted Answer · 2018-01-10 12:25:42Z

4

You just need to tell angular that you want response as stream rather than json. Use following code:

import { ResponseContentType } from '@angular/http';


downloadData(id) {
    let apiUrl = 'http://localhost:3000/api/download-data/';            
    return this.http.get(`${apiUrl}${id}`, { responseType: ResponseContentType.ArrayBuffer })         
      .catch((error: Response) => Observable.throw(error.json()));
  }

Replace service with following:

downloadFile(data: Response) {
    console.log(data);
    // may be you need to use data._body to get data of body
    var blob = new Blob([data], { type: 'image/jpeg' });
    var url = window.URL.createObjectURL(blob);
    window.open(url);
  }

Hope it will help

edited Jan 10, 2018 at 12:25

answered Jan 10, 2018 at 10:13

Sandip Jaiswal

3,7702 gold badges15 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Waleed Shahzaib Over a year ago

Getting syntax error after adding { responseType: "arraybuffer" }, error message says: Argument of type '{ responseType: "arraybuffer"; }' is not assignable to parameter of type 'RequestOptionsArgs'.

Waleed Shahzaib Over a year ago

Image is still not showing in new window. and not downloading

Sandip Jaiswal Over a year ago

Can you paste screenshot of response of browser. Do you got buffered response from server?

Waleed Shahzaib Over a year ago

I have edited the question and provided the screen shot of data coming from server.

Sandip Jaiswal Over a year ago

Your response is looking fine. Server is sending base64 encoded image. Can you replace your code. I updated my answer.

|

Collectives™ on Stack Overflow

Angular 2+ downloading image from server

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related