Manchester United, one of the most iconic football clubs in the world, is renowned for its rich history, legendary players, and unparalleled success.
Allows the user to upload files to the product.
Multiple files can be dragged into the upload area or selected via the system dialog.
For the multiple uploader, a compact view is available when it is empty.
When uploading multiple files, their size is always shown in the list. For the single uploader, displaying the file size is configured separately.
Selected files can be configured with a custom icon, for example, for images.
The component can be configured to allow selecting only files, only folders, or both files and folders.
In the disabled state, the component does not receive focus and drag-and-drop functionality does not work.
When an invalid file is selected, only the corresponding item in the list receives the error state, not the entire component. Error messages are displayed below the uploader.
By default, the component grows in height when many files are selected. However, you can set a maximum height, after which scrolling will appear.
It is also possible to set a fixed height for the uploader.
The user can drag files onto the page, and at that moment a full-screen upload overlay will be shown.
The drag-and-drop area can be not only the entire screen or the File Upload component itself within a form, but also a separate part of the screen.
By default, every new selection is added to the files you already have — this makes it easy to build up a list over several picks.
If you want a new selection to replace the previous one instead — the way a regular system file dialog works — use addStrategy="replace".
accept is forwarded to the accept attribute of the native file input, exactly like the platform one: it filters what the operating system dialog offers, and nothing more. The user can still switch the dialog to "All files", and a dragged file never meets it at all.
To reject a file, validate the control. FileValidators.isCorrectExtension takes the same list, so both can be fed from one field, and the rejected file lands in the list with an error message the user can read — see the validation examples on the Examples tab.
A selection the component itself discards is reported through (rejected): files past the first for the single uploader, and duplicates of files already in the list for the multiple one with the default concat strategy.
The tab order is the browse link, then the remove control of every selected file, in list order. Delete and Backspace remove the file whose control has focus; after a removal focus moves to the control that took its place, or to the file input when the list is empty.
The component announces additions and removals in a live region of its own, in the wording of the active locale; to replace that wording, use [localeOverrides] or kbqFileUploadLocaleConfigurationProvider.