# External DropZone

The External DropZone helps users to drag and drop files from their file systems to a dedicated user interface. It can be implemented either by using the [External DropZone Component](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/uploaddropzonecomponent), or by adding the [External DropZone Directive](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/uploaddropzonedirective) to an element.

## DropZone Component

The [DropZone Component](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/uploaddropzonecomponent) is a drag and drop tool. To link the external DropZone to the [FileSelect](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/fileselectcomponent), provide matching IDs to the `zoneId` options of the [DropZone](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/uploaddropzonecomponent#zoneid) and the [FileSelect](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/fileselectcomponent#zoneid) components.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/uploads/fileselect/external/dropzone_component/source.txt)

## DropZone Directive

The DropZone Directive allows you to create custom elements with a drag and drop FileSelect functionality. To link the custom element with the FileSelect, provide matching IDs to the [kendoFileSelectDropZone](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/uploaddropzonedirective) directive and the [FileSelect](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/fileselectcomponent#zoneid) `zoneId` option.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/uploads/fileselect/external/dropzone_directive/source.txt)

## Suggested Links

* [API Reference of the FileSelect](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/fileselectcomponent)
* [API Reference of the External DropZone Component](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/uploaddropzonecomponent)
* [API Reference of the External DropZone Directive](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/uploaddropzonedirective)