Custom file name of file to download in Angular 2

Question

I am trying to download a file with custom name from any url.

I am trying this on my code

downloadAttachment(attachment) {
    var a = document.createElement('a');
    a.href = attachment.url; //URL FOR DOWNLOADING
    a.download = 'CustomName.png';
    a.click();
}

and from view it is <button (click)="downloadAttachment(attachment)"></button>

It is downloading the file but filename is still picked up from the url.

How to add custom name to the file?

I will be providing a meaning full name later for now, i just need to make it possible to have a custom name — Anand Siddharth, Mar 05 '18 at 08:11

score 5 · Answer 1 · answered Mar 05 '18 at 08:14

Download file with http.get:

    let queryApi = someApi
    this.http.get(queryApi, { responseType: 'blob', observe: 'response' })
        .subscribe(respone => {

            // file-type
            let fileName = 'custom-file-name.fileExt';             

            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(respone.body);
            link.download = fileName;
            link.click();
        });

Roberto Zvjerković · Accepted Answer · 2018-03-05T08:35:18.113

1

If the HTTP header Content-Disposition: is present and gives a different filename than this attribute, the HTTP header has priority over this attribute.

Check the response headers.

Chrome Download Attribute not working

So you will have to change your back end where the file is stored, if possible.

EDIT: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

This attribute is only honored for links to resources with the same-origin.

Edit2:

getImage(imageUrl: string): Observable<File> {
    return this.http
        .get(imageUrl, { responseType: ResponseContentType.Blob })
        .map((res: Response) => res.blob());
}

Now you have a file in your memory, and you can save it however you will.

edited Mar 05 '18 at 08:35

answered Mar 05 '18 at 08:11

Roberto Zvjerković

9,657
4
26
47

the file is stored in s3 – Anand Siddharth Mar 05 '18 at 08:11
Check the response headers in your network when downloading the file and find Content-Discposition attribute. If it's there, you can't really acomplish what you're asking. – Roberto Zvjerković Mar 05 '18 at 08:14
response headers don't have a Content-disposition, I will look into aws s3 to how to add cusotm headers and then i will add 'Content-Disposition: inline' and check. – Anand Siddharth Mar 05 '18 at 08:22
seems like the best option for me now is to save the file with the desiered name on s3, best to support all the browsers – Anand Siddharth Mar 05 '18 at 08:31
I guess. You could also download the file as Base64 and save it as you wish. Check the edit again. – Roberto Zvjerković Mar 05 '18 at 08:34

score 0 · Answer 3 · answered Jan 24 '19 at 06:56

0

Use in this way

<a [href]=URLoftheFile download="FilenameWithExtension">DownloadFile</a>

But does not work with cross origins

answered Jan 24 '19 at 06:56

dasunse

2,839
1
14
32

Custom file name of file to download in Angular 2

3 Answers3