Angular 2 Download File from URL

Question

Hi I have connected my Angular/Ionic 2+ app to Amazon S3. In my app when I want to download a file my backend delivers a unique pre-signed URL generated from my S3. Looks something like this:

https://s3.ap-southeast-2.amazonaws.com/test%2F1/435345345-4545-4aa8-8a8a-etertertttrt-4addd157-ac38-41fd-5454-8ffa709ee77fcsdfsdfa ...

My question is how do I download the file programatically through my component once I have the url? I have tried so far without luck:

window.open(url, '_blank');

And

getFile(url: string): void {
    this.http.get(url)
    .map((res) => {
        return new Blob([res.blob()], { type: 'image/jpeg' })
    })
    .subscribe(res => {
      saveAs(res,'test.jpg');
      let fileURL = URL.createObjectURL(res);
      window.open(fileURL);
    }, error => {
        console.log(error);
    });
    console.log('Get File http');
  }

With the above code I get an error: The request body isn't either a blob or an array buffer.

Appreciate any help on this thanks..

Answer 1

Take a look at the File Transfer Plugin .

This is used to download files in a Ionic 2 application. Please note there's a bug at the moment in the latest version of the plugin (1.7.0), which occurs when you build your application. I am using version 1.6.3 at the moment. So install the plugin using the following command:

Ionic cordova plugin add cordova-plugin-file-transfer@1.6.3