Asset Upload

Upload a single stored asset (file or image) with preview, metadata load, and .value as the saved file reference string.

HTML tag: c-eb3a6f4836b054c748dbe6921d5726b29

When to use

• single file or image field with preview
• stored asset reference on a form
• drag-drop one attachment with metadata

Props

Prop	Type	Default	Description
label	string	Choose a file or drag & drop it here
mode	string	file
value	string
disabled	boolean	false
accept	string
max_file_size_mb	number	50
upload_url	string	files/upload
readonly	boolean	false
headers	object	[object Object]
additional_fields	object	[object Object]
handler_module	string
settings	object	[object Object]
preview_enabled	boolean
preview_route	string
variation_id	string	thumbnail
metadata_structure_thing_id	string	b023b85c-b750-49d1-bf73-720b2ecd0275

Rules

• Set mode to ‘file’ or ‘image’.
• .value holds uploaded asset id/path after success; also emits value-changed.
• Listen for metadata-loaded after preview; upload-error on failure.
• Use upload_url, accept, max_file_size_mb.

Events

Event	Detail
upload-error	message: string, raw: object
metadata-loaded	file_name: string, mime_type: string, raw: object

Methods

Signature	Description
clear()

What to avoid

Do not use for bulk uploads with per-file progress (ab-file-upload). Do not use ab-input for binary files.

Example

<c-eb3a6f4836b054c748dbe6921d5726b29 .label=${'Avatar'} .mode=${'image'} .value=${fileRef} .accept=${'image/*'} @metadata-loaded=${onMeta} @upload-error=${onErr}></c-eb3a6f4836b054c748dbe6921d5726b29>