Download progress indicator #598 #1677
Conversation
assets/js/ui/file_download.ts
Outdated
| e.preventDefault(); | ||
|
|
||
| const flashMessage = showFlashMessage({ | ||
| isLoading: true, | ||
| text: "Preparing download...", | ||
| isDismissible: false, | ||
| toastOptions: { | ||
| autohide: false, | ||
| }, | ||
| }); | ||
|
|
||
| try { | ||
| const response = await fetch(anchor.href); | ||
| if (!response.ok) { | ||
| throw new Error( | ||
| "An unexpected error occurred while downloading the file. Please try again.", | ||
| ); | ||
| } | ||
|
|
||
| const filename = extractFileName(response); | ||
| const blob = await response.blob(); | ||
|
|
||
| const dummyAnchor = document.createElement("a"); | ||
| dummyAnchor.href = URL.createObjectURL(blob); | ||
| dummyAnchor.setAttribute("class", "link-primary text-nowrap"); | ||
| dummyAnchor.setAttribute("download", filename); | ||
| dummyAnchor.textContent = filename; | ||
|
|
||
| flashMessage?.setLevel("success"); | ||
| flashMessage?.setIsLoading(false); | ||
| flashMessage?.setText("Download ready: " + dummyAnchor.outerHTML); | ||
| flashMessage?.setIsDismissible(true); | ||
|
|
||
| // Trigger download (save-as window or auto-download, depending on browser settings) | ||
| dummyAnchor.click(); |
There was a problem hiding this comment.
This is actually a hack that's used widespread. The click on the <a> tag is prevented at the top of this function so we can intervene and display the toast first. Then the file is downloaded via the fetch() API. When ready, we create a dummy anchor tag using a data URL with the downloaded file. At the end, the click() method is triggered on that which will actually present the download to the browser. The dummy anchor is also included in the updated toast, but that is not necessary. Just an alternate way to get the file, in case you canceled the save-as-dialog.
Tested in Chrome, Firefox, Safari and Edge.
|
Discussion to be had:
Useful steps taken in this PR that could be used in different contexts:
|
|
@verheyenkoen should we close this one for now and pick it up later since there are a lot of moving parts? |
|
@mietcls Sure |
Implementation details described here.
This PR includes quite a few more things than described in #598.
<template>from layout to a Templ component)FIXES #598