HxInputFileDropZone #

Ready-made UX for drag&drop file upload. For custom drag&drop UX, use HxInputFileCore and a little bit of HTML/CSS.

See HxInputFileCore for upload demos.

Single #

Drag 'n' drop the file here, or click to browse.
<HxInputFileDropZone />

Multiple #

Drag 'n' drop some files here, or click to select files.
<HxInputFileDropZone @ref="component" Multiple />
<HxButton Text="Clear" CssClass="mt-3" OnClick="@(async () => await component.ResetAsync())" Color="ThemeColor.Secondary" />

@code
{
    private HxInputFileDropZone component;
}

Custom NoFilesTemplate #

Custom content

API #

Parameters #

Name Type Description
Accept string Takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow. MDN Web Docs - HTML attribute: accept.
CssClass string Custom CSS class to render with the wrapping div.
Enabled bool? When null (default), the Enabled value is received from cascading FormState. When value is false, input is rendered as disabled. To set multiple controls as disabled use HxFormState.
InputCssClass string Custom CSS class to render with the input element.
MaxFileSize long? The maximum file size in bytes. When exceeded, the OnFileUploaded returns 413-RequestEntityTooLarge as FileUploadedEventArgs.ResponseStatus. Default is null (unlimited).
Multiple bool Single false or multiple true files upload.
NoFilesTemplate RenderFragment Content to render when no files are picked. Default content is displayed when not set.
UploadHttpMethod string HTTP Method (verb) used for file upload. The default is POST.
UploadUrl string URL of the server endpoint receiving the files.

Event callbacks #

Name Type Description
OnChange EventCallback<InputFileChangeEventArgs> Gets or sets the event callback that will be invoked when the collection of selected files changes.
OnFileUploaded EventCallback<FileUploadedEventArgs> Raised after a file is uploaded (for every single file separately).
OnProgress EventCallback<UploadProgressEventArgs> Raised during running file upload (the frequency depends on browser implementation).
OnUploadCompleted EventCallback<UploadCompletedEventArgs> Raised when all files are uploaded (after all OnFileUploaded events).

Methods #

Method Returns Description
GetFilesAsync() Task<FileInfo<>> Gets the list of chosen files.
ResetAsync() Task Clears the associated input-file element and resets the component to its initial state.
StartUploadAsync(string accessToken) Task Starts the upload.
UploadAsync(string accessToken) Task<UploadCompletedEventArgs> Uploads the file(s).

CSS variables #

Name Description Default
--hx-input-file-drop-zone-border-width Width of the border. 1px
--hx-input-file-drop-zone-box-shadow Box shadow of the drop zone. none
--hx-input-file-drop-zone-hover-box-shadow Box shadow of the drop zone on hover. 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25)
--hx-input-file-drop-zone-border-color Border color. var(--bs-border-color)
--hx-input-file-drop-zone-background-color Background color. transparent
--hx-input-file-drop-zone-hover-background-color Background color on hover. rgba(var(--bs-primary-rgb), .1)
--hx-input-file-drop-zone-hover-border-color Border color on hover. var(--bs-primary)
--hx-input-file-drop-zone-disabled-background-color Background color when disabled. var(--bs-gray-200)
--hx-input-file-drop-zone-disabled-color Color when disabled. var(--bs-gray-400)
--hx-input-file-drop-zone-border-radius Border radius. .3rem
--hx-input-file-drop-zone-margin Margin. 0
--hx-input-file-drop-zone-padding Padding. 3rem
An unhandled error has occurred. Reload 🗙