When I make a request to my webservice to download a zip file, the file content is downloaded secretly and suddenly appears in the download task bar as already fully downloaded (100%).
I am using the following method in Angular:
const endpoint = "http://localhost:8080/download/zip"
this.http.get<Blop>(endpoint, {headers: httpHeaders, responseType: 'blob', reportProgress: true })
This is how I handle the subscription:
this.http.get<Blop>(endpoint, {headers: httpHeaders, responseType: 'blob', reportProgress: true }).subscribe({
next: data => {
console.log('blocking or not');
const blob = new Blob([data as any], { type: 'application/zip' });
window.location.href = URL.createObjectURL(blob);
}
})
I noticed that my console.log(...) is only called at the end of the download process. It seems that the browser UI can't detect the download progress until it reaches window.location.href.
Is there a way to force the download to be displayed in the task bar before the transfer is complete, and to track the download progress in the browser? I couldn't find anything related to async blobs or similar methods.
PS: My backend is serving a stream of data, so the issue is not with the backend. When accessing the API directly through the browser, the download progress is visible in the task bar. Here's the snippet from my Spring Boot backend:
@GetMapping("/download/zip")
fun download(response: HttpServletResponse): StreamingResponseBody {
val file = downloads.download("launcher")
response.contentType = "application/zip";
response.setHeader(
"Content-Disposition",
"attachment;filename=sample.zip"
)
response.setContentLengthLong(file.length())
return StreamingResponseBody { outputStream: OutputStream ->
var bytesRead: Int
val buffer = ByteArray(2048)
val inputStream: InputStream = file.inputStream()
while (inputStream.read(buffer).also { bytesRead = it } != -1) {
outputStream.write(buffer, 0, bytesRead)
}
}
}