The uploader component is used to upload images, documents, and other files to a server. The component is an extended version of the HTML5 upload control with multiple file selection, auto upload, drag-and-drop, progress bar, preload files, and validation. Users can either browse and select the files that they want to upload or can just drag and drop files from the file explorer.
The uploader component has fully customizable file lists and buttons, which helps in designing a custom upload UI.
Seamlessly works with asynchronous mode using AJAX library, which needs to define server-side action for save and remove files, and supports HTML form file uploads (Synchronous mode) as well.
User can control whether the upload process should happen immediately upon adding files in the upload queue.
Auto Upload is disabled
Auto Upload is enabled
User can upload files by dragging the files from file explorer and dropping them on drop target element.
User can upload multiple files at a time, which is useful for uploading images to gallery, file sharing applications, and more.
User can upload any size of file, as well as configure minimum and maximum range of file size for upload.
User can validate file types and limit file size from client-side. User can validate total number of files to upload.
User can show preview of an image before or after upload. This helps user inspect image before taking further action.
User can remove uploaded files from server.
User can view and configure previously uploaded files from server with success state.
Displays progress bar and progress percentage for each file once upload has begun.
User can customize all static texts used in the upload component through the localization library.
Uploader supports right-to-left rendering. Users can change the text direction and layout of the dialog from right to left. This improves the user experience and accessibility for users who uses RTL languages.
The uploader control provides the best user experience across phone, tablet, and desktop form factors.
Fully supports WAI-ARIA accessibility that helps uploader be accessible by on-screen readers and assistive devices.
Follows WAI-ARIA Best Practices for implementing keyboard interaction.
Designed the UI element visuals such as foreground color, background color, line spacing, text, and images based on WCAG 2.0 standard.
Developers can control the appearance and behaviors of the uploader, including its file list, using a rich set of APIs.