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.
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.
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.
The showDropZone attribute can be set to true to show a drop zone for the file input component.
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.
<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()
})
import { DapDSFileInput } from 'dap-design-system/dist/dds'
import { DapDSFileInputReact } from 'dap-design-system/dist/react'
| 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). | |
maxFileSizeErrorText | string | Text for the max file size 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. |
| Name | Description |
|---|---|
dropzone-content | The content to display in the dropzone. |
| 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. Can contain a single error or an array of validation errors. | {file: File, item: DapDSFileInputListItem, error: Error } , { errors: Error[] } |
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. | {files: File[] } |
| 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. |
No CSS custom properties available.
| 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. |
| Name | Description |
|---|---|
delete-button | The delete button. |
| 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 } |
| 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. |
| 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. |
| 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 |
| Name | Description |
|---|---|
delete-button | The delete button. |
| Event Name | Description | Type |
|---|---|---|
dds-file-click | Dispatched when a file is clicked. | {file: FileListElement } |
| Part Name | Description |
|---|---|
base | The main file input list container. |
| 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)) |
