DÁP Szolgáltatások

File input

File input component is a web component that allows users to select a file from their device. It is used to upload files in a user-friendly way.

Design system docs

Examples

Sizes

<dap-ds-stack>
  <dap-ds-file-input
  size="xs"
  description="Upload your resume"
  accept=".jpg,.docx,.png,.heic"
  label="Auto upload resume"
  uploadUrl="https://9daf1d71-c24f-4a02-8861-701f8ff4a9c8.mock.pstmn.io/upload/success"
  tooltip="File tooltip text">
</dap-ds-file-input>
<dap-ds-file-input
  description="Upload your resume"
  accept=".jpg,.docx,.png,.heic"
  label="Auto upload resume"
  uploadUrl="https://9daf1d71-c24f-4a02-8861-701f8ff4a9c8.mock.pstmn.io/upload/success"
  tooltip="File tooltip text">
</dap-ds-file-input>
  <dap-ds-file-input
  size="lg"
  description="Upload your resume"
  accept=".jpg,.docx,.png,.heic"
  label="Auto upload resume"
  uploadUrl="https://9daf1d71-c24f-4a02-8861-701f8ff4a9c8.mock.pstmn.io/upload/success"
  tooltip="File tooltip text">
</dap-ds-file-input>
</dap-ds-stack>

Auto upload files

File input component can be set to automatically upload files. When the user selects a file, it is automatically uploaded to the server. The autoupload attribute should be set to true, and the uploadUrl attribute should be set to the server URL.

<dap-ds-file-input
  description="Upload your resume"
  accept=".jpg,.docx,.png,.heic"
  label="Auto upload resume"
  autoupload
  uploadUrl="https://9daf1d71-c24f-4a02-8861-701f8ff4a9c8.mock.pstmn.io/upload/success"
  tooltip="File tooltip text">
</dap-ds-file-input>

File list

With the <dap-ds-file-input-list> component, you can display a list of uploaded files. The for attribute should be set to the ID of the file input component.

<>
<dap-ds-file-input
  size="xs"
  id="fileInput"
  description="Upload your resume"
  accept=".jpg,.docx,.png,.heic"
  label="Auto upload resume"
  autoupload
  uploadUrl="https://9daf1d71-c24f-4a02-8861-701f8ff4a9c8.mock.pstmn.io/upload/success"
  tooltip="File tooltip text">
</dap-ds-file-input>

<dap-ds-file-input-list for="fileInput"></dap-ds-file-input-list>
</>

Show drop zone

The showDropZone attribute can be set to true to show a drop zone for the file input component.

<>
<dap-ds-file-input
  size="xs"
  id="fileInput"
  description="Upload your resume"
  accept=".jpg,.docx,.png,.heic"
  label="Dropzone"
  showDropZone
  uploadUrl="https://9daf1d71-c24f-4a02-8861-701f8ff4a9c8.mock.pstmn.io/upload/success"
  tooltip="File tooltip text">
</dap-ds-file-input>

<dap-ds-file-input-list for="fileInput"></dap-ds-file-input-list>
</>

File events, handling file upload statuses

Please check the console for the file upload status events. You can find the available events in the Events section below. The first upload will be always successful, the second will always fail. A confirmation modal will be shown when the user tries to remove a file.

Example

HTML

<dap-ds-file-input
  ref={succcessRef}
  id="fileInput1"
  description="Always success upload"
  accept=".jpg,.docx,.png,.heic"
  label="Upload your recipes"
  autoupload
  uploadUrl="https://9daf1d71-c24f-4a02-8861-701f8ff4a9c8.mock.pstmn.io/upload/success"
  tooltip="File tooltip text">
</dap-ds-file-input>

<dap-ds-file-input-list for="fileInput1">
</dap-ds-file-input-list>

<dap-ds-modal
  id="confirmModal"
  header="Are you sure?"
  description="Confirm your choice!"
  okButtonDanger
  okButtonLabel="Delete">
</dap-ds-modal>

fileInput.addEventListener('dds-file-change', event => {
  const files = event.detail.files

  console.log('dds-file-change', files)
})

