# File Selector & Drop Area

# Description

The File Selector and File Drop Area components allow users to select files from their device. The File Selector is typically used for selecting a single file via a standard file dialog, often styled as an input field. The File Drop Area provides a drag-and-drop zone where users can drop one or multiple files.

# Usage

# File Selector

Use FileSelector() to create a file input. You can set a placeholder, restrict accepted file types, and handle the selection event.

var selector = FileSelector()
    .SetPlaceholder("Select a file...")
    .SetAccepts(".zip,.rar")
    .OnFileSelected((fs, e) => Console.WriteLine($"Selected: {fs.SelectedFile.name}"));

# File Drop Area

Use FileDropArea() to create a drop zone. You can enable multiple file selection and handle the drop event.

var dropArea = FileDropArea()
    .Multiple()
    .OnFilesDropped((files, e) =>
    {
        foreach(var file in files)
        {
            Console.WriteLine($"Dropped: {file.name}");
        }
    });

# Methods (FileSelector)

SetPlaceholder(string text)
- Sets the placeholder text displayed when no file is selected.
SetAccepts(string accept)
- Sets the accept attribute (e.g., ".png, image/*") to filter allowed file types.
Required()
- Marks the input as required.
OnFileSelected(FileSelectedHandler handler)
- Registers a callback invoked when a file is selected. The handler receives the FileSelector instance and the event.
- Handler signature: void Handler(FileSelector sender, Event e)

# Properties (FileSelector)

SelectedFile
- Gets the currently selected File object (from H5.Core.dom).

# Methods (FileDropArea)

Multiple()
- Allows multiple files to be dropped or selected.
OnFilesDropped(FilesDroppedHandler handler)
- Registers a callback invoked when files are dropped.
- Handler signature: void Handler(IList<File> files, Event e)

# Samples

# File Selector and Drop Area Sample

This sample demonstrates both components.

using Tesserae;
using static Tesserae.UI;
using static H5.Core.dom;

public class FileInputSample : IComponent
{
    public HTMLElement Render()
    {
        var sizeLabel = TextBlock("").Small();
        var droppedList = Stack();

        return Stack().Children(
            TextBlock("File Selector").SemiBold(),
            FileSelector()
                .SetPlaceholder("Select an image")
                .SetAccepts("image/*")
                .OnFileSelected((fs, e) => sizeLabel.Text = $"Selected: {fs.SelectedFile.name} ({fs.SelectedFile.size} bytes)"),
            sizeLabel,

            HorizontalSeparator(),

            TextBlock("File Drop Area").SemiBold(),
            FileDropArea()
                .Multiple()
                .OnFilesDropped((files, e) =>
                {
                    droppedList.Clear();
                    foreach (var file in files)
                    {
                        droppedList.Add(TextBlock(file.name).Small());
                    }
                }),
            Label("Dropped files:").SetContent(droppedList)
        ).Render();
    }
}