Components
Progress Download Button
Download button with animated progress indicator and in-flight cancellation.
ProgressDownloadButton streams the download in the browser via fetch, displaying real-time progress percentages with cancel capability.
Preview
Install
Complete UI setup first — stylesheet and toaster. Then add this component:
import { ProgressDownloadButton } from "@dimah-s3/ui";Usage
"use client";
import { useDownload } from "@dimah-s3/react";
import { ProgressDownloadButton } from "@dimah-s3/ui";
export function DocumentDownloader({ documentKey }: { documentKey: string }) {
const download = useDownload({ route: "document", mode: "fetch" });
return <ProgressDownloadButton download={download} objectKey={documentKey} />;
}Props
import type { ProgressDownloadButtonProps } from "@dimah-s3/ui";Frequently asked questions
Completed and failed attachments include a dismiss control that calls download.reset(). You can also call reset() yourself.
Clicking the button while an active download is in progress immediately aborts the underlying fetch stream and resets the button state.
Yes. useDownload requests a signed URL before initiating the fetch stream, respecting any route guards or bucket policies.