fileInput.addEventListener('dds-upload-complete', e => {
  console.log('dds-upload-complete', e)
  e.detail.item.feedbackType = 'positive'
  e.detail.item.feedback = 'success'
})

fileInput.addEventListener('dds-upload-error', e => {
  console.log('dds-upload-error', e)
  e.detail.item.feedbackType = 'negative'
  e.detail.item.feedback = 'error'
})

fileInput.addEventListener('dds-upload-error', () => {
  console.log('dds-upload-error', 'all upload completed successfully')
})

fileInput.addEventListener('dds-upload-progress', event => {
  console.log('uploading:', event.detail.progress)
})

fileInput.addEventListener('dds-file-removed', event => {
  const confirmModal = document.getElementById('confirmModal')
  confirmModal.addEventListener('dds-ok', () => {
    event.detail.cancel.allow(true)
  })

  confirmModal.addEventListener('dds-cancel', () => {
    event.detail.cancel.reject()
  })

  confirmModal.show()
})

Cancelable file change

In the dds-file-change event, you can prevent the files from being added by calling event.preventDefault(),this will reject all files, or adding the files to the canceledFiles set on the event detail object. This will reject only the files in the canceledFiles set.

Example, duplicate file prevention:

fileInput.addEventListener('dds-file-change', event => {
  const files = event.detail.currentFiles
  const newFiles = event.detail.newFiles
  const canceledFiles = event.detail.canceledFiles

  const existingNames = new Set(currentFiles.map(f => f.name))
  newFiles.forEach(file => {
    if (existingNames.has(file.name)) {
      canceledFiles.add(file)
    }
  })
})

Importing

import { DapDSFileInput } from 'dap-design-system'

Importing React

import { DapDSFileInputReact } from 'dap-design-system/react'

Tree-Shakeable Imports

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSFileInput } from 'dap-design-system/components'

Attributes

Property	Type	Default	Description
`uploadButtonLabel`	`string`		The label for the upload button.
`browseButtonLabel`	`string`		The label for the browse button.
`showDropzone`	`boolean`	`false`	Whether to show a separate dropzone area.
`dropzoneText`	`string`		Text to display in the dropzone.
`showFileList`	`boolean`	`false`	Whether to show the built-in file list.
`confirmRemove`	`boolean`	`true`	Whether to show confirmation dialog before removing files.
`showUploadButton`	`string`	`'true'`	Whether to show the upload button. Default is `true`.
`showBrowseButton`	`string`	`'true'`	Whether to show the browse button
`accept`	`string`		The file types that the file input accepts.
`multiple`	`boolean`	`false`	Whether the file input accepts multiple files.
`keepValue`	`boolean`	`false`	Whether to keep the value when new files are selected.
`uploadUrl`	`string`		A remote URL to upload files to.
`autoupload`	`boolean`		Whether to automatically upload files after selection.
`uploadProperty`	`string`	`'file'`	The property to use when uploading files
`uploadMethod`	`string`	`'POST'`	The HTTP method to use when uploading files
`deleteUrl`	`string`		A remote URL to delete uploaded files from. Supports placeholders: `{fileName}`, `{id}`, `{key}`, `{location}`.
`deleteMethod`	`string`	`'DELETE'`	The HTTP method to use when deleting files
`withCredentials`	`boolean`	`false`	Whether to send credentials with the file upload request
`uploadHeaders`	`string`		Custom headers for upload requests (JSON string).
`deleteHeaders`	`string`		Custom headers for delete requests (JSON string).
`fileList`	`DapDSFileInputList`, `null`	`null`	The file list component to bind to
`maxFiles`	`number`		The maximum number of files that can be uploaded.
`maxFileSize`	`number`		The maximum size of files that can be uploaded (in bytes).
`maxSizePerFile`	`number`		The maximum size a single file can have (in bytes).
`maxFileSizeErrorText`	`string`		Text for the max file size error.
`maxSizePerFileErrorText`	`string`		Text for the max size per file error.
`maxFileAmountErrorText`	`string`		Text for the max file amount error.
`fileTypeErrorText`	`string`		Text for the file type error.
`removeButtonLabel`	`string`		The label for the remove button.
`cancelButtonLabel`	`string`		The label for the cancel button.
`removeButtonDanger`	`string`	`'true'`	Whether the remove button is dangerous
`showThumbnail`	`string`	`'true'`	Whether to show thumbnail preview for supported file types in the built-in file list
`thumbnailSize`	`'xxs'`, `'xs'` , `'sm'` , `'md'` , `'lg'`	`'sm'`	Size of the thumbnail preview in the built-in file list
`name`	`string`		The name of the file input.
`value`	`string`		The value of the file input.
`status`	`'success'`, `'error'`		The status of the file input.
`label`	`string`		The label for the file input.
`description`	`string`		The description for the file input.
`tooltip`	`string`		The tooltip for the file input.
`tooltipPlacement`	`'top'`, `'right'` , `'bottom'` , `'left'`		The tooltip placement of the input.
`disabled`	`boolean`		Whether the file input is disabled.
`size`	`'xs'`, `'sm'` , `'lg'`		The size of the file input.
`feedback`	`string`		The feedback for the file input.
`feedbackType`	`'negative'`, `'positive'` , `'warning'`		The type of feedback for the file input.
`required`	`boolean`		Whether the file input is required.
`optional`	`boolean`		Whether the file input is optional.
`subtle`	`boolean`		Font weight of the feedback label. Default is `false` which is bold.

