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 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 the AJAX library, which needs to define server-side actions to save and remove files, and supports HTML form file uploads (synchronous mode), as well.
Users can control whether the upload process should happen immediately upon adding files in the upload queue.
Auto upload is disabled
Auto upload is enabled
Manage large file uploads with chunk upload. Large files are sliced into small chunks and uploaded to the server in sequential order in asynchronous mode. This feature also supports pause, resume, retry, and cancel upload actions. This helps users upload high resolution images, videos, and other large files. Automatic pause and resume based on server connection are also supported.
Users can upload files by dragging them from file explorer and dropping them on the drop target element.
Users can upload multiple files at a time, which is useful for uploading images to a gallery, file sharing applications, and more.
Users can upload any size file, as well as configure minimum and maximum ranges of file size for upload.
Users can validate file types and limit the file size from client-side. Users can validate total number of files to upload.
Accepts directories (folders) as a file source for uploading. All files and subdirectories of the selected directory will be processed.
The file upload component processes images from the clipboard, allowing images to be simply copied and pasted to be uploaded to a server.
Users can show a preview of an image before or after upload. This helps users inspect the image before taking further action.
Users can remove uploaded files from the server.
Users can view and configure previously uploaded files from the server with success state.
Displays the progress bar and progress percentage for each file once upload has begun.
Handle preprocessed images, such as pre-resized images, before uploading them to a server.
Users can customize all static text 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 those who use RTL languages.
The uploader control provides the best user experience across phone, tablet, and desktop form factors.
Fully supports WAI-ARIA accessibility, which helps uploader be accessed by on-screen readers and assistive devices.
Follows WAI-ARIA Best Practices for implementing keyboard interaction.
The UI element visuals such as foreground color, background color, line spacing, text, and images were designed based on the WCAG 2.0 standard.
Developers can control the appearance and behaviors of the uploader, including its file list, using a rich set of APIs.