Search code examples
angularfilegetblobhttpclient

How do i download a file with the new HttpClient?

So how it used to work is that i did a 'GET' and provided an ID and with the returned data i just had to do this:

const subscription = this.downloadService.downloadFile(id, this.file.folderId).subscribe(data => {
    window.location.href = data.url;
    subscription.unsubscribe();
});

And Chrome would automatically download the file and stay on the site.

Now i do this:

const subscription = this.downloadFile(id, folderId).subscribe(data => {
    const blob = new Blob([data], { type: 'image' });
    const blobUrl = window.URL.createObjectURL(blob);
    window.location.href = blobUrl;
    subscription.unsubscribe();  
});

And Chrome also starts a download but it's always the same file, looking like this in console:

enter image description here

I tried converting it to a file, but the 'window.location.href' needs a URL and i don't have that when i convert it to a file like this:

const file = new File([blob], name, { lastModified: Date.now(), type: 'image' })

What do I need to do with this data to make sure it download it as an image (it's always images that I try to download)?

EDIT: So apparently my httpParams were implemented wrong! This was the wrong way:

const httpParams = new HttpParams();
httpParams.append('action', 'downloadFile');
httpParams.append('fileIds', id.toString());
httpParams.append('currentLibraryFolderId', folderId.toString());

Which passed just an empty httpParams. This is the correct way:

const params = new HttpParams()
    .set('action', 'downloadFile')
    .set('fileIds', id.toString())
    .set('currentLibraryFolderId', folderId.toString());
Solution

  • Try with window.open(url):

    If type will be browser supported like image or pdf etc. it will open otherwise download it.

    HTML:

    <a (click)="downloadFile(fileData, type)" download>Download File</a>

    For Download and save Using FileSaver:

     npm install file-saver --save

 import { saveAs } from 'file-saver/FileSaver';

    If you are getting response as arraybuffer

    var blob = new Blob([data], { type: type});

var url = window.URL.createObjectURL(blob);

saveAs(blob, filename);

var winOpen = window.open(url);


// If Popup blocked
if (!winOpen || winOpen.closed || typeof winOpen.closed == 'undefined') {
       alert( 'Please disable your Pop-up blocker and try again.');
 }