File Upload

Multi-file upload with queue, progress, retries, and ab-file:* lifecycle events.

HTML tag: c-e54bf928d239944758c68382a65d327e9

When to use

• upload multiple files with progress
• drag-drop file queue to server
• batch attachment upload (not single asset field)

Props

Prop	Type	Default	Description
multiple	boolean
accept	string
max_file_size	number
max_file_count	number
upload_url	string
label	string
aria_label	string
max_total_size	number
button_only	boolean
disabled	boolean
readonly	boolean
method	string	POST
headers	object	[object Object]
with_credentials	boolean
form_field_name	string	file
additional_fields	object	[object Object]
auto_upload	boolean	true
concurrency	number	3
retry_count	number
retry_backoff_ms	number	1000
i18n	object	[object Object]

Rules

• Set multiple, accept, max_file_size, max_file_count, upload_url.
• auto_upload starts queue; listen to ab-file:complete / ab-file:error / ab-file:all-complete.
• ab-file:progress for UI bars.
• Use addFiles/open/start methods for programmatic control.

Events

Event	Detail
ab-file:select	files: File[]
ab-file:queue	items: object[]
ab-file:progress	item: object, loaded: number, total: number, percent: number
ab-file:complete	item: object, response: any, saved_file: object
ab-file:error	item: object, error: object
ab-file:remove	item: object
ab-file:cancel	item: object
ab-file:reject	files: File[], reasons: object[]
ab-file:start	item: object
ab-file:before-upload	item: object, plan: object
ab-file:all-complete	succeeded: object[], failed: object[]

Methods

Signature	Description
open()
`addFiles(files: FileList	File[])`
start()
cancel(item_id: string)
remove(item_id: string)
clear()
get_queue()

What to avoid

Do not use for single image avatar field (ab-asset-upload). Do not expect .value string binding like asset-upload.

Example

<c-e54bf928d239944758c68382a65d327e9 .multiple=${true} .upload_url=${'/api/upload'} @ab-file:complete=${onDone} @ab-file:all-complete=${onAll}></c-e54bf928d239944758c68382a65d327e9>