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, string antiforgeryToken, string antiforgeryHeaderName) | Task |
Starts the upload. |
| UploadAsync(string accessToken, string antiforgeryToken, string antiforgeryHeaderName) | 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 var(--bs-focus-ring-width) var(--bs-focus-ring-color) |
| --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 |