Stream zip file from server to client: No download progress - quarkus

Question

There are quite a few articles about streaming zips from the client. I have read a lot and I will go into some of them.
This is my quarkus endpoint:
#GET
#Consumes( MediaType.APPLICATION_JSON )
#Produces( MediaType.APPLICATION_OCTET_STREAM )
#Path( DOWNLOAD_MUSIC )
public Response downloadMusic( #QueryParam( value = ID ) Long id ) throws IOException, SystemException {
return Response.ok(meisterschaftService.downloadMusicFromChampionship( id ) )
.type( "application/zip" )
.header( "Content-Disposition", "attachment; filename=\"music.zip\"" )
.build();
}
This is my service:
public StreamingOutput downloadMusicFromChampionship( Long meisterschaftId ) throws IOException {
Meisterschaft byChampionshipId = meisterschaftDao.findById( meisterschaftId );
List<MeisterschaftDance> meisterschaftDances = meisterschaftDanceDao.findByMeisterschaft( byChampionshipId.getId() );
Set<Dance> taenze = meisterschaftDances.stream().map( MeisterschaftDance::getDance ).collect( Collectors.toSet() );
StreamingOutput streamingOutput = outputStream -> {
BufferedOutputStream baos = new BufferedOutputStream(outputStream);
ZipOutputStream zos = new ZipOutputStream( baos );
int test = 1;
for (Dance einTanz : taenze) {
ZipEntry entry = new ZipEntry( einTanz.getTitel() + ".mp3" );
entry.setSize( einTanz.getMp3File().length );
zos.putNextEntry( entry );
zos.write( einTanz.getMp3File() );
zos.closeEntry();
test++;
}
zos.close();
zos.close();
outputStream.flush();
outputStream.close();
};
return streamingOutput;
}
From this article I have learned that I have to make an StreamingOutput from my zip-file:
How can i return a zip file from my java server
On the client side I have used this stackoverflow article for my solution:
How to download a readable stream
try {
const res = await fetch('meisterschaft/downloadMusic?id=' +
encodeURIComponent( id ), {
method: 'GET',
headers: {
"Authorization": "Bearer " + keycloak.token
}
} );
const blob = await res.blob();
const newBlob = new Blob([blob]);
const blobUrl = window.URL.createObjectURL(newBlob);
const link = document.createElement('a');
link.href = blobUrl;
link.setAttribute('download', "test.zip");
document.body.appendChild(link);
link.click();
// #ts-ignore
link.parentNode.removeChild(link);
// #ts-ignore
window.URL.revokeObjectURL(blob);
} catch ( e ) {
console.log( "Some error" )
}
The problem now is that I can see in the developer console that the file (approx. 4GB) is being streamed. But the Save-As dialog appears only AFTER the download has finished.
How can I get a download window with a progress bar right from the start? Like that one:
//EDIT
I just don't want to download the 4GB in the background and only display the Save-AS field AFTER the download. I would like to have it like in my picture above: 1MB .... 2MB .... 3MB ... and so on. It is not important how much MB overall we have.