Upload

The Upload component allows users to select and upload files via browsing or drag-and-drop. It supports configurable file type and size validation, multiple file uploads, and provides visual feedback for each file's upload status.

Import

React
Angular
Vue.js

// with @dhl-official/react-library:
import { DhlUpload } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlUpload } from "@dhl-official/ui-libraries/react-library"

If the DUIL has been installed, you can use the web component directly:

<dhl-upload></dhl-upload>

// with @dhl-official/vue-library:
import { DhlUpload } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlUpload } from "@dhl-official/ui-libraries/vue-library"

Code

React
Angular
Vue.js

<DhlUpload
  acceptedTypes=".pdf,.docx,.odt,.rtf"
  maxSize={31457280}
  multiple
/>

<dhl-upload
  accepted-types=".pdf,.docx,.odt,.rtf"
  max-size="31457280"
  multiple
></dhl-upload>

<dhl-upload
  accepted-types=".pdf,.docx,.odt,.rtf"
  :max-size="31457280"
  multiple
></dhl-upload>

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
`acceptedTypes`	`accepted-types`	An optional prop defining a comma-separated list of accepted file types. Supports MIME types and extensions (e.g. ".pdf,.docx" or "application/pdf,image/*").	`string`	`DHL_UPLOAD.DEFAULTS.ACCEPTED_TYPES`
`background`	`background`	An optional prop to set the background of the component container. Defaults to `transparent`.	`"transparent" \| "white"`	`DHL_UPLOAD.BACKGROUND.TRANSPARENT`
`browseButtonLabel`	`browse-button-label`	An optional prop for the browse button label.	`string`	`"Browse Files"`
`cancelButtonLabel`	`cancel-button-label`	An optional prop for the cancel button label.	`string`	`"Cancel"`
`continueButtonLabel`	`continue-button-label`	An optional prop for the continue button label.	`string`	`"Continue"`
`dataAriaLabel`	`data-aria-label`	An optional prop defining the text read by the screen reader.	`string`	`"File upload"`
`dataClassName`	`data-class-name`	An optional class name prop for the component.	`string`	`undefined`
`dataId`	`data-id`	An optional prop. Gives a valid HTML ID attribute value for the component.	`string`	`dhl-upload-${getRandomString()}`
`dataTestid`	`data-testid`	An optional prop. The test id attached to the component as a data-testid attribute.	`string`	`undefined`
`description`	`description`	An optional prop for the description text displayed in the drop zone.	`string`	`"Or drop here to upload"`
`files`	`files`	An optional prop for the list of files rendered in the upload. The component manages this list in response to user interaction, but consumers may provide an initial value or take control by updating it externally. Each entry follows the `DhlUploadFile` interface.	`DhlUploadFile[]`	`[]`
`isDisabled`	`is-disabled`	An optional flag to define if the component is disabled.	`boolean`	`false`
`maxSize`	`max-size`	An optional prop for the maximum file size in bytes. Defaults to 30 MB.	`number`	`DHL_UPLOAD.DEFAULTS.MAX_SIZE`
`maxSizeLabel`	`max-size-label`	An optional prop for the max size display text. If not set, the value is auto-generated from the `maxSize` prop.	`string`	`undefined`
`multiple`	`multiple`	An optional flag to allow multiple file uploads.	`boolean`	`DHL_UPLOAD.DEFAULTS.MULTIPLE`
`showBorder`	`show-border`	An optional flag to display the dashed border around the drop zone.	`boolean`	`DHL_UPLOAD.DEFAULTS.SHOW_BORDER`
`showCta`	`show-cta`	An optional flag to display the Cancel/Continue action buttons.	`boolean`	`DHL_UPLOAD.DEFAULTS.SHOW_CTA`
`showDescription`	`show-description`	An optional flag to display the description text.	`boolean`	`DHL_UPLOAD.DEFAULTS.SHOW_DESCRIPTION`
`showFileTypes`	`show-file-types`	An optional flag to display the accepted file types.	`boolean`	`DHL_UPLOAD.DEFAULTS.SHOW_FILE_TYPES`
`showFiles`	`show-files`	An optional flag to display the file list.	`boolean`	`DHL_UPLOAD.DEFAULTS.SHOW_FILES`
`showIcon`	`show-icon`	An optional flag to display the upload icon in the drop zone.	`boolean`	`DHL_UPLOAD.DEFAULTS.SHOW_ICON`

Events

Event	Description	Type
`dhlUploadCancel`	Event emitted when the cancel button is clicked.	`CustomEvent<void>`
`dhlUploadContinue`	Event emitted when the continue button is clicked.	`CustomEvent<{ files: DhlUploadFile[]; }>`
`dhlUploadFileRemoved`	Event emitted when a file is removed from the list.	`CustomEvent<{ fileId: string; fileName: string; }>`
`dhlUploadFilesAdded`	Event emitted when files are added to the upload (after validation).	`CustomEvent<{ files: DhlUploadFile[]; }>`

Dependencies

Depends on

Graph

Built by DHL User Interface Library Team!

Import

Code​

Interactive Demo​

Readme​

Properties​

Events​

Dependencies​

Depends on​

Graph​