// Generated by scripts/generate-showcase.mjs. Do not edit directly. page FileUploadProgressDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Upload progress" state playground_value = Number(ctx.url.searchParams.get("pg_value") ?? "50") state playground_max = Number(ctx.url.searchParams.get("pg_max") ?? "100") state playground_showValue = (ctx.url.searchParams.get("pg_showValue") ?? "true") === "true" state playground_fileName = ctx.url.searchParams.get("pg_fileName") ?? "brand-guidelines.pdf" state playground_fileSize = ctx.url.searchParams.get("pg_fileSize") ?? "4.8 MB" state playground_uploadedSize = ctx.url.searchParams.get("pg_uploadedSize") ?? "2.4 MB" state playground_status = ctx.url.searchParams.get("pg_status") ?? "uploading" state playground_cancelLabel = ctx.url.searchParams.get("pg_cancelLabel") ?? "Cancel upload" state playground_retryLabel = ctx.url.searchParams.get("pg_retryLabel") ?? "Retry upload" state playground_showCompleteAction = (ctx.url.searchParams.get("pg_showCompleteAction") ?? "false") === "true" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" seo { title = "File Upload Progress" description = "Theme-aware, responsive file upload progress component." } view {
Base component

File Upload Progress

Theme-aware, responsive file upload progress component.

14 props0 slots3 outputsTheme readyResponsive
Interactive playground

Configure File Upload Progress

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<FileUploadProgress
  label="Upload progress"
  fileName="brand-guidelines.pdf"
  fileSize="4.8 MB"
  uploadedSize="2.4 MB"
/>
Event outputInteract with the preview to inspect the typed payload.
Component props14 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

01
Live preview
Component usage.wrn
<FileUploadProgress
  label="Upload progress"
  fileName="brand-guidelines.pdf"
  fileSize="4.8 MB"
  uploadedSize="2.4 MB"
/>
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

02
Live preview
Component usage.wrn
<FileUploadProgress
  label="Upload progress"
  fileName="brand-guidelines.pdf"
  fileSize="4.8 MB"
  status="error"
/>
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

03
Live preview
Component usage.wrn
<FileUploadProgress
  label="Upload progress"
  value="100"
  fileName="brand-guidelines.pdf"
  fileSize="4.8 MB"
  status="complete"
/>
Component outputs

Receive every typed component output

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.
Declarative handlers.wrn
<FileUploadProgress
  @cancel='console.log(payload)'
  @retry='console.log(payload)'
  @complete='console.log(payload)'
/>
Direct output handlers.js
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)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Progress"No
valuenumber50No
maxnumber100No
showValuebooleantrueNo
fileNamestring""No
fileSizestring""No
uploadedSizestring""No
statusstring"uploading"No
cancelLabelstring"Cancel upload"No
retryLabelstring"Retry upload"No
showCompleteActionbooleanfalseNo
classstring""No
} }