File Input — lunaDOM Docs

The <luna-file-input> component provides drag-and-drop file upload with support for multiple files and custom file type restrictions.

Paths

/lunadom/components/file-input/file-input.js

REQUIRED

Basic File Upload

Multiple Files

Specific Extensions

Custom Dropzone

🖼️

Upload Avatar

PNG, JPG or WEBP (max 5MB)

Customization

Slots
default - Default label text
label - Custom label content
hint - Custom hint content
dropzone - Custom content for the drop zone
file-icon - Custom icon for each file in the list

Attributes
label - Label text for the input
hint - Help text below the input
multiple - Allow multiple file selection
accept - Accepted file types (e.g., ".pdf,.doc")
disabled - Whether the file input is disabled
required - Whether the file input is required for form validation
size - The size of the file input (sm, md, lg)
name - The name attribute for form submission

CSS Variables
--luna-file-input-bg - Background color of the dropzone
--luna-file-input-border - Border color of the dropzone
--luna-file-input-color - Text color inside the dropzone
--luna-file-input-radius - Border radius of the dropzone
--luna-file-input-accent - Accent color for drag-over state
--luna-file-input-shadow - Box shadow when dragging over

Events
luna-change - Emitted when files are selected or removed
luna-remove - Emitted when a file is removed

Properties
files - Array of selected files

Example Code

<luna-file-input label="Upload Document" hint="Select a file to upload" > </luna-file-input>  <luna-file-input label="Upload Photos" multiple > </luna-file-input>  <luna-file-input label="Documents" accept=".pdf,.doc,.docx" multiple > </luna-file-input>  <luna-file-input accept="image/*"> <div slot="dropzone">Custom drop area content</div> </luna-file-input>