---
title: Overview
position: 1
seo_title: Overview of the ExternalDropZone Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  ExternalDropZone component and check out the extensive set of available
  options in its live demo.
---
## ExternalDropZone Overview

The ExternalDropZone component provides a drop zone area where users can drag and drop files from their file system to a dedicated user interface. You have full freedom to configure how files are handled and to customize the area to meet any application and design requirements. Additionally, the ExternalDropZone can be linked to the [Upload](/components/upload/) component.

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/uploads/upload/external-dropzone"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/dropzone/overview"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/upload/customdropzone"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/upload/external-drop-zone"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/upload/external-drop-zone"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/upload/customdropzone"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/upload/customdropzone"}],"demo":"components/external-drop-zone/overview"}'></LiveDemo>

### Anatomy

The anatomy of the ExternalDropZone summarizes the visual and functional elements of the component. The main elements include a drop zone, an icon, a hint text, and a note text.

The next image shows the anatomy of an ExternalDropZone and includes the following elements:

<BlueprintImage data='{"description":"","labels":[{"text":"Drop zone"},{"text":"Icon"},{"text":"Hint text"},{"text":"Note text"}]}'>![A Telerik and Kendo UI ExternalDropZone component and its elements including the drop zone, icon, hint text, and note text](images/components-externaldropzone-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI ExternalDropZone component")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular ExternalDropZone","description":"Find more information about the Kendo UI for Angular ExternalDropZone in the official product documentation of the component.","url":"http://www.telerik.com/kendo-angular-ui/components/uploads/upload/external-dropzone/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor ExternalDropZone","description":"Find more information about the Telerik UI for Blazor ExternalDropZone in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/dropzone/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery ExternalDropZone","description":"Find more information about the Kendo UI for jQuery ExternalDropZone in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/upload/drag-and-drop#implementing-custom-drop-zones"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact ExternalDropZone","description":"Find more information about the KendoReact ExternalDropZone in the official product documentation of the component.","url":"http://www.telerik.com/kendo-react-ui/components/upload/external-drop-zone/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue ExternalDropZone","description":"Find more information about the Kendo UI for Vue ExternalDropZone in the official product documentation of the component.","url":"http://www.telerik.com/kendo-vue-ui/components/upload/external-drop-zone/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core ExternalDropZone","description":"Find more information about the Telerik UI for ASP.NET Core ExternalDropZone component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/editors/upload/drag-and-drop#custom-drop-zones"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC ExternalDropZone","description":"Find more information about the Telerik UI for ASP.NET MVC ExternalDropZone component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/editors/upload/drag-and-drop#custom-drop-zones"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>