Download progress indicator #598 #1677
Draft
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
verheyenkoen
commented
Jul 30, 2024
assets/js/ui/file_download.ts
Outdated
Comment on lines
6
to
40
| 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.
2 tasks
|
Discussion to be had:
Useful steps taken in this PR that could be used in different contexts:
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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