Theme-aware, responsive file upload progress component.
Change any prop and inspect the server-rendered component immediately.
<FileUploadProgress
label="File Upload Progress"
value="36"
cancelLabel="File Upload Progress"
retryLabel="File Upload Progress"
/>payload.Compare configurations and resize the browser to check responsive behavior.
Balanced spacing, hierarchy, and content for the most common product workflow.
<FileUploadProgress
label="File Upload Progress"
value="36"
cancelLabel="File Upload Progress"
retryLabel="File Upload Progress"
/>A tighter variation for dashboards, side panels, tables, and operational interfaces.
<FileUploadProgress
size="sm"
label="Compact example"
value="60"
cancelLabel="Compact example"
retryLabel="Compact example"
/>A more expressive variation using additional data, stronger emphasis, and optional states.
<FileUploadProgress
size="lg"
label="Advanced example"
value="84"
cancelLabel="Advanced example"
retryLabel="Advanced example"
/>Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.
@cancelFires when the user cancels or dismisses the current workflow.@retryFires when the component emits the retry event.@completeFires when the component emits the complete event.<FileUploadProgress
@cancel='console.log(payload)'
@retry='console.log(payload)'
@complete='console.log(payload)'
/>import { registerOutputHandler } from "@wrnexus/csr/outputs"
const component = document.querySelector("[data-ui-component=\"FileUploadProgress\"], [data-component=\"FileUploadProgress\"]")
if (component) registerOutputHandler(component, "cancel", (payload) => {
console.log("cancel", payload)
})
if (component) registerOutputHandler(component, "retry", (payload) => {
console.log("retry", payload)
})
if (component) registerOutputHandler(component, "complete", (payload) => {
console.log("complete", payload)
})All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
size | string | "default" | No |
color | string | "primary" | No |
label | string | "Progress" | No |
value | number | 50 | No |
max | number | 100 | No |
showValue | boolean | true | No |
fileName | string | "" | No |
fileSize | string | "" | No |
uploadedSize | string | "" | No |
status | string | "uploading" | No |
cancelLabel | string | "Cancel upload" | No |
retryLabel | string | "Retry upload" | No |
class | string | "" | No |