Slots

Name	Description
`dropzone-content`	The content to display in the dropzone.

Events

Event Name	Description	Type
`dds-upload-start`	Fired when a file upload starts.	`{file: File }`
`dds-upload-progress`	Fired during file upload progress.	`{file: File, progress: number }`
`dds-upload-complete`	Fired when a file upload completes successfully.	`{file: File, item: DapDSFileInputListItem, result: any }`
`dds-upload-error`	Fired when a file upload encounters an error. Always contains an errors array, even if there is only one error.	`{file?: File, errors: FileError[], item?: DapDSFileInputListItem }`
`dds-all-uploads-complete`	Fired when all file uploads are complete.	`{void }`
`dds-file-removed`	Fired when a file is removed from the file input.	`{file: FileListElement }`
`dds-file-delete-error`	Fired when a file deletion from server encounters an error.	`{file: FileListElement, error: Error }`
`dds-file-change`	Fired when the file input value changes. This event is cancelable. Event detail contains: `newFiles` (just the files being added in this operation), `currentFiles` (all files that were already selected before this operation), `files` (all files after merge with existing when keepValue=true), and `canceledFiles` (Set to add files you want to reject). You can either: (1) Call `event.preventDefault()` to reject all files, or (2) Add specific files to `canceledFiles` to reject only those files.	`{newFiles: File[], files: File[], canceledFiles: Set<File>, currentFiles: File[] }`
`dds-files-accepted`	Fired when the file input value changes. This event is cancelable. Event detail contains: `files` (all files after merge with existing when keepValue=true).	`{files: File[] }`

CSS Parts

Part Name	Description
`base`	The main file input container.
`input`	The file input control.
`label`	The file input label.
`description`	The file input description.
`feedback`	The file input feedback.
`tooltip`	The file input tooltip.
`upload-progress`	The upload progress container.
`browse-button`	The browse button.
`upload-button`	The upload button.
`dropzone`	The dropzone area.
`file-list`	The file list container.
`file-list-item`	Individual file list items.

How to Use CSS Parts

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-file-input::part(base) {
  /* Your custom styles */
}

/* Target multiple parts */
.my-custom-dap-ds-file-input::part(base),
.my-custom-dap-ds-file-input::part(input) {
  /* Shared styles */
}

Example usage:

<dap-ds-file-input class="my-custom-dap-ds-file-input">
  File input
</dap-ds-file-input>

.my-custom-dap-ds-file-input::part(base) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.

CSS Custom Properties

No CSS custom properties available.

Components

File input list item

<dap-ds-file-input-list-item/>

Attributes

