DÁP Design System - File input webcomponent

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

Auto upload files

File input component can be set to auto 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
    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>
</>

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. 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 recepies"
  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.current?.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()
})

Importing

import { DapDSFileInput } from 'dap-design-system/dist/dds'

Importing React

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

Slots

No slots available.

Attributes

Property	Type	Default	Description
`subtle`	`boolean`		Font weight of the feedback label. Default is `false` which is bold.
`name`	`string`		The name of the file input.
`value`	`string`		The value of the file input.
`status`	`string`		The status of the file input. Can be 'success' or 'error'.
`path`	`string`		The server path for file uploads.
`autoupload`	`boolean`		Whether to upload files immediately upon selection.
`uploadProperty`	`string`	`'file'`	The name of the property to use when uploading files.
`uploadMethod`	`string`	`'POST'`	The HTTP method to use when uploading files.
`withCredentials`	`boolean`	`false`	Whether to send credentials with the file upload request.
`maxFiles`	`string`		The maximum number of files that can be uploaded.
`maxFileSize`	`string`		The maximum size of files that can be uploaded.
`size`	`string`		The size of the file input. Can be 'small', 'medium', or 'large'.
`label`	`string`		The label for the file input.
`description`	`string`		The description for the file input.
`feedback`	`string`		The feedback for the file input.
`feedbacktype`	`string`		The type of feedback for the file input. Can be 'error' or 'warning'.
`tooltip`	`string`		The tooltip for the file input.
`required`	`boolean`		Whether the file input is required.
`optional`	`boolean`		Whether the file input is optional.
`disabled`	`boolean`		Whether the file input is disabled.
`multiple`	`boolean`	`false`	Whether the file input accepts multiple files.
`accept`	`string`		The file types that the file input accepts.
`uploadUrl`	`string`		The URL to upload files to.
`keepValue`	`boolean`	`false`	Whether to keep the value of the file input when new files are selected.
`uploadButtonLabel`	`string`		The label for the upload button.

Events

Event Name	Description
`dds-upload-start`	Fired when a file upload starts.
`dds-upload-progress`	Fired during file upload progress.
`dds-upload-complete`	Fired when a file upload completes successfully.
`dds-upload-error`	Fired when a file upload encounters an error.
`dds-all-uploads-complete`	Fired when all file uploads are complete.
`dds-file-removed`	Fired when a file is removed from the file input.

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.