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

Multiple file upload

A drop zone for batch uploads. Dragging a file over any example applies pf-m-drag-over live, and the status variants expand, collapse, and remove items with Alpine. Wire a hidden <input type="file" multiple> to make uploads real.

Examples

Basic

Drop zone with title, separator, Upload button, and accepted-types info. Drag a file over it — pf-m-drag-over applies live (covers PF's frozen Drag over snapshot).

Drag and drop files here

or

Accepted file types: JPEG, Doc, PDF, PNG

Horizontal

pf-m-horizontal — title and button side-by-side; live drag-over covers PF's frozen Horizontal drag over snapshot.

Drag and drop files here

or

Accepted file types: JPEG, Doc, PDF, PNG

File upload status

Three in-flight uploads behind a collapsed expandable toggle — expand it, and close buttons remove items with the count following.

Drag and drop files here

or

Accepted file types: JPEG, Doc, PDF, PNG

File upload status expanded

The status section starting expanded — progress bars and removable items visible.

Drag and drop files here

or

Accepted file types: JPEG, Doc, PDF, PNG

Horizontal file upload status expanded

The horizontal variant with the status section starting expanded.

Drag and drop files here

or

Accepted file types: JPEG, Doc, PDF, PNG

Rejected file handling

Only JPEG, Doc, PDF and PNG are accepted — any other type opens a warning modal naming the rejected files.

Drag and drop files here

or

Accepted file types: JPEG, Doc, PDF, PNG

Documentation

Multiple file upload props

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

* required
Name	Type	Description
* `id`	String	DOM id.
`horizontal`	boolean	Adds `pf-m-horizontal`.
slot `content`	Qute block	__main + __title + __upload internals.

Usage

Wire it. Add a hidden <input type="file" multiple> and trigger from the Upload button. Listen for dragover / drop on the container for drag-to-upload.

HTMX uploads. Use hx-encoding="multipart/form-data" + hx-post for streaming uploads with progress feedback via SSE or HTMX swap.

Edit multiple-file-upload.html on GitHub