Inputs
FileInput
Bit.BlazorUI
BitFileInput lets the user hand files to the app - through the file dialog, by dropping them onto it or by pasting them - without uploading anything. Each file surfaces in C# as a BitFileInputInfo (name, size, type, folder and, on request, image dimensions) and is validated on arrival against size, total size, type, count, duplicate and custom rules; a rejected file stays in the list with its reason. Content is read on demand, as a byte array or a stream. A drop zone panel, thumbnails, type glyphs, remove buttons, templates and screen reader announcements are built in. To send files to a server, use BitFileUpload.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
Browse with the button, drop files from the OS onto the component, or focus it and paste from the clipboard.
Label sets the button text (default "Browse") and Title its tooltip. Disabling it blocks all
three routes.
AllowDrop & AllowPaste
The drop and paste routes switch off independently. With AllowDrop off a drop is still swallowed, so
the browser never navigates away to the file. A paste only reaches the component while the focus is inside
it.
Description
Description renders a hint under the browse button and ties it to the button through
aria-describedby, so screen readers read the constraints along with it. State there what Accept,
AllowedExtensions and MaxSize enforce; DescriptionTemplate takes markup.
PDF or DOCX, up to 5 MB.
Square images look best. Up to 2 MB.
Multiple & Directory
Multiple lets one dialog, drop or paste carry several files; without it only the first one is taken.
Directory picks a whole folder, subfolders included, and walks dropped folders too; each file then
carries its RelativePath, whose folder is printed beside its size.
Removable
ShowRemoveButton adds a remove button to each file, raising OnRemove and OnChange. The
focus moves on to the next remove button, or back to the browse button, so files can be removed in a row
from the keyboard. RemoveButtonIconName swaps the icon.
Append, AutoReset & duplicates
A new selection replaces the list by default. Append adds to it instead and AutoReset empties
it right before the dialog opens. With AllowDuplicates off, a file already in the list (same folder,
name, size and modified time) is marked invalid with the DuplicateErrorMessage - pick the same file
twice to see it.
Append with no duplicates:
AutoReset:
Size & count limits
MaxSize and MinSize bound each file, MaxTotalSize the whole list and MaxCount
the number of files. A rejected file stays in the list, marked invalid with its ...ErrorMessage. The
list-level limits are re-run on every change, so removing files frees their room again.
Per file, 1 MB max and 1 KB min, with a custom message:
Up to 3 files and 2 MB in total:
Accept, AllowedExtensions & Capture
Accept only filters the file dialog - drops and pastes bypass it. AllowedExtensions validates
every file however it arrived and generates the accept attribute when Accept is not set. Its entries
ignore case and the leading dot, and an entry with a slash is a MIME type, wildcards like image/*
included.
Accept (dialog filter only):
AllowedExtensions (validated) - extensions, with or without the dot, and a MIME type:
Capture asks a mobile device for a camera or a microphone instead of the file browser - "user" for
the front camera, "environment" for the rear one - with an Accept saying which. Desktop browsers
ignore it.
Custom validation
FileValidator runs after the built-in checks: return a message to reject the file or null to accept
it; a validator that throws only rejects its own file. ReadImageDimensions decodes images first to
fill Width and Height for resolution rules - opt-in, since decoding costs time and memory.
Rejecting empty files:
Rejecting images below 300×300:
Preview & file icons
ShowPreview shows a thumbnail for each image and a type glyph for everything else. The thumbnail's
object URL is exposed as PreviewUrl and revoked for you. FileIconSelector picks the glyph
instead; returning null leaves none.
Images and documents together:
A selector of your own:
Localization
Every built-in string has a parameter: Label, Description, RemoveButtonTitle,
FileListAriaLabel, the six ...ErrorMessages, FileSizeFormatter and
AnnouncementProvider for the screen reader announcement. Set them app-wide with the cascading parameters.
Raw byte counts instead of the built-in humanizer:
HideFileList
HideFileList hides the built-in list while the selection keeps working, for an app that renders its
own view of the files from OnChange.
Custom file list:
No files selected yet.
Events
OnChange fires with all the files after every change, OnInvalid right after it with only the
invalid ones, and OnRemove once per removed file. Content is never loaded eagerly:
ReadContentAsync reads one file, or every valid file when called without one.
Selected files:
Templates
LabelTemplate replaces the browse button and FileViewTemplate each file item. A template
replaces real controls, so use real buttons in it to keep the keyboard working, and Classes.Dragging
to give a custom label its drag feedback. For a ready-made drop panel, see Drop
zone.
Public API
Browse, Reset (silent) and RemoveFile (one file or all, raising the events) drive the
component from code, and Files and InputId expose its state. OpenReadStreamAsync reads
a file in chunks: the way to handle large files, and on Blazor Server anything over SignalR's 32 KB message
limit. HideLabel hides the browse button here; the drop indicator moves onto the component.
0 file(s) in the list.
Accessibility
The browse and remove buttons are real buttons with focus rings, and the focus survives a removal. The list
is named by FileListAriaLabel, each remove button names its file and is described by its error, and a
live region announces every change (AnnouncementProvider). AriaLabel names the browse button
when its text says too little.
Up to 1 MB each. Tab to the button, then press Enter or Space.
Variant
Variant sets how much of the Color the browse button carries: Fill (the default),
Outline or Text. All three fill in on hover and turn into the same dashed drop indicator.
Disabled:
Variant & Color:
Drop zone
ShowDropZone renders the browse button as a full-width dashed panel with a glyph, still reached with
Tab and opened with Enter or Space, and defaults it to Outline. DropZoneIconName swaps the
CloudUpload glyph (an empty string removes it); DropZoneIcon takes an external one.
Any file type, as many as you like.
Cascading parameters
BitParams hands a BitFileInputParams to every file input under it. Its values are defaults,
not overrides: an input keeps each parameter it sets itself.
Anything up to 1 MB. Drop it here or browse.
Anything up to 1 MB. Drop it here or browse.
Color
Color sets the theme color of the browse button, its focus ring and the drop indicator
(Primary by default).
External Icons
RemoveButtonIcon, and whatever FileIconSelector returns, accept any icon library through
BitIconInfo.Fa(), BitIconInfo.Bi() or BitIconInfo.Css().
FontAwesome:
Bootstrap:
Size
Size scales the browse button, the file items, their thumbnails and their remove buttons together.
Small:
Medium:
Large:
Style & Class
Style and Class target the root, Styles and Classes each part. Their
Dragging entry applies to the root only while files hover over it.
Component's Style & Class:
Styles & Classes:
The public CSS variables inherit, so they can be set on
:root, on an ancestor or on the Style of one instance. They restyle the default, not a
choice: an explicit Color or Size wins over the variables for what it sets.
CSS variables:
Set once on an ancestor, inherited by every file input inside it:
RTL
Setting Dir to BitDir.Rtl mirrors the whole layout.
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle that one alone. Leave a variable unset and the component falls back to the theme token beside it.
BitFileInput CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-FileInput-max-width | 21.875rem | The widest the whole component gets. Set it to 100% for a file input that fills its column. |
| --bit-FileInput-color | --bit-clr-pri | The role color: the fill of a Fill browse button, the rule and the text of an Outline or Text one. The Color parameter wins over it; the transparent fill of Outline and Text is not its to paint. |
| --bit-FileInput-text-color | --bit-clr-pri-text | Text drawn on top of the role color. The Color parameter wins over it. |
| --bit-FileInput-hover-color | --bit-clr-pri-hover | Role color while the browse button is hovered (pointer devices only). The Color parameter wins over it. |
| --bit-FileInput-active-color | --bit-clr-pri-active | Role color while the browse button is pressed. The Color parameter wins over it. |
| --bit-FileInput-focus-color | --bit-clr-pri-focus | Color of the keyboard focus ring of the browse button and of each remove button. The Color parameter wins over it. |
| --bit-FileInput-disabled-color | --bit-clr-fg-dis | Foreground when Disabled is true. |
| --bit-FileInput-disabled-background | --bit-clr-bg-dis | Background of the browse button and of the remove buttons when Disabled is true. |
| --bit-FileInput-disabled-border-color | --bit-clr-brd-dis | Border color of the browse button when Disabled is true. |
| --bit-FileInput-label-height | --bit-siz-ctrl-md | Smallest height of the browse button, which is what lines it up with the other controls of its size. The Size parameter wins over it. |
| --bit-FileInput-label-padding | --bit-siz-ctrl-pad-y-md --bit-siz-ctrl-pad-x-md | Padding of the browse button. The Size parameter wins over it. |
| --bit-FileInput-label-font-size | --bit-tpg-fs-sm | Text size of the browse button. The Size parameter wins over it. |
| --bit-FileInput-label-font-weight | --bit-tpg-font-weight | Text weight of the browse button, which defaults to the weight the theme gives every control label. |
| --bit-FileInput-label-radius | --bit-shp-radius-button | Corner radius of the browse button, which its focus ring follows. |
| --bit-FileInput-drop-zone-height | 5.5rem | The smallest height of the drop zone panel rendered by ShowDropZone. The Size parameter wins over it. |
| --bit-FileInput-drop-zone-padding | 1rem | Padding of the drop zone panel. The Size parameter wins over it. |
| --bit-FileInput-drop-zone-radius | --bit-shp-radius-surface | Corner radius of the drop zone panel, which its focus ring follows. |
| --bit-FileInput-drop-zone-border-width | --bit-shp-brd-width-thick | Rule thickness of the drop zone panel. |
| --bit-FileInput-drop-zone-border-style | dashed | Rule style of the drop zone panel at rest. Set it to solid for a panel that reads as a surface rather than as a target. |
| --bit-FileInput-drop-zone-icon-size | 2rem | Glyph size inside the drop zone panel. The Size parameter wins over it. |
| --bit-FileInput-description-color | --bit-clr-fg-sec | Color of the hint under the browse button. |
| --bit-FileInput-description-font-size | --bit-tpg-fs-xs | Text size of that hint, of the file size and of the folder. The Size parameter wins over it. |
| --bit-FileInput-drop-color | --bit-FileInput-text-color | Rule and text of the browse button while files are dragged over the component. The Color parameter wins over it. |
| --bit-FileInput-drop-background | --bit-FileInput-hover-color | Fill of the browse button while files are dragged over the component. The Color parameter wins over it. |
| --bit-FileInput-drop-border-style | dashed | Border style of the drop indicator. Set it to solid for a drop state that does not change the shape of the button. |
| --bit-FileInput-file-list-max-height | none | The tallest the file list gets before it scrolls, which is what keeps a folder selection of thousands of files from pushing the rest of the page away. |
| --bit-FileInput-item-background | --bit-clr-bg-sec | Background of a file item, valid or not. |
| --bit-FileInput-item-hover-background | --bit-FileInput-item-background | Background of a hovered valid file item (pointer devices only). |
| --bit-FileInput-item-border-color | --bit-clr-brd-pri | Border of a file item at rest. |
| --bit-FileInput-item-hover-border-color | --bit-FileInput-item-border-color, then --bit-clr-brd-pri-hover | Border of a hovered file item (pointer devices only). It falls back to the resting border color first, so repainting an item's rule covers its hover without a second variable. |
| --bit-FileInput-item-radius | --bit-shp-radius-surface | Corner radius of a file item. |
| --bit-FileInput-item-padding | 0.5rem | Padding around the name, the size and the error message of a file item. |
| --bit-FileInput-item-gap | 0.1875rem | Room between two file items, and above the first one. |
| --bit-FileInput-item-font-size | --bit-tpg-fs-sm | Text size of the file name. The Size parameter wins over it. |
| --bit-FileInput-file-name-color | --bit-clr-fg-pri | Color of the file name. |
| --bit-FileInput-file-size-color | --bit-clr-fg-sec | Color of the file size and of the folder beside it. |
| --bit-FileInput-error-color | --bit-clr-err | Message and border of an invalid file item. |
| --bit-FileInput-invalid-background | --bit-FileInput-item-background | Background of an invalid file item. It matches a valid one by default so a rejected file still reads as a row of the list; a tint of the error color is the other reasonable choice. |
| --bit-FileInput-preview-size | 2.5rem | Side of the image thumbnail and of the file type glyph standing in for it. The Size parameter wins over it. |
| --bit-FileInput-preview-radius | --bit-shp-radius-sm | Corner radius of the image thumbnail. |
| --bit-FileInput-file-icon-color | --bit-clr-fg-sec | Color of the file type glyph. |
| --bit-FileInput-remove-button-size | --bit-siz-ctrl-md | Side of the square remove button. The Size parameter wins over it. |
| --bit-FileInput-remove-button-color | --bit-clr-fg-pri | Glyph color of the remove button. |
| --bit-FileInput-remove-button-background | --bit-clr-bg-sec | Background of the remove button at rest. |
| --bit-FileInput-remove-button-hover-background | --bit-clr-bg-sec-hover | Background of a hovered remove button (pointer devices only). |
| --bit-FileInput-remove-button-active-background | --bit-clr-bg-sec-active | Background of a pressed remove button. |
| --bit-FileInput-remove-icon-size | --bit-siz-icon-md | Glyph size of the remove button. The Size parameter wins over it. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitFileInput parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| Accept | string? | null | Accepted file types for the file browser using MIME types or file extensions (e.g., "image/*", ".pdf,.doc"). Applied to the underlying HTML input element's accept attribute. When not set, the accept attribute is generated from AllowedExtensions. |
| AllowDrop | bool | true | Whether files can be selected by dragging them from the operating system and dropping them on the component. |
| AllowDuplicates | bool | true | Whether a file that is already in the file list can be selected again. When disabled, a newly selected file matching an existing one by folder, name, size and last modified time is marked as invalid with the DuplicateErrorMessage instead of being added as a second entry, becoming valid again once the file it duplicates is removed. |
| AllowedExtensions | IReadOnlyCollection<string> | ["*"] | Allowed file types for validation purposes, accepting both file extensions (e.g., [".jpg", ".png", ".pdf"]) and MIME types with an optional wildcard (e.g., ["image/*", "application/pdf"]). The leading dot of an extension is optional and the matching is case-insensitive. Use ["*"] to allow all file types. Files not matching any of these entries will be marked as invalid. |
| AllowPaste | bool | true | Whether files can be selected by pasting them from the clipboard onto the component. The paste is only captured while the focus is inside the component, so the browse button must be focused first. |
| AnnouncementProvider | Func<IReadOnlyList<BitFileInputInfo>, string?>? | null | Custom provider of the text announced by the screen reader through the live region of the component whenever the file list changes. Receives the current file list and returns the text to announce, or null to announce nothing. When not set, a built-in English announcement is used. |
| Append | bool | false | Whether to append newly selected files to the existing file list instead of replacing it. |
| AutoReset | bool | false | Whether the file input is automatically reset (cleared) before opening the file browser dialog, allowing the same file to be selected multiple times consecutively. |
| Capture | string? | null | The capture behavior of the file input on devices with a camera or microphone, rendered as the capture attribute of the input element (e.g., "user" for the front camera, "environment" for the rear camera). |
| Classes | BitFileInputClassStyles? | null | Custom CSS classes for different parts of the BitFileInput. |
| Color | BitColor? | null | The general color of the file input, applied to the browse button and the drag-and-drop indicator. An explicit value wins over the --bit-FileInput-* color variables; left unset, the file input is primary unless they say otherwise. |
| Description | string? | null | A short hint rendered under the browse button and wired to it through aria-describedby, which is the place to spell out the accepted file types and the size limits so that both sighted and screen reader users learn the constraints before hitting them. |
| DescriptionTemplate | RenderFragment? | null | Custom Razor template of the hint rendered under the browse button, taking precedence over Description. |
| Directory | bool | false | Whether to select folders (directories) instead of files, rendered as the webkitdirectory attribute. All files inside the selected folder and its subfolders will be added to the file list. It also makes a dropped folder expand into its contents instead of being ignored. |
| DropZoneIcon | BitIconInfo? | null | The glyph of the drop zone panel, using custom CSS classes for external icon libraries. Takes precedence over DropZoneIconName when both are set, and is only rendered while ShowDropZone is enabled. |
| DropZoneIconName | string? | null | The name of the drop zone panel's glyph from the built-in Fluent UI icons. Defaults to "CloudUpload", and an empty string leaves the panel without a glyph at all. |
| DuplicateErrorMessage | string? | null | Custom error message displayed when a file is selected again while AllowDuplicates is disabled. Defaults to "The file is already selected". |
| FileIconSelector | Func<BitFileInputInfo, BitIconInfo?>? | null | Custom provider of the glyph shown in the thumbnail's place for a file that has no image preview, which is rendered while ShowPreview is enabled. Receives the file and returns the icon to draw, or null to leave that file without one. When not set, the icon is picked from the file's MIME type and extension. |
| FileListAriaLabel | string? | null | The accessible name of the file list, which tells a screen reader user walking the lists of the page what this one holds. Defaults to "Selected files". |
| FileSizeFormatter | Func<long, string>? | null | Custom formatter of the file size shown under the name of each file item. Receives the size of the file in bytes and returns the text to display, which is the place to localize the units or to switch between the binary and the decimal bases. When not set, a built-in humanizer is used. |
| FileValidator | Func<BitFileInputInfo, string?>? | null | Custom validation function called for each newly selected file after the built-in validations pass. Return an error message to mark the file as invalid, or null to accept it. |
| FileViewTemplate | RenderFragment<BitFileInputInfo>? | null | Custom Razor template for rendering individual file items in the file list. Receives a BitFileInputInfo context for each file. |
| HideFileList | bool | false | Whether to hide the file list that displays the selected files in the UI. |
| HideLabel | bool | false | Whether to hide the default browse button label from the UI. |
| Label | string | Browse | The text displayed on the browse button. Defaults to "Browse". |
| LabelTemplate | RenderFragment? | null | Custom Razor template for the browse button area, allowing full customization of the file selection trigger UI. |
| MaxCount | int | 0 | Maximum allowed number of files in the file list. Files selected beyond this count will be marked as invalid, becoming valid again once removals free up room. Set to 0 for no count limit. |
| MaxCountErrorMessage | string? | null | Custom error message displayed when the number of files exceeds the maximum count limit. Defaults to "The maximum number of files is exceeded". |
| MaxSize | long | 0 | Maximum allowed file size in bytes for validation. Files exceeding this size will be marked as invalid. Set to 0 for no size limit. |
| MaxSizeErrorMessage | string? | null | Custom error message displayed when a file exceeds the maximum size limit. Defaults to "The file size is larger than the max size". |
| MaxTotalSize | long | 0 | Maximum allowed total size in bytes of all the files in the file list. Files pushing the accumulated size beyond this limit will be marked as invalid, becoming valid again once removals free up room. Set to 0 for no total size limit. |
| MaxTotalSizeErrorMessage | string? | null | Custom error message displayed when a file makes the total size of the file list exceed the maximum total size. Defaults to "The total size of the files is larger than the max total size". |
| MinSize | long | 0 | Minimum allowed file size in bytes for validation. Files smaller than this size will be marked as invalid. Set to 0 for no size limit. |
| MinSizeErrorMessage | string? | null | Custom error message displayed when a file is smaller than the minimum size limit. Defaults to "The file size is smaller than the min size". |
| Multiple | bool | false | Whether to allow selecting multiple files simultaneously through the file browser dialog. |
| NotAllowedExtensionErrorMessage | string? | null | Custom error message displayed when a file's extension is not in the allowed extensions list. Defaults to "The file type is not allowed". |
| OnChange | EventCallback<BitFileInputInfo[]> | Callback invoked when the file selection changes, providing an array of BitFileInputInfo representing all selected files. It is also invoked after removing a file through the remove button or the RemoveFile method. | |
| OnInvalid | EventCallback<BitFileInputInfo[]> | Callback invoked right after OnChange whenever the file list holds at least one invalid file, providing an array of only the invalid files along with their validation messages. | |
| OnRemove | EventCallback<BitFileInputInfo> | Callback invoked for each file that gets removed from the file list, either through the remove button or the RemoveFile method. | |
| ReadImageDimensions | bool | false | Whether to decode every selected image file to fill the Width and Height properties of its file info with the pixel dimensions, which makes it possible to enforce resolution rules from a FileValidator. Decoding costs time and memory proportional to the images, so it is disabled by default. |
| RemoveButtonIcon | BitIconInfo? | null | Gets or sets the remove button icon using custom CSS classes for external icon libraries. Takes precedence over RemoveButtonIconName when both are set. |
| RemoveButtonIconName | string? | Delete | Gets or sets the name of the remove button icon from the built-in Fluent UI icons. |
| RemoveButtonTitle | string? | null | The tooltip of the remove button, which is also used as the prefix of its accessible label (e.g., "Remove report.pdf"). Defaults to "Remove". |
| ShowDropZone | bool | false | Whether to render the browse area as a full width drop zone panel - a dashed rule around a glyph and the label - instead of an ordinary button. It is the same button underneath, so it is still reached with Tab and activated with Enter or Space, and it carries the drag indicator exactly as the button does. It also makes Outline the default variant; set Variant to take that back. |
| ShowPreview | bool | false | Whether to display a preview thumbnail for image files in the file list, and a file type glyph in the same place for every file that has no preview. |
| ShowRemoveButton | bool | false | Whether to display a remove button next to each file in the file list, allowing individual file removal. |
| Size | BitSize? | null | The size of the file input, applied to the browse button and the file list items. An explicit value wins over the --bit-FileInput-* size variables; left unset, the file input is medium unless they say otherwise. |
| Styles | BitFileInputClassStyles? | null | Custom CSS styles for different parts of the BitFileInput. |
| Title | string? | null | The tooltip of the browse button, rendered as its title attribute. |
| Variant | BitVariant? | null | The visual variant of the browse button, which decides how much of the Color it carries: a full fill, only an outline, or neither. |
BitFileInput public members
| Name | Type | Default value | Description |
|---|---|---|---|
| Files | IReadOnlyList<BitFileInputInfo> | [] | A read-only list of all currently selected files with their metadata, validation status, and content. |
| InputId | string? | The unique identifier of the underlying HTML file input element. | |
| Browse | () => Task | Opens the file browser dialog programmatically, allowing users to select files. If AutoReset is enabled, the input is reset before opening. | |
| ReadContentAsync | (BitFileInputInfo? fileInfo = null, CancellationToken cancellationToken = default) => Task | Reads the content of the specified file from the browser and populates its Content property with the byte array, or reads every valid file of the file list when no file is specified. Only reads valid files and only while the component is enabled. The whole file crosses the interop boundary as one message, which on Blazor Server the circuit caps (SignalR's MaximumReceiveMessageSize, 32 KB by default), so anything larger is read with OpenReadStreamAsync instead. | |
| OpenReadStreamAsync | (BitFileInputInfo fileInfo, long? maxAllowedSize = null, CancellationToken cancellationToken = default) => Task<Stream> | Opens a forward-only stream over the content of the specified file, which the runtime reads from the browser in chunks instead of materializing the whole file in memory the way ReadContentAsync does - which is also what gets a file past a Blazor Server circuit's message size cap. Unlike ReadContentAsync it also reads a file the validations rejected. maxAllowedSize defaults to the size the browser reported for the file, and the stream must be disposed by the caller. | |
| RemoveFile | (BitFileInputInfo? fileInfo = null) => Task | Removes a specific file from the selected files list, or clears all files when no file is specified, invoking the OnRemove callback for each removed file and the OnChange callback afterwards. | |
| Reset | () => Task | Clears all selected files and resets the file input to its initial state without invoking any callback. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| Disabled | bool | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | bool | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitFileInputInfo properties
Represents metadata, validation state, and content of a file selected through BitFileInput.
| Name | Type | Default value | Description |
|---|---|---|---|
| ContentType | string | string.Empty | The MIME content type of the file (e.g., "image/png", "application/pdf"). |
| Name | string | string.Empty | The name of the file including its extension (e.g., "document.pdf"). |
| RelativePath | string | string.Empty | The path of the file relative to the selected folder, including the folder's own name (e.g., "photos/2024/summer.jpg"). It is only reported by the browser for a folder selection or a dropped folder, and is an empty string for a file picked or dropped on its own. |
| Size | long | The size of the file in bytes. | |
| FileId | string | string.Empty | A unique identifier (GUID) assigned to the file upon selection, used to reference the file in JavaScript interop. |
| Index | int | The zero-based index of the file in the current selection list. | |
| LastModified | long | The last modified time of the file reported by the browser, in milliseconds since the Unix epoch. | |
| Extension | string | The extension of the file including its leading dot, lowercased (e.g. ".pdf"), or an empty string for a file whose name carries none, a dotfile (".gitignore") included. | |
| LastModifiedDate | DateTimeOffset | The last modified time of the file reported by the browser, as a DateTimeOffset. | |
| PreviewUrl | string? | null | An object URL of the file content that can be used as the source of an img element to preview image files. This is only populated for image files when the ShowPreview parameter of the BitFileInput is enabled. |
| Width | int? | null | The width of the image in pixels, only populated for decodable image files when the ReadImageDimensions parameter of the BitFileInput is enabled. It is null for anything else. |
| Height | int? | null | The height of the image in pixels, only populated for decodable image files when the ReadImageDimensions parameter of the BitFileInput is enabled. It is null for anything else. |
| IsValid | bool | true | Whether the file has passed all validation checks including size constraints and allowed extensions. |
| Message | string? | null | The validation error message when the file has failed a validation check (e.g., size or extension). This is null when the file is valid. |
| Content | byte[]? | null | The file content as a byte array, populated by calling ReadContentAsync. This is null by default and only loaded on demand. |
BitFileInputClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitFileInput. |
| Dragging | string? | null | Custom CSS classes/styles for the root element while files are being dragged over the BitFileInput. |
| Label | string? | null | Custom CSS classes/styles for the browse button (label) of the BitFileInput. |
| DropZoneIcon | string? | null | Custom CSS classes/styles for the glyph of the drop zone panel, which is only rendered while ShowDropZone is enabled. |
| Description | string? | null | Custom CSS classes/styles for the description (hint) of the BitFileInput. |
| FileList | string? | null | Custom CSS classes/styles for the file list container of the BitFileInput. |
| FileItem | string? | null | Custom CSS classes/styles for each file item of the BitFileInput. |
| Preview | string? | null | Custom CSS classes/styles for the image preview thumbnail of each file item of the BitFileInput. |
| FileIcon | string? | null | Custom CSS classes/styles for the file type glyph shown in the thumbnail's place of each file item that has no image preview. |
| FileName | string? | null | Custom CSS classes/styles for the file name of each file item of the BitFileInput. |
| FilePath | string? | null | Custom CSS classes/styles for the folder of each file item that came from a folder selection. |
| FileSize | string? | null | Custom CSS classes/styles for the file size of each file item of the BitFileInput. |
| ErrorMessage | string? | null | Custom CSS classes/styles for the validation error message of each invalid file item of the BitFileInput. |
| RemoveButton | string? | null | Custom CSS classes/styles for the remove button of each file item of the BitFileInput. |
| RemoveIcon | string? | null | Custom CSS classes/styles for the remove button icon of each file item of the BitFileInput. |
BitIconInfo properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Name | string? | null | Gets or sets the name of the icon. |
| BaseClass | string? | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | string? | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
BitColor enum
| Name | Value | Description |
|---|---|---|
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
BitSize enum
| Name | Value | Description |
|---|---|---|
| Small | 0 | The small size. |
| Medium | 1 | The medium size. |
| Large | 2 | The large size. |
BitVariant enum
| Name | Value | Description |
|---|---|---|
| Fill | 0 | Fill styled variant. |
| Outline | 1 | Outline styled variant. |
| Text | 2 | Text styled variant. |
BitVisibility enum
| Name | Value | Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
| Name | Value | Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.