Download to computer from URL

Question

I have a server for which I send a request (ID) in response from the server I get a json, inside json i have field ImagePath with url to image. How can I download this picture?

html

<button md-raised-button (click)="DownloadImage(application.ApplicationId)">Download Image</button>

Component

 DownloadImage(applicationId:number)
    {
        var ID=applicationId;
        this.httpService.downloadImage(ID).subscribe((response)=>{
            console.log(response);
        })


    }

Service

downloadImage(applicationId:number)
{
         return this.http.get('http://192.168.0.138/api/GetPhoto?applicationId='+applicationId,{headers:this.headers})
                         .map((res:Response)=> res.json() as DownloadImage
                        );

}

JSON

Object {ImagePath: "http://192.168.0.138:80/Content/photos/29ef5a62-8a84-41cf-92d7-7b76da20357b.jpg"}

score 0 · Answer 1 · answered Jul 05 '17 at 11:20

0

Just try to use regular html anchor tag with download attribute :)

Note: Replace the "response.ImagePath" based on what you name the variable in the controller.

<a [href]="response.ImagePath" download="download.jpg"><i class="fa fa-download"></i> Download</a>

Hope this helps.

answered Jul 05 '17 at 11:20

Mark Cutajar

340
1
6

Thanks for the advice. But I need to make it so that the request is sent and downloaded file based on the link that comes from the server. Is it possible to do so at all? – DeMoN Jul 05 '17 at 11:29
You can either use the following: https://stackoverflow.com/questions/35138424/how-do-i-download-a-file-with-angular2 by transforming the data to blob, however you will have to download the file not the URL. Or use a little hack: 1. Call using (click) as you're doing already. 2. Get the response 3. Trigger click event of hidden button of the href I posted in the first anwser. – Mark Cutajar Jul 05 '17 at 11:37

Nico Van Belle · Accepted Answer · 2017-09-13T08:30:35.427

To chain requests, you can transform the Observable to a Promise, and then call .then() on it, which will get the mapped result of the previous call as a parameter. I'm not going to add the code for downloading a file in angular2 because it has been answered repeatedly in a dozen of posts.

Service

downloadImage(applicationId:number) {
    const _self = this;
    return this.http.get(`http://192.168.0.138/api/GetPhoto?applicationId=${applicationId}`, {headers:this.headers})
       .map((res:Response) => res.json() as DownloadImage)
       .toPromise()
       .then(function(dlImage: DownloadImage) {
          // Launch second call to dlImage.ImagePath
          const options = new RequestOptions({headers: myHeaderObj});
          return _self.http.get(dlImage.ImagePath, options);
        });
  }

Component

DownloadImage(applicationId:number) {
    this.httpService.downloadImage(applicationId).subscribe(resp => {
          // ... See numerous other SO topics for examples
    });
}

Just make sure the pictures are served from the same domain, otherwise you will run into CORS issues (but this also has been solved in a dozen of SO posts).

Download to computer from URL

2 Answers2