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.

Telerik UI for Blazor Ninja image

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

  1. Add the DropZone to your Razor page by using the TelerikDropZone tag.
  2. Set the Id parameter of the component.
  3. Set the DropZoneId of the FileSelect or Upload component to match the Id of the DropZone.
  4. (Optional) Add a note to the DropZone by using the NoteText setting.

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).


The DropZone allows you to customize its rendering and appearance through a Template configuration. Read more about using the DropZone template...


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
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
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).

Next Steps

See Also

In this article