Last Update: Aug 13, 2024
Platform: Web
Designer: Nikola Luisa Wenger
Intro
For uploading of files the Fiori Guidelines are differentiating between uploading one single file or multiple files. sap.m.UploadSet When only will be uploaded, the sap.ui.unified.FileUploader should be used instead. For the FileUploader there is no guidelines article which gives us the freedom to define the conditions. To make sure that the FileUploader is used consistent across SuccessFactors we are defining this as a custom component.
Usage
Use if
- the user can upload only one single file
Do not use if
- You want to show a list of uploaded files that can be modified.
- You want to allow users to add or remove several files, and to change the file names.
Structure & Components
Despite its name, the file uploader is not limited to plain upload scenarios. Depending on the context or the access rights, some users may only be allowed to download the file uploaded by others. You can use the file uploader for both cases.
The File Uploader consists of 3 controls. An input field with label and a button.
The label defines which file or type of file can be uploaded.
The input fields has the prompt text: "Choose a file"
The button is next to the input field with the text "Browse"
The File Uploader consists of 2 controls. A link with a label.
The label defines which file or type of file can be uploaded.
The link has the name of the file. Clicking the link downloads the file.
If no file has been uploaded a en-dash is shown through activating the property: emptyIndicatorMode
Behavior & Interaction
Uploading a file
No file uploaded. Through clicking the "Browse" button the file explorer opens to select a file. Users can also upload a file using drag and drop into the field.
File is selected. Automatic uploading is started. When taking more than 1 minute a busy indicator is shown. To use automatic uploading in UI5 property "uploadOnChange" needs to be true.
When the file name is very long the text will be truncated in the middle of the text and not at the end so that the file type is always visible.
Responsiveness and Adaptiveness
Application-specific examples
Time Sheet
