Tesserae - File Selector & Drop Area

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.cs

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.cs

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);
        }
    }

}

API reference

class

FileSelector

public sealed class FileSelector : IComponent, ICanValidate<FileSelector>

A form control that lets the user pick one or more files from disk, with optional drag-and-drop support.

Namespace: Tesserae
Implements: IComponent, ICanValidate<FileSelector>

Constructors

Name	Description
FileSelector	Initializes a new instance of this class.

Constructor

FileSelector

public FileSelector()

Initializes a new instance of this class.

Properties

Name	Description
SelectedFile	Gets or sets the selected file.
Placeholder	Gets or sets the placeholder text shown when the component is empty.
Error	Gets or sets the validation error message displayed beneath the component.
IsInvalid	Gets or sets a value indicating whether the component is currently in an invalid state.
IsRequired	Gets or sets a value indicating whether the component is required for form submission.
Accepts	Gets or sets the type of files accepted by this selector. See https://www.w3schools.com/tags/att_input_accept.asp for more information. Valid values are a list of extensions, like ".txt\|.doc\|.docx", of media type, such as "audio/\|video/\|image/*", or a combination of both

Property

FileSelector.SelectedFile

public File SelectedFile { get ; private set ; }

Gets or sets the selected file.

Property

FileSelector.Placeholder

public string Placeholder { get ; set ; }

Gets or sets the placeholder text shown when the component is empty.

Property

FileSelector.Error

public string Error { get ; set ; }

Gets or sets the validation error message displayed beneath the component.

Property

FileSelector.IsInvalid

public bool IsInvalid { get ; set ; }

Gets or sets a value indicating whether the component is currently in an invalid state.

Property

FileSelector.IsRequired

public bool IsRequired { get ; set ; }

Gets or sets a value indicating whether the component is required for form submission.

Property

FileSelector.Accepts

public string Accepts { get ; set ; }

Gets or sets the type of files accepted by this selector. See https://www.w3schools.com/tags/att_input_accept.asp for more information. Valid values are a list of extensions, like ".txt|.doc|.docx", of media type, such as "audio/*|video/*|image/*", or a combination of both

Methods

Name	Description
NoTextBox	Removes / disables the text box on the component.
OnFileSelected	Registers a callback invoked when the file selected event fires.
SetPlaceholder	Sets the placeholder of the component.
SetAccepts	Sets the type of files accepted by this selector. See https://www.w3schools.com/tags/att_input_accept.asp for more information. Valid values are a list of extensions, like ".txt\|.doc\|.docx", of media type, such as "audio/\|video/\|image/*", or a combination of both
Required	Marks the component as required.
Reset	Resets the component to its initial state.
Attach	Attaches a handler to the component's value-changed event.
Render	Renders the component's root HTML element.

Method

FileSelector.NoTextBox

public FileSelector NoTextBox()

Removes / disables the text box on the component.

Method

FileSelector.OnFileSelected

public FileSelector OnFileSelected(FileSelectedHandler handler)

Registers a callback invoked when the file selected event fires.

Method

FileSelector.SetPlaceholder

public FileSelector SetPlaceholder(string placeholder)

Sets the placeholder of the component.

Method

FileSelector.SetAccepts

public FileSelector SetAccepts(string accepts)

Sets the type of files accepted by this selector. See https://www.w3schools.com/tags/att_input_accept.asp for more information. Valid values are a list of extensions, like ".txt|.doc|.docx", of media type, such as "audio/*|video/*|image/*", or a combination of both

Parameters

accepts

Method

FileSelector.Required

public FileSelector Required()

Marks the component as required.

Method

FileSelector.Reset

public void Reset()

Resets the component to its initial state.

Method

FileSelector.Attach

public void Attach(ComponentEventHandler<FileSelector> handler)

Attaches a handler to the component's value-changed event.

Method

FileSelector.Render

public HTMLElement Render()

Renders the component's root HTML element.

class

FileDropArea

public sealed class FileDropArea : IComponent

A drop target that accepts files dragged from the operating system, with hover and validation feedback.

Namespace: Tesserae
Implements: IComponent

Constructors

Name	Description
FileDropArea	Initializes a new instance of this class.

Constructor

FileDropArea

Overload
FileDropArea()	Initializes a new instance of this class.
FileDropArea(IComponent)	Initializes a new instance of this class.

FileDropArea()

public FileDropArea()

Initializes a new instance of this class.

FileDropArea(IComponent)

public FileDropArea(IComponent component)

Initializes a new instance of this class.

Parameters

component IComponent

Properties

Name	Description
Content	Sets the content rendered inside the surface.
Accepts	Gets or sets the type of files accepted by this selector. See https://www.w3schools.com/tags/att_input_accept.asp for more information. Valid values are a list of extensions, like ".txt\|.doc\|.docx", of media type, such as "audio/\|video/\|image/*", or a combination of both
IsMultiple	Returns a value indicating whether the component is multiple.

Property

FileDropArea.Content

public IComponent Content { set ; }

Sets the content rendered inside the surface.

Property

FileDropArea.Accepts

public string Accepts { get ; set ; }

Property

FileDropArea.IsMultiple

public bool IsMultiple { get ; set ; }

Returns a value indicating whether the component is multiple.

Methods

Name	Description
FilesDroppedHandler	To accept multiple files, mark the FileDropArea as multiple.
OpenFileSelection	Opens the file selection.
OnFilesDropped	Registers a callback invoked when the files dropped event fires.
SetContent	Sets the content of the component.
SetAccepts	Sets the type of files accepted by this selector. See https://www.w3schools.com/tags/att_input_accept.asp for more information. Valid values are a list of extensions, like ".txt\|.doc\|.docx", of media type, such as "audio/\|video/\|image/*", or a combination of both
Multiple	Configures the component to multiple.
Reset	Resets the component to its initial state.
Render	Renders the component's root HTML element.

Delegate

FileDropArea.FilesDroppedHandler

public delegate void FilesDroppedHandler(FileDropArea sender, File[] files)

To accept multiple files, mark the FileDropArea as multiple.

Method

FileDropArea.OpenFileSelection

public void OpenFileSelection()

Opens the file selection.

Method

FileDropArea.OnFilesDropped

public FileDropArea OnFilesDropped(FilesDroppedHandler handler)

Registers a callback invoked when the files dropped event fires.

Method

FileDropArea.SetContent

public FileDropArea SetContent(IComponent content)

Sets the content of the component.

Method

FileDropArea.SetAccepts

public FileDropArea SetAccepts(string accepts)

Parameters

accepts

Method

FileDropArea.Multiple

public FileDropArea Multiple()

Configures the component to multiple.

Method

FileDropArea.Reset

public void Reset()

Resets the component to its initial state.

Method

FileDropArea.Render

public HTMLElement Render()

Renders the component's root HTML element.

Samples

File Selector and Drop Area Sample

This sample demonstrates both components.

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

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();
        }
    }
}