Last Update: Sept 08, 2022
Platform: Web
Designer: Aastha Jain
Intro
Attach a File pattern allows users to attach single or multiple files from a device (desktop, tablet, or phone) to an SAP Fiori app.
Usage
Use the upload set control if:
- You want to show a list of attached files that can be modified.
- You want to allow users to add or remove several files, and to change the file names.
- You are still using one of the older upload controls:
- sap.ca.ui.FileUpload
- sap.m.UploadCollection (deprecated since SAPUI5 version 1.88)
Do not use the upload set control if:
The user can upload only one file to the app. In this case, use the sap.ui.unified.FileUploader control instead.
Structure & Components
On web, attach a file pattern consists of a dialog window with a field for a file upload. After the file was attached the user will get a confirmation, that the file was attached successfully. In this case the activity is successfully saved.
1. Create activity by attaching a file.
2. Choose the attachment.
3. Save or delete the attachments.
4. Confirmation
Behavior & Interaction
Attaching Files
Manual upload: All added files are first collected in the front-end list, where the user needs to trigger the upload.
Empty State
If empty, the attach a file pattern provides a hint to use the Add button.
Opening Files
Files are opened by clicking the file name of the attachment. How the files open depends on the operating system and browser settings.
On desktop devices, clicking the file name opens the program that has been assigned to this file type. In some cases, the files are opened directly in the browser if they are among the supported file types, like jpg, png or pdf. However, this also depends on the individual browser and its settings.
Mobile devices usually open a dialog in which the user can select an app that supports this file type.
Removing Files
The Remove function works identically on desktop and mobile devices.
After clicking the Remove (x) button for a file, the user is prompted to confirm the removal of the respective file.
Remove confirms the deletion and the file is removed from the list. Cancel aborts the process, closes the dialog, and brings the user back to the file list without making any changes.
Responsiveness and Adaptiveness
The attach a file pattern offers full responsive behavior from small phones to large desktop screens. Uploading, downloading, renaming, and deleting works on all screen sizes. Texts that no longer fit into the available space are truncated.
Mobile devices usually open a dialog in which the user can select an app that supports this file type.
Application-specific examples
You can use the attach a file in different contexts, whenever users need to be able to upload multiple files. The example below shows the object page of My Activities, in this case the user can attach a file by clicking on the primary button "Create Activity".
Accessibility
Specs