Property	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the file input list item.
`inputName`	`string`		The name of the file input.
`feedback`	`string`		The feedback message.
`feedbackType`	`'negative'`, `'positive'` , `'warning'` , `'info'`		Feedback type.
`loading`	`boolean`	`false`	Loading state of the file input list item.
`showDeleteButton`	`string`	`'true'`	Show delete button.
`showFileSize`	`string`	`'true'`	Show file size.
`showFileLink`	`string`	`'true'`	Show file link.
`emitLinkEvent`	`boolean`	`false`	Whether to emit a custom event with the file data when the file is clicked.
`fileItemTemplate`	`(fileItemTemplate:FileItemTemplate) => TemplateResult`		File item template function
`fileLinkLabel`	`string`		The label of the file link.
`fileData`	`FileListElement`, `File`		The file data.
`subtle`	`boolean`	`false`	Subtle style.
`progress`	`string`	`'0'`	The progress of the file upload.
`href`	`string`		The url of the item link. If present, the item title will rendered as a link.
`rel`	`string`		The rel of the item link. Only used if href is present.
`target`	`LinkTarget`		The target of the item link. Only used if href is present.
`download`	`string`	`'true'`	Whether the file should be downloaded when clicked.
`showThumbnail`	`string`	`'false'`	Whether to show thumbnail preview for supported file types.
`thumbnailSize`	`'xxs'`, `'xs'` , `'sm'` , `'md'` , `'lg'`	`'sm'`	Size of the thumbnail preview.

Slots

Name	Description
`delete-button`	The delete button.

Events

Event Name	Description	Type
`dds-file-remove`	Dispatched when a file is removed from the list.	`{file: FileListElement }`
`dds-file-click`	Dispatched when a file is clicked.	`{file: FileListElement }`

CSS Parts

Part Name	Description
`base`	The main file input list item container.
`feedback`	The feedback container.
`link`	The link text of the item component.
`filename`	The filename text of the item component.
`filesize`	The filesize text of the item component.
`spinner`	The spinner of the item component.
`remove-button`	The remove button of the item component.
`thumbnail`	The thumbnail of the item component.

CSS Custom Properties

Property Name	Description
`--dds-file-list-item-padding`	The padding of the file list item.
`--dds-file-list-item-border-width`	The border width of the file list item.
`--dds-file-list-item-border-color`	The border color of the file list item.
`--dds-file-list-item-border-radius`	The border radius of the file list item.
`--dds-file-list-item-bg-color`	The background color of the file list item.
`--dds-file-list-item-font-weight`	The font weight of the file list item.
`--dds-file-list-item-disabled-bg-color`	The background color of the disabled file list item.
`--dds-file-list-item-disabled-color`	The text color of the disabled file list item.
`--dds-file-list-item-content-margin`	The margin of the content within the file list item.
`--dds-file-list-item-content-gap`	The gap between content elements in the file list item.
`--dds-file-list-item-filename-color`	The color of the filename text.
`--dds-file-list-item-filesize-color`	The color of the filesize text.
`--dds-file-list-item-feedback-padding-x`	The padding of the feedback section.
`--dds-file-list-item-feedback-padding-y`	The padding of the feedback section.
`--dds-file-list-item-feedback-border-color`	The border color of the feedback section.
`--dds-file-list-item-feedback-font-size`	The font size of the feedback text.

File input list

<dap-ds-file-input-list/>

Attributes

Property	Type	Default	Description
`for`	`string`		The id of the file input element to bind to.
`disabled`	`boolean`	`false`	Disables the file input list.
`label`	`string`, `undefined`		The label for the file input list.
`showDeleteButton`	`string`	`'true'`	Whether to show the delete button in the file input list item.
`showFileLink`	`string`	`'true'`	Whether to show the file link in the file input list item.
`fileItemTemplate`	`(fileItemTemplate:FileItemTemplate) => TemplateResult`		File item template function
`fileLinkLabel`	`string`		The label of the file link.
`emitLinkEvent`	`boolean`	`false`	Whether to emit a custom event with the file data when the file is clicked.
`showFileSize`	`string`	`'true'`	Whether to show the file size in the file input list item

Slots

Name	Description
`delete-button`	The delete button.

Events

Event Name	Description	Type
`dds-file-click`	Dispatched when a file is clicked.	`{file: FileListElement }`

CSS Parts

Part Name	Description
`base`	The main file input list container.

CSS Custom Properties

