I have spring boot backend. I am downloading file using HttpClient in angular and also using 'FileSaver.js' library for saving blobs. I have also sent some headers when requesting file from the backend. The code works well. But, it downloads the file in the browser when the whole file is downloaded, i.e., you wont see the progress of file download in the browser. You can see its downloading the file in the 'network' tab of the console, but only shows up when the whole file is downloaded.
@Injectable({ providedIn: 'root' })
export class FileDownloaderComponent{
fileDownloadApi: string = ServiceApiUrl.FileServiceApiUrl + 'download/';
constructor(private http: HttpClient, private sanitizer: DomSanitizer){}
getFileAsAttachment(fileID: string){
let requestHeader: HttpHeaders = new HttpHeaders({
'Authorization': 'Bearer ' + JSON.parse(localStorage.getItem('auth'))?.access_token,
'Content-Disposition': 'attachment'
})
this.downloadFile(fileID, requestHeader)
.subscribe(
(res: any) => {
let fileName = res.headers.get('content-disposition').split(';')[1].split('filename')[1].split('=')[1].replaceAll('"', '');
const blob = new Blob([res.body], { type: res.type });
saveAs(blob, fileName);
});
}
async getInlineImage(fileID: string){
let requestHeader: HttpHeaders = new HttpHeaders({
'Authorization': 'Bearer ' + JSON.parse(localStorage.getItem('auth'))?.access_token,
'Content-Disposition': 'inline'
})
return this.downloadFile(fileID, requestHeader)
}
downloadFile(fileID: any, header: HttpHeaders): Observable<HttpResponse<Blob>> {
return this.http.get<Blob>(`${this.fileDownloadApi}${fileID}`, {
headers: header,
observe: 'response',
responseType: 'blob' as 'json'
})
}
};
However, I can show the progress by using HttpEventType in the Template or Ts file. But that's not what I wanted. I want to trigger the browser native download progress bar. Can anybody give any idea how can I force it to download in the browser so that it shows the progress?
