Blazor DropZone Overview
The Telerik UI for Blazor DropZone component allows you to declare an external drop zone for an existing FileSelect or Upload component.
This integration enables the users to drag and drop one or multiple files to a designated space in their viewport. Dropping the files in the connected DropZone area will automatically select or upload them respectively.
The DropZone component is part of Telerik UI for Blazor, a
professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor DropZone
- Add the DropZone to your Razor page by using the
TelerikDropZonetag. - Set the
Idparameter of the component. - Set the
DropZoneIdof the FileSelect or Upload component to match theIdof the DropZone. - (Optional) Add a note to the DropZone by using the
NoteTextsetting.
Basic configuration of the DropZone with the FileSelect component.
<TelerikDropZone Id="@DropZoneId" NoteText="@NoteText" />
<TelerikFileSelect DropZoneId="@DropZoneId" AllowedExtensions="@AllowedExtensions" />
@code {
private string DropZoneId => "my-dropzone";
private string NoteText => "Allowed file types: DOCX and PDF";
private List<string> AllowedExtensions { get; set; } = new List<string>() { ".docx", ".pdf" };
}
Integration with the Upload and FileSelect
You can integrate the DropZone with both the FileSelect or Upload components. This will allow users to drop files and automatically select or upload them.
The connection is achieved by simply matching the value of the DropZone Id parameter with the DropZoneId parameter of the FileSelect or the Upload component.
Once the user drops a file in the external DropZone, the file is automatically sent to the connected FileSelect/Upload. This action effectively raises the OnSelect event of the FileSelect or Upload. You can handle that to perform further actions with the dropped file(s).
Template
The DropZone allows you to customize its rendering and appearance through a Template configuration. Read more about using the DropZone template...
Parameters
The following table lists DropZone parameters. Check the DropZone API Reference for a full list of properties, methods and events.
| Parameter | Type and Default Value | Description |
|---|---|---|
Id |
string |
The id of the DropZone. Assign the same value of the corresponding Upload or FileSelect component to the DropZoneId. |
Enabled |
bool ( true) |
Specifies whether the DropZone is enabled. |
HintText |
string |
The text for the hint of the DropZone. If not provided, the DropZone will render a default value ("Drag and drop files here to upload"). The label text is also localizable. |
NoteText |
string |
Optional content inside the DropZone. Use it to render any additional information below the hint. The label text is also localizable. |
Multiple |
bool ( true) |
Enables the user to drop several files at the same time. |
Styling and Appearance
The following parameters enable you to customize the appearance of the Blazor DropZone:
| Parameter | Type | Description |
|---|---|---|
Class |
string |
The CSS class that will be rendered on the main wrapping element of the DropZone (<div class="k-external-dropzone">). Use it for overriding the theme or applying custom styles. |
DragOverClass |
string |
The CSS class that will be rendered on the main wrapping element of the DropZone when a file is dragged over it. Use it for conditionally styling the component during a dragover action. |
Width |
string |
The width of the DropZone. Accepts a valid CSS value (see the Dimensions article). |
Height |
string |
The height of the DropZone. Accepts a valid CSS value (see the Dimensions article). |