Tesserae

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.

file-selector-and-drop-area-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var selector = FileSelector()
                .SetPlaceholder("Select a file...")
                .SetAccepts(".zip,.rar")
                .OnFileSelected((fs, e) => console.log($"Selected: {fs.SelectedFile.name}"));
            document.body.style.overflow = "hidden";
            MountCenteredToBody(selector);
        }
    }

}

File Drop Area

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

file-selector-and-drop-area-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var dropArea = FileDropArea()
                .Multiple()
                .OnFilesDropped((sender, files) =>
                {
                    foreach(var file in files)
                    {
                        console.log($"Dropped: {file.name}");
                    }
                });
            document.body.style.overflow = "hidden";
            MountCenteredToBody(dropArea);
        }
    }

}

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.

file-selector-and-drop-area-3-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new FileInputSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    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((sender, files) =>
                    {
                        droppedList.Clear();
                        foreach (var file in files)
                        {
                            droppedList.Add(TextBlock(file.name).Small());
                        }
                    }),
                Label("Dropped files:").SetContent(droppedList)
            ).Render();
        }
    }
}