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

}

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.

Constructors

Constructor

FileSelector

public FileSelector()

Initializes a new instance of this class.

Properties

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

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.

Constructors

Constructor

FileDropArea

public FileDropArea()

Initializes a new instance of this class.

Constructor

FileDropArea

public FileDropArea(IComponent component)

Initializes a new instance of this class.

Properties

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

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