Live demo — this example is server-driven; run the showcase locally for the interactive version.

Simple file upload

A read-only filename input + Browse / Clear buttons. For multi-file with drag-drop see Multiple file upload.

Examples

Basic

The bare file-select row — filename display, Browse, Clear.

Simple text file

A real file input: FileReader fills the read-only preview.

With helper text

Guidance under the upload.

Upload a plain-text file, e.g. .txt or .md.

Text file with edits allowed

The loaded text stays editable.

Text file with restrictions

Only .txt up to 1 KB; larger files are rejected with a danger helper. Always re-validate server-side.

Custom file preview

Any format — a custom icon/name/size preview replaces the textarea.

bytes

Custom file upload

Bring your own browse trigger — here a link button opens the dialog.

Disabled

Controls disabled.

File upload loading

pf-m-loading with a spinner over the file details while a file is being read.

Reading Sample.png…

Documentation

Simple file upload props

Parameters accepted by {#include components/forms/simple-file-upload ... /}.

* required
Name	Type	Description
* `id`	String	DOM id.
`browseText` / `clearText`	String	Custom button labels. Defaults `"Browse..."` / `"Clear"`.
`disabled`	boolean	Disables both buttons.

Usage

Visual scaffolding only. The runtime template renders the PF styling but doesn't include a real <input type="file">. Wire it: add a hidden file input, point Browse at it via @click, and bind the filename input to the chosen file via Alpine.

Edit simple-file-upload.html on GitHub