Intro

The upload set with table plugin allows users to upload a single file, multiple files, or a directory of files from a device (desktop, tablet, or phone) to an SAP Fiori app.

Despite its name, the upload set with table plugin is not limited to upload scenarios. You can also use it for cases where users can only download files uploaded by other users, due to the context or access rights.

The successor to the upload set control, the upload set with table plugin is enhanced with new features. While the upload set control was designed for the list UI control, the upload set with table plugin was designed to work with the table control.

This plugin can be connected to tables, such as the grid table, the responsive table, or the Meta Driven Controls (MDC) table.

information

For more information, see:

Upload set plugin in a responsive table

When to Use

Do

Use the upload set with table plugin:

  • To show uploaded files in a table row that can be modified.

  • To allow users to add or remove several files, and to change the file names

  • To replace an older or deprecated control:

    • sap.ca.ui.FileUpload
    • sap.m.UploadCollection (deprecated since SAPUI5 version 1.88.
    • sap.m.upload.UploadSet

Don't

Don’t use the upload set with table plugin:

  • To allow users to upload only one file to the app
  • Instead, use the sap.ui.unified.FileUploader control.

Upload Actions

The plugin offers the following upload actions:

  • Upload for uploading files from the local file system
  • Upload from Cloud for uploading files from the connected cloud workspace account

Additional Actions

Additionally, you can provide an action to:

  • Download a file
  • Rename a file
  • Add a URL: The URL is used to create the file

Upload buttons and menu

hint

You implement the additional actions with the following public APIs:

File Preview

Users can preview uploaded files with a specialized file preview dialog control that displays the file content.

The plugin supports the preview for only specific file types listed in the FilePreviewDialog (SAP UI5 API reference).

File preview in a dialog

Behavior and Interaction

Uploading Files

The users drop files onto the table area or they click the OK button in the file selection dialog.

Depending on the working mode that the application development team uses for the upload set, the user experience differs slightly:

If some users are allowed only to download the files that others have uploaded, you can disable the upload option.

The upload set with table plugin allows you to use a custom uploader, unlike the deprecated upload collection control,

hint

You implement the additional actions with the following public APIs:

  • The default working mode is instant upload.
  • For manual upload, where the users trigger the upload explicitly and with item validation callback, configure the itemValidationHandler. The selected files are uploaded only after a promise from the callback is resolved.
  • The Boolean property, uploadEnabled controls whether or not users can upload files.

Empty State

If the table is empty, the plugin provides an illustrated message that tells the users to upload files by dragging and dropping them into a large zone in the table area or by using the Upload button.

Table with an empty state

Drag and Drop

To start the upload, users can select one or more files from their computer and drag them onto the table’s drop area. The same process is used as the one for the Upload button.

Dragging a file into a table

Previewing Files

To preview files, users click the file name of the attachment. The preview opens in a dialog.

When necessary, on mobile devices, a dialog opens where users can select an app that supports the respective file type, such as *.doc or *.pptx.

hint

The API openFilePreview integration or configuration is essential for previewing files. For example, the openFilePreview API is invoked when the file name is clicked.

For more information, see the openFilePreview API reference.

Renaming Files

The Rename action works identically on desktop and mobile devices.

The action is enabled when the user selects an entry from the table. It opens the Rename Document dialog.

Rename dialog

Adding a URL

The users can upload a file using a URL, rather than a file. The URL is then used to create the file.

Add a URL dialog

hint
  • The API uploadItemViaUrl returns a promise that initiates an upload when it is resolved.

Elements and Controls

Implementation