Skip to main content

FileUploader

<ui5-file-uploader> | Since 1.0.0-rc.6

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.

For the ui5-file-uploader

ES6 Module Import​

import "@ui5/webcomponents/dist/FileUploader.js";

Basic Sample​

Properties​

accept​

DescriptionComma-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.
Typestring | undefined
Defaultundefined

hideInput​

DescriptionIf set to "true", the input field of component will not be rendered. Only the default slot that is passed will be rendered.
Typeboolean
Defaultfalse

disabled​

DescriptionDefines whether the component is in disabled state.
Note: A disabled component is completely noninteractive.
Typeboolean
Defaultfalse

multiple​

DescriptionAllows multiple files to be chosen.
Typeboolean
Defaultfalse

name​

DescriptionDetermines 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.
Typestring | undefined
Defaultundefined

placeholder​

DescriptionDefines a short hint intended to aid the user with data entry when the component has no value.
Typestring | undefined
Defaultundefined

value​

DescriptionDefines the name/names of the file/files to upload.
Typestring
Default""

maxFileSize​

DescriptionDefines the maximum file size in megabytes which prevents the upload if at least one file exceeds it.
Typenumber | undefined
Defaultundefined
Since2.2.0

valueState​

DescriptionDefines the value state of the component.
Type"None" | "Positive" | "Critical" | "Negative" | "Information"
Default"None"

files​

DescriptionFileList of all selected files.
TypeFileList | null
Defaultnull
Readonlytrue

Slots​

default​

DescriptionBy default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.
Note: If no content is provided in this slot, the component will only consist of an input field and will not be interactable using the keyboard. Also it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience.
TypeArray<HTMLElement>

valueStateMessage​

DescriptionDefines 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.
TypeArray<HTMLElement>
Since1.0.0-rc.9

Events​

change​

DescriptionEvent 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.
TypeCustomEvent<FileUploaderChangeEventDetail>
Parametersfiles: FileList | null
The current files.
BubblesYes
CancelableNo

file-size-exceed​

DescriptionEvent is fired when the size of a file is above the maxFileSize property value.
TypeCustomEvent<FileUploaderFileSizeExceedEventDetail>
ParametersfilesData: Array<FileData>
An array of FileData objects containing thefileName and fileSize in MB of each file that exceeds the upload limit.
Since2.2.0
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Upload Multiple Files​

By default, only one file can be selected, to allow multiple files to be uploaded - set the "multiple" property.

Files Filter​

You can define the files, allowed for uploading via the "accept" property.

File Size Upload Limit​

You can define the maximum file size the uploader will accept.

Button Only​

You can hide the input part via the "hide-input" property.