File Input

File Input allows users to select and upload files. Supports labels, validation, helper text, and multiple file selection.

Basic Examples

File inputs with various configurations

// Dynamic import of the FileInput component

const { default: FileInput } = await import('/components/data-input/file-input.js');

const { tags, $ } = Lightview;
const { div } = tags;

// 1. Basic file input
const basic = FileInput({});

// 2. With label and helper
const withLabel = FileInput({ 
    label: 'Upload Document',
    helper: 'PDF, DOC, or DOCX files only',
    accept: '.pdf,.doc,.docx'
});

// 3. Multiple files with color
const multiple = FileInput({ 
    label: 'Upload Images',
    accept: 'image/*',
    multiple: true,
    color: 'primary',
    helper: 'You can select multiple images'
});

// 4. Required file input
const required = FileInput({ 
    label: 'Resume',
    required: true,
    accept: '.pdf'
});

// Insert all examples
$('#demo').insert(
    div({ class: 'space-y-4 max-w-md' }, basic, withLabel, multiple, required)
);

Reactive Example

File validation and state display


const { default: FileInput } = await import('/components/data-input/file-input.js');

const { signal, tags, $ } = Lightview;
const { div, p, span, ul, li } = tags;

// Signals for tracking selected files
const selectedFiles = signal([]);

// Custom validation function
const validateFile = (files) => {
    if (!files || files.length === 0) return 'Please select a file';
    for (const file of files) {
        if (file.size > 5 * 1024 * 1024) {
            return `File "${file.name}" exceeds 5MB limit`;
        }
    }
    return null;
};

// Reactive demo
const reactiveDemo = div({ class: 'space-y-4 max-w-md' },
    FileInput({ 
        label: 'Upload Files',
        helper: 'Max 5MB per file',
        multiple: true,
        validate: validateFile,
        onChange: (files) => {
            selectedFiles.value = Array.from(files);
        }
    }),
    div({ class: 'divider' }),
    () => {
        const files = selectedFiles.value;
        if (files.length === 0) {
            return p({ class: 'text-sm opacity-50' }, 'No files selected');
        }
        return div({},
            p({ class: 'text-sm font-semibold mb-2' }, 
                `${files.length} file(s) selected:`
            ),
            ul({ class: 'text-xs font-mono space-y-1' },
                ...files.map(f => 
                    li({}, 
                        span({ class: 'text-primary' }, f.name),
                        span({ class: 'opacity-50' }, ` (${(f.size / 1024).toFixed(1)} KB)`)
                    )
                )
            )
        );
    }
);

$('#demo').insert(reactiveDemo);

Props

Prop Type Default Description
accept string - Accepted file types (e.g., '.pdf,.doc', 'image/*')
multiple boolean false Allow multiple file selection
label string - Label text displayed above the input
helper string - Helper text displayed below the input
error string | function - Error message or reactive error function
validate function - Validation function: (files) => errorMessage | null
color string - 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
size string 'md' 'xs' | 'sm' | 'md' | 'lg'
ghost boolean false Ghost style (no background)
disabled boolean false Disable the file input
required boolean false Mark as required field (shows asterisk)
onChange function - Callback when files selected: (files, event) => void
useShadow boolean * Render in Shadow DOM. *Follows global initComponents() setting

Colors

Sizes

Variants

Ghost

Disabled

With Label (Fieldset Pattern)

Upload Avatar

JPG, PNG, or GIF up to 2MB

For more examples and options, see the DaisyUI File Input documentation.