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 110+ 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
Change Theme:

Key Features

  • Forms support—You can use the FileSelect both in template-driven and reactive Angular forms.
  • Model binding—The FileSelect provides settings for binding its value to the model and render initial files by using the ngModel Angular directive.
  • Disabled FileSelect—You can use the configuration options of the FileSelect to disable the component so that users are not able to interact with it.
  • File restrictions—The FileSelect also delivers a set of file restriction rules, which refer to the size and extension of the selected files.
  • External dropzone—The 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.
  • Templates—You 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.
  • Globalization—All Kendo UI for Angular Uploads provide globalization options.
  • Accessibility—The FileSelect is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigation—The FileSelect supports a number of keyboard shortcuts for processing various commands.

Support and Learning Resources

Additional Resources