The ui5-file-uploader opens a file explorer dialog and enables users to upload files.
The component consists of input field, but you can provide an HTML element by your choice
to trigger the file upload, by using the default slot.
Furthermore, you can set the property "hideInput" to "true" to hide the input field.
To get all selected files, you can simply use the read-only "files" property.
To restrict the types of files the user can select, you can use the "accept" property.
And, similar to all input based components, the FileUploader supports "valueState", "placeholder", "name", and "disabled" properties.
Comma-separated list of file types that the component should accept. Note: Please make sure you are adding the . in front on the file type, e.g. .png in case you want to accept png's only.
If set to "true", the input field of component will not be rendered. Only the default slot that is passed will be rendered. Note: Use this property in combination with the default slot to achieve a button-only file uploader design.
Determines the name by which the component will be identified upon submission in an HTML form. Note: This property is only applicable within the context of an HTML Form element.
This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog. Note: For best accessibility experience, set a tabindex of "-1" on your interactive element, or it will be set automatically. This slot is intended for use cases where you want a button-only file uploader. It is recommended to set hideInput property to "true" when using this slot. Not setting hideInput may negatively impact the screen reader users.
Defines the value state message that will be displayed as pop up under the component. Note: If not specified, a default text (in the respective language) will be displayed. Note: The valueStateMessage would be displayed, when the component is in Information, Critical or Negative value state.
Event is fired when the value of the file path has been changed. Note: Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.