Kendo UI for Angular FileSelect Overview

The Kendo UI for Angular FileSelect component helps users select single or multiple files from their local file systems. The component is especially useful when you want full control over the process of creating the server requests and sent forms. It is a richer version of an <input type='file'> element and supports model binding, templates, forms, and more.

The FileSelect Component is part of Kendo UI for Angular, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The following example demonstrates the FileSelect in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Key Features

  • Forms supportYou can use the FileSelect both in template-driven and reactive Angular forms.
  • Model bindingThe FileSelect provides settings for binding its value to the model and render initial files by using the ngModel Angular directive.
  • Disabled FileSelectYou can use the configuration options of the FileSelect to disable the component so that users are not able to interact with it.
  • File restrictionsThe FileSelect also delivers a set of file restriction rules, which refer to the size and extension of the selected files.
  • External dropzoneThe FileSelect provides options to the users for dragging and dropping files from their files systems to a dedicated user interface by using the External DropZone Component or by adding the External DropZone Directive.
  • TemplatesYou can either fully customize the FileSelect file list by using the File template, or customize part of its elements by utilizing the File Info template.
  • GlobalizationAll Kendo UI for Angular Uploads provide globalization options.
  • AccessibilityThe FileSelect is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigationThe FileSelect supports a number of keyboard shortcuts for processing various commands.

In this article

Not finding the help you need?