Upload File Dialog

Components / Upload File Dialog

Intro

Upload File Dialog is an extended component from the SAP Web UI Kit. Variants contain contextual options that appear based on the uploaded file type (.csv and .xlsx)

It contains variants for three upload dialogs:

https://www.figma.com/design/3pnSbYmau9yyEpKr63q5cb/DNA-Web-UI-Kit?node-id=7859-29977&t=SQmE6dOvM9cGLrP8-11

When to Use

do
false

Use the Upload File Dialog:

  • When uploading a file in Files (SAC)
    When uploading a .csv file in Repository Explorer (DSP)

Use the Create Dataset From File Dialog:

  • When adding new data in Stories (SAC)
dont
false

Don’t use the Upload File Dialog:

  • For workflows not related to file upload.

Anatomy

  1. Button: The "Select File" button allows users to browse and choose a file from their local system for upload.
  2. Upload Status: Placeholder text or token with the name of the uploaded file.
  3. Contextual Options (optional): Select and checkbox fields, dependent on the file type uploaded.
  4. Dialog Footer: The primary button uploads the selected file and the secondary button exits the dialog.

Annotated anatomy diagram of the "Create Dataset From File" dialog with an Excel file selected. Four numbered callouts (in magenta) label the key components: (1) the "Select File" button, (2) the dialog header, (3) the "Sheet" dropdown currently set to "Account", and (4) the "Import" and "Cancel" action buttons in the footer.

Upload File Dialog - Anatomy

Types

Upload File Dialog

The Upload File dialog should be used when uploading a file in SAC’s Files or DSP’s Repository Explorer.
In SAC, there are no additional contextual options when a file is uploaded, regardless of the file type.
In DSP, .csv-specific contextual options appear when a .csv file is uploaded.

The "Create Dataset From File" dialog in its empty initial state. The file input row shows the "Select File" button and the placeholder text "No file selected". No contextual options are visible. The footer contains a disabled "Import" button and a "Cancel" link.

Upload File Dialog - No File Selected

The "Upload File" dialog (SAC variant) with a file selected but no additional contextual options shown. The file input row displays the "Select File" button and the filename "UploadedFile.csv" as plain text (no input field or clear button). The footer contains an active "Upload" button and a "Cancel" link.

Upload File Dialog - File Selected, No Contextual Options (SAC)

The "Upload File" dialog (DSP variant) with a CSV file selected. The file input row shows the "Select File" button alongside a file icon and the filename "UploadedFile.csv" with a clear (×) button. Below are a "Use the first row as column headers" checkbox (unchecked) and a "CSV Delimiter" dropdown set to "Auto-detect". The footer contains an active "Upload" button and a "Cancel" link.

Upload File Dialog - CSV File Selected (DSP)

Create Dataset from File

The Create Dataset From File dialog should only be used in SAC (i.e., adding new data in a Story).
When uploading .csv and .xlsx files, different contextual options will be shown.

The "Upload File" dialog in its empty initial state. The file input row shows the "Select File" button and the placeholder text "No file selected". No contextual options are visible. The footer contains a disabled "Upload" button and a "Cancel" link.

Create Dataset From File Dialog - No File Selected

The "Create Dataset From File" dialog with a CSV file selected. The file input row shows the "Select File" button alongside a file icon and the filename "UploadedFile.csv" with a clear (×) button. Below are a "Use the first row as column headers" checkbox (unchecked) and a "CSV Delimiter" dropdown set to "Auto-detect". The footer contains an active "Import" button and a "Cancel" link.

Create Dataset From File Dialog - CSV File Selected

The "Create Dataset From File" dialog with an Excel file selected. The file input row shows the "Select File" button alongside a file icon and the filename "UploadedFile.xlsx" with a clear (×) button. A "Sheet" dropdown below is set to "Account", followed by a "Use the first row as column headers" checkbox (unchecked). The footer contains an active "Import" button and a "Cancel" link.

Create Dataset From File Dialog - Excel File Selected

Upload Package

The Upload Package dialog should be used when uploading a new package in SAC and DSP’s Transport/Import.

The "Upload Package" dialog in its empty initial state. The file input row shows the "Select File" button and the placeholder text "No file selected". Below are a "Version" field with three numeric inputs (each defaulting to 0, separated by dots) accompanied by an info icon, and a "Replace package" checkbox with an info icon. The footer contains a disabled "Upload" button and a "Cancel" link.

Upload Package Dialog - No File Selected

The "Upload Package" dialog with a package file selected. The file input row shows the "Select File" button and the filename "UploadedFile.package" as plain text. Below are a "Version" field with three numeric inputs (each defaulting to 0, separated by dots) accompanied by an info icon, and a "Replace package" checkbox with an info icon. The footer contains an active "Upload" button and a "Cancel" link.

Upload Package Dialog - Package File Selected

Behavior and Interaction

Select Control

When a dropdown list is opened, it should appear above the dialog container layer for better visibility.

The "Upload File" dialog with a CSV file selected and the "CSV Delimiter" select control open. The dropdown displays five placeholder "Option text" items in the list. The file input row shows "UploadedFile.csv" with a clear (×) button, and the "Use the first row as column headers" checkbox is unchecked. The "Upload" and "Cancel" buttons are visible in the footer.

Upload File Dialog - Select control with open options list