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
UploadUrl string URL of the server endpoint receiving the files.
Multiple bool Single false or multiple true files upload.
MaxFileSize long? The maximum files size in bytes. When exceeded, the OnFileUploaded returns 413-RequestEntityTooLarge as FileUploadedEventArgs.ResponseStatus. Default is null (unlimited).
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.
NoFilesTemplate RenderFragment Content to render when no files are picked. Default content is displayed when not set.
CssClass string Custom CSS class to render with wrapping div.
InputCssClass string Custom CSS class to render with the input element.
Enabled bool?

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.
OnProgress EventCallback<UploadProgressEventArgs> Raised during running file upload (the frequency depends on browser implementation).
OnFileUploaded EventCallback<FileUploadedEventArgs> Raised after a file is uploaded (for every single file separately).
OnUploadCompleted EventCallback<UploadCompletedEventArgs> Raised after a file is uploaded (for every single file separately).

Methods

Method Returns Description
GetFilesAsync() Task<FileInfo[]> Gets list of files chosen.
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(13, 110, 253, 0.25)
--hx-input-file-drop-zone-border-color Border color. #ced4da
--hx-input-file-drop-zone-background-color Background color. transparent
--hx-input-file-drop-zone-hover-background-color Background color on hover. #f2f9ff
--hx-input-file-drop-zone-hover-border-color Border color on hover. var(--bs-primary)
--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 🗙