AccentBaseRadiusMode

File input

A native file input; with `upload=true` it binds a Live upload field.

A file input with an accept list. This site accepts no uploads, so the file stays in your browser.

Each preview is its own Live page in a frame, because this site is a Vue 3.5 app built on the Pulsar starter kit. An open list or popover stays inside its frame; in your application it opens over the page.

Installation

bash

suprnova live:add file-input

Usage

html

{% import "suprnova-ui/file-input/file-input.html" as file_input %}
{% call file_input::file_input("attachment", accept="image/png,image/jpeg") %}{% endcall %}

Examples

Multiple

Several files at once. Nothing is sent.

Open in new tab

Keyboard and accessibility

suprnova.file-input - a native file input; accept and multiple are declared on the control. Live uploads bind through live:upload on the same control when the component declares the upload field.

API reference

`file_input`

Parameter	Default	Description
`name`	Required	The field name and `id`.
`accept`	`""`	The accepted types, as in the HTML `accept` attribute.
`multiple`	`false`	Accepts several files.
`upload`	`false`	Binds the Live upload field of the same name through `live:upload`.