Ui3nDropFiles

Component for drag & drop file uploading. Displays a drop zone that appears when files are dragged over the container.

Props

Name	Type	Default	Description
name	string | undefined	—	HTML name attribute for form submission
title	string | undefined	"Upload"	Drop files title
text	string | undefined	""	Drop files text
additionalText	string | undefined	""	Additional text
permanentDisplay	boolean | undefined	false	Whether to permanently display the component

Events

Event Name	Arguments / Value Type	Description
select	fileList: FileList	—

Slots

Slot Name	Scope Props (v-slot)	Description
#default	—	Default slot
#additional-text	—	Additional text slot

Public Methods & Exposes

Method Name	Signature / Type	Description
clear()	() => void	—

CSS Variables

Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.

Name	Default
--ui3n-dropzone-border-radius	4px
--ui3n-dropzone-height	0
--ui3n-dropzone-title-font	0

Usage Examples

Basic usage

Basic usage

Simple drop zone that appears on drag enter. Drop files to trigger the select event.

Permanent display with additional text slot

Permanent display

Drop zone is always visible using the permanentDisplay prop. Additional text can be provided via the additional-text slot.

Drop files here

Drag & drop files or click to select