Property Name	Description
`--dds-file-list-display`	Controls the display property (default: flex)
`--dds-file-list-flex-direction`	Controls the flex-direction property (default: column)
`--dds-file-list-padding`	Controls the padding property (default: 0)
`--dds-file-list-list-style`	Controls the list-style-type property (default: none)
`--dds-file-list-gap`	Controls the row-gap property (default: var(--dds-spacing-200))

File input

File input component is a web component that allows users to select a file from their device. It is used to upload files in a user-friendly way.

Design system docs

Examples

Sizes

<dap-ds-stack>
  <dap-ds-file-input
  size="xs"
  description="Upload your resume"
  accept=".jpg,.docx,.png,.heic"
  label="Auto upload resume"
  uploadUrl="https://9daf1d71-c24f-4a02-8861-701f8ff4a9c8.mock.pstmn.io/upload/success"
  tooltip="File tooltip text">
</dap-ds-file-input>
<dap-ds-file-input
  description="Upload your resume"
  accept=".jpg,.docx,.png,.heic"
  label="Auto upload resume"
  uploadUrl="https://9daf1d71-c24f-4a02-8861-701f8ff4a9c8.mock.pstmn.io/upload/success"
  tooltip="File tooltip text">
</dap-ds-file-input>
  <dap-ds-file-input
  size="lg"
  description="Upload your resume"
  accept=".jpg,.docx,.png,.heic"
  label="Auto upload resume"
  uploadUrl="https://9daf1d71-c24f-4a02-8861-701f8ff4a9c8.mock.pstmn.io/upload/success"
  tooltip="File tooltip text">
</dap-ds-file-input>
</dap-ds-stack>

Auto upload files

<dap-ds-file-input
  description="Upload your resume"
  accept=".jpg,.docx,.png,.heic"
  label="Auto upload resume"
  autoupload
  uploadUrl="https://9daf1d71-c24f-4a02-8861-701f8ff4a9c8.mock.pstmn.io/upload/success"
  tooltip="File tooltip text">
</dap-ds-file-input>

File list

With the <dap-ds-file-input-list> component, you can display a list of uploaded files. The for attribute should be set to the ID of the file input component.

<>
<dap-ds-file-input
  size="xs"
  id="fileInput"
  description="Upload your resume"
  accept=".jpg,.docx,.png,.heic"
  label="Auto upload resume"
  autoupload
  uploadUrl="https://9daf1d71-c24f-4a02-8861-701f8ff4a9c8.mock.pstmn.io/upload/success"
  tooltip="File tooltip text">
</dap-ds-file-input>

<dap-ds-file-input-list for="fileInput"></dap-ds-file-input-list>
</>

Show drop zone

The showDropZone attribute can be set to true to show a drop zone for the file input component.

<>
<dap-ds-file-input
  size="xs"
  id="fileInput"
  description="Upload your resume"
  accept=".jpg,.docx,.png,.heic"
  label="Dropzone"
  showDropZone
  uploadUrl="https://9daf1d71-c24f-4a02-8861-701f8ff4a9c8.mock.pstmn.io/upload/success"
  tooltip="File tooltip text">
</dap-ds-file-input>

<dap-ds-file-input-list for="fileInput"></dap-ds-file-input-list>
</>

File events, handling file upload statuses

Example

HTML

<dap-ds-file-input
  ref={succcessRef}
  id="fileInput1"
  description="Always success upload"
  accept=".jpg,.docx,.png,.heic"
  label="Upload your recipes"
  autoupload
  uploadUrl="https://9daf1d71-c24f-4a02-8861-701f8ff4a9c8.mock.pstmn.io/upload/success"
  tooltip="File tooltip text">
</dap-ds-file-input>

<dap-ds-file-input-list for="fileInput1">
</dap-ds-file-input-list>

<dap-ds-modal
  id="confirmModal"
  header="Are you sure?"
  description="Confirm your choice!"
  okButtonDanger
  okButtonLabel="Delete">
</dap-ds-modal>

fileInput.addEventListener('dds-file-change', event => {
  const files = event.detail.files

  console.log('dds-file-change', files)
})

fileInput.addEventListener('dds-upload-complete', e => {
  console.log('dds-upload-complete', e)
  e.detail.item.feedbackType = 'positive'
  e.detail.item.feedback = 'success'
})

