Use the following composition to build a FileDropZone:
Custom placeholder:
You can use the Textarea component to allow users to paste or drag and drop files into a textarea.
Add capturePaste to upload files whenever the user pastes anywhere on the page. Only files are uploaded, pasted text is ignored.
When it's used alongside FileDropZone.Textarea a single paste is only ever uploaded once.
Use the DragOverlay component to show a page wide overlay while the user drags files over the page. Files dropped onto the overlay are uploaded just like files dropped onto the Trigger.
The overlay is portalled to the body so it covers the whole page no matter where FileDropZone.Root lives in your tree. To scope it to a container instead, disable the portal and make it absolutely positioned:
Resources:
Schema:
Server:
The root file drop zone component. Renders a hidden file input element.
The trigger element for the file drop zone. Renders as a label that activates the file input. Provides a default UI if no children are provided.
| Prop | Type | Default |
|---|---|---|
ref? $bindable | HTMLLabelElement | null |
children? | Snippet | - |
A textarea component that supports file uploads via drag-and-drop, paste, and click-to-select. Integrates with the FileDropZone root component.
A page wide overlay that is shown while the user drags files over the page and accepts the files when they are dropped. Provides a default UI if no children are provided.