File input webcomponent - 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()
})

Importing

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

Importing React

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

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.
`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).
`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.	`{file: File, item: DapDSFileInputListItem, error: 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[] }`

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.

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`	`FeedbackType`		Feedback type.
`loading`	`boolean`	`false`	Loading state of the file input list item.
`showDeleteButton`	`string`	`'true'`	Show delete button.
`showSize`	`boolean`	`false`	Show file size.
`fileData`	`FileListElement`
`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.

Slots

No slots available.

Events

Event Name	Description	Type
`dds-file-remove`	Dispatched when a file is removed from the list.	`{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.

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`	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.
`showDeleteButton`	`string`	`'true'`	Whether to show the delete button in the file input list item.

Slots

No slots available.

Events

No custom events available.

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))