fileInput.addEventListener('dds-upload-error', e => {
  console.log('dds-upload-error', e)
  e.detail.item.feedbackType = 'negative'
  e.detail.item.feedback = 'error'
})

fileInput.addEventListener('dds-upload-error', () => {
  console.log('dds-upload-error', 'all upload completed successfully')
})

fileInput.addEventListener('dds-upload-progress', event => {
  console.log('uploading:', event.detail.progress)
})

fileInput.addEventListener('dds-file-removed', event => {
  const confirmModal = document.getElementById('confirmModal')
  confirmModal.addEventListener('dds-ok', () => {
    event.detail.cancel.allow(true)
  })

  confirmModal.addEventListener('dds-cancel', () => {
    event.detail.cancel.reject()
  })

  confirmModal.show()
})

Cancelable file change

Example, duplicate file prevention:

fileInput.addEventListener('dds-file-change', event => {
  const files = event.detail.currentFiles
  const newFiles = event.detail.newFiles
  const canceledFiles = event.detail.canceledFiles

  const existingNames = new Set(currentFiles.map(f => f.name))
  newFiles.forEach(file => {
    if (existingNames.has(file.name)) {
      canceledFiles.add(file)
    }
  })
})

Importing

import { DapDSFileInput } from 'dap-design-system'

Importing React

import { DapDSFileInputReact } from 'dap-design-system/react'

Tree-Shakeable Imports

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSFileInput } from 'dap-design-system/components'

Attributes

Property	Type	Default	Description
`uploadButtonLabel`	`string`		The label for the upload button.
`browseButtonLabel`	`string`		The label for the browse button.
`showDropzone`	`boolean`	`false`	Whether to show a separate dropzone area.
`dropzoneText`	`string`		Text to display in the dropzone.
`showFileList`	`boolean`	`false`	Whether to show the built-in file list.
`confirmRemove`	`boolean`	`true`	Whether to show confirmation dialog before removing files.
`showUploadButton`	`string`	`'true'`	Whether to show the upload button. Default is `true`.
`showBrowseButton`	`string`	`'true'`	Whether to show the browse button
`accept`	`string`		The file types that the file input accepts.
`multiple`	`boolean`	`false`	Whether the file input accepts multiple files.
`keepValue`	`boolean`	`false`	Whether to keep the value when new files are selected.
`uploadUrl`	`string`		A remote URL to upload files to.
`autoupload`	`boolean`		Whether to automatically upload files after selection.
`uploadProperty`	`string`	`'file'`	The property to use when uploading files
`uploadMethod`	`string`	`'POST'`	The HTTP method to use when uploading files
`deleteUrl`	`string`		A remote URL to delete uploaded files from. Supports placeholders: `{fileName}`, `{id}`, `{key}`, `{location}`.
`deleteMethod`	`string`	`'DELETE'`	The HTTP method to use when deleting files
`withCredentials`	`boolean`	`false`	Whether to send credentials with the file upload request
`uploadHeaders`	`string`		Custom headers for upload requests (JSON string).
`deleteHeaders`	`string`		Custom headers for delete requests (JSON string).
`fileList`	`DapDSFileInputList`, `null`	`null`	The file list component to bind to
`maxFiles`	`number`		The maximum number of files that can be uploaded.
`maxFileSize`	`number`		The maximum size of files that can be uploaded (in bytes).
`maxSizePerFile`	`number`		The maximum size a single file can have (in bytes).
`maxFileSizeErrorText`	`string`		Text for the max file size error.
`maxSizePerFileErrorText`	`string`		Text for the max size per file error.
`maxFileAmountErrorText`	`string`		Text for the max file amount error.
`fileTypeErrorText`	`string`		Text for the file type error.
`removeButtonLabel`	`string`		The label for the remove button.
`cancelButtonLabel`	`string`		The label for the cancel button.
`removeButtonDanger`	`string`	`'true'`	Whether the remove button is dangerous
`showThumbnail`	`string`	`'true'`	Whether to show thumbnail preview for supported file types in the built-in file list
`thumbnailSize`	`'xxs'`, `'xs'` , `'sm'` , `'md'` , `'lg'`	`'sm'`	Size of the thumbnail preview in the built-in file list
`name`	`string`		The name of the file input.
`value`	`string`		The value of the file input.
`status`	`'success'`, `'error'`		The status of the file input.
`label`	`string`		The label for the file input.
`description`	`string`		The description for the file input.
`tooltip`	`string`		The tooltip for the file input.
`tooltipPlacement`	`'top'`, `'right'` , `'bottom'` , `'left'`		The tooltip placement of the input.
`disabled`	`boolean`		Whether the file input is disabled.
`size`	`'xs'`, `'sm'` , `'lg'`		The size of the file input.
`feedback`	`string`		The feedback for the file input.
`feedbackType`	`'negative'`, `'positive'` , `'warning'`		The type of feedback for the file input.
`required`	`boolean`		Whether the file input is required.
`optional`	`boolean`		Whether the file input is optional.
`subtle`	`boolean`		Font weight of the feedback label. Default is `false` which is bold.

Slots

Name	Description
`dropzone-content`	The content to display in the dropzone.

Events

Event Name	Description	Type
`dds-upload-start`	Fired when a file upload starts.	`{file: File }`
`dds-upload-progress`	Fired during file upload progress.	`{file: File, progress: number }`
`dds-upload-complete`	Fired when a file upload completes successfully.	`{file: File, item: DapDSFileInputListItem, result: any }`
`dds-upload-error`	Fired when a file upload encounters an error. Always contains an errors array, even if there is only one error.	`{file?: File, errors: FileError[], item?: DapDSFileInputListItem }`
`dds-all-uploads-complete`	Fired when all file uploads are complete.	`{void }`
`dds-file-removed`	Fired when a file is removed from the file input.	`{file: FileListElement }`
`dds-file-delete-error`	Fired when a file deletion from server encounters an error.	`{file: FileListElement, error: Error }`
`dds-file-change`	Fired when the file input value changes. This event is cancelable. Event detail contains: `newFiles` (just the files being added in this operation), `currentFiles` (all files that were already selected before this operation), `files` (all files after merge with existing when keepValue=true), and `canceledFiles` (Set to add files you want to reject). You can either: (1) Call `event.preventDefault()` to reject all files, or (2) Add specific files to `canceledFiles` to reject only those files.	`{newFiles: File[], files: File[], canceledFiles: Set<File>, currentFiles: File[] }`
`dds-files-accepted`	Fired when the file input value changes. This event is cancelable. Event detail contains: `files` (all files after merge with existing when keepValue=true).	`{files: File[] }`

CSS Parts

Part Name	Description
`base`	The main file input container.
`input`	The file input control.
`label`	The file input label.
`description`	The file input description.
`feedback`	The file input feedback.
`tooltip`	The file input tooltip.
`upload-progress`	The upload progress container.
`browse-button`	The browse button.
`upload-button`	The upload button.
`dropzone`	The dropzone area.
`file-list`	The file list container.
`file-list-item`	Individual file list items.

How to Use CSS Parts

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-file-input::part(base) {
  /* Your custom styles */
}

/* Target multiple parts */
.my-custom-dap-ds-file-input::part(base),
.my-custom-dap-ds-file-input::part(input) {
  /* Shared styles */
}

Example usage:

<dap-ds-file-input class="my-custom-dap-ds-file-input">
  File input
</dap-ds-file-input>

.my-custom-dap-ds-file-input::part(base) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.

CSS Custom Properties

No CSS custom properties available.

Components

File input list item

<dap-ds-file-input-list-item/>

Attributes

Property	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the file input list item.
`inputName`	`string`		The name of the file input.
`feedback`	`string`		The feedback message.
`feedbackType`	`'negative'`, `'positive'` , `'warning'` , `'info'`		Feedback type.
`loading`	`boolean`	`false`	Loading state of the file input list item.
`showDeleteButton`	`string`	`'true'`	Show delete button.
`showFileSize`	`string`	`'true'`	Show file size.
`showFileLink`	`string`	`'true'`	Show file link.
`emitLinkEvent`	`boolean`	`false`	Whether to emit a custom event with the file data when the file is clicked.
`fileItemTemplate`	`(fileItemTemplate:FileItemTemplate) => TemplateResult`		File item template function
`fileLinkLabel`	`string`		The label of the file link.
`fileData`	`FileListElement`, `File`		The file data.
`subtle`	`boolean`	`false`	Subtle style.
`progress`	`string`	`'0'`	The progress of the file upload.
`href`	`string`		The url of the item link. If present, the item title will rendered as a link.
`rel`	`string`		The rel of the item link. Only used if href is present.
`target`	`LinkTarget`		The target of the item link. Only used if href is present.
`download`	`string`	`'true'`	Whether the file should be downloaded when clicked.
`showThumbnail`	`string`	`'false'`	Whether to show thumbnail preview for supported file types.
`thumbnailSize`	`'xxs'`, `'xs'` , `'sm'` , `'md'` , `'lg'`	`'sm'`	Size of the thumbnail preview.

Slots

Name	Description
`delete-button`	The delete button.

Events

Event Name	Description	Type
`dds-file-remove`	Dispatched when a file is removed from the list.	`{file: FileListElement }`
`dds-file-click`	Dispatched when a file is clicked.	`{file: FileListElement }`

CSS Parts

Part Name	Description
`base`	The main file input list item container.
`feedback`	The feedback container.
`link`	The link text of the item component.
`filename`	The filename text of the item component.
`filesize`	The filesize text of the item component.
`spinner`	The spinner of the item component.
`remove-button`	The remove button of the item component.
`thumbnail`	The thumbnail of the item component.

CSS Custom Properties

Property Name	Description
`--dds-file-list-item-padding`	The padding of the file list item.
`--dds-file-list-item-border-width`	The border width of the file list item.
`--dds-file-list-item-border-color`	The border color of the file list item.
`--dds-file-list-item-border-radius`	The border radius of the file list item.
`--dds-file-list-item-bg-color`	The background color of the file list item.
`--dds-file-list-item-font-weight`	The font weight of the file list item.
`--dds-file-list-item-disabled-bg-color`	The background color of the disabled file list item.
`--dds-file-list-item-disabled-color`	The text color of the disabled file list item.
`--dds-file-list-item-content-margin`	The margin of the content within the file list item.
`--dds-file-list-item-content-gap`	The gap between content elements in the file list item.
`--dds-file-list-item-filename-color`	The color of the filename text.
`--dds-file-list-item-filesize-color`	The color of the filesize text.
`--dds-file-list-item-feedback-padding-x`	The padding of the feedback section.
`--dds-file-list-item-feedback-padding-y`	The padding of the feedback section.
`--dds-file-list-item-feedback-border-color`	The border color of the feedback section.
`--dds-file-list-item-feedback-font-size`	The font size of the feedback text.

File input list

<dap-ds-file-input-list/>

Attributes

Property	Type	Default	Description
`for`	`string`		The id of the file input element to bind to.
`disabled`	`boolean`	`false`	Disables the file input list.
`label`	`string`, `undefined`		The label for the file input list.
`showDeleteButton`	`string`	`'true'`	Whether to show the delete button in the file input list item.
`showFileLink`	`string`	`'true'`	Whether to show the file link in the file input list item.
`fileItemTemplate`	`(fileItemTemplate:FileItemTemplate) => TemplateResult`		File item template function
`fileLinkLabel`	`string`		The label of the file link.
`emitLinkEvent`	`boolean`	`false`	Whether to emit a custom event with the file data when the file is clicked.
`showFileSize`	`string`	`'true'`	Whether to show the file size in the file input list item

Slots

Name	Description
`delete-button`	The delete button.

Events

Event Name	Description	Type
`dds-file-click`	Dispatched when a file is clicked.	`{file: FileListElement }`

CSS Parts

Part Name	Description
`base`	The main file input list container.

CSS Custom Properties

Property Name	Description
`--dds-file-list-display`	Controls the display property (default: flex)
`--dds-file-list-flex-direction`	Controls the flex-direction property (default: column)
`--dds-file-list-padding`	Controls the padding property (default: 0)
`--dds-file-list-list-style`	Controls the list-style-type property (default: none)
`--dds-file-list-gap`	Controls the row-gap property (default: var(--dds-spacing-200))