File Upload

KFileUpload provides a wrapper around an input element with type=file for file upload.

<KFileUpload
  label="Upload File"
  :label-attributes="{ info: 'Accepted file types: .yml, .yaml, .json, .md, .markdown, image/*' }"
  :accept="acceptedFileType"
/>

Props

accept

Please refer to mdn web docs that defines the file types the component can accept.

<KFileUpload :accept="['.jpg', '.png']" />

label

String to be used as the label.

<KFileUpload label="Upload file" :accept="acceptedFileType" />

labelAttributes

Use the labelAttributes prop to configure the KLabel's props if using the label prop.

<KFileUpload
  label="Upload file"
  :label-attributes="{ info: 'Accepted file types: .yml, .yaml, .json, .md, .markdown, image/*' }"
/>

help

Use the help prop to display text under the input.

<KFileUpload label="Upload File" help="File size must be less than 1MB." :accept="acceptedFileType" />

error

Boolean value to indicate whether the element has an error and should apply error styling. By default this is false.

errorMessage

String to be displayed as error message if hasError prop is true.

<KFileUpload
  label="Upload file"
  error
  error-message="File size must be less than 1MB."
  :accept="acceptedFileType"
/>

placeholder

Use the placeholder prop to display placeholder text.

<KFileUpload placeholder="Select file on your computer" :accept="acceptedFileType" />

buttonText

This is the text that will be displayed on the button that triggers the click on KInput.

<KFileUpload button-text="Choose file" :accept="acceptedFileType" />

maxFileSize

Use this prop to customize the maximize size of file that can be uploaded. Default value for image upload is 1MB and for file is 5.25MB.

<KFileUpload :max-file-size="2" :accept="acceptedFileType" />

NOTE

By default KFileUpload will display the error state with a generic error message when selected file exceeds specified maximum file size. You can use errorMessage prop in conjunction with the error event to display a custom error message.

Slots

icon

Slot for an icon in front of the input field.

<KFileUpload label="Upload image" :accept="['.jpg', '.png']">
  <template #icon>
    <ImageIcon />
  </template>
</KFileUpload>

label-tooltip

Use this slot if you want to utilize HTML in the input label's tooltip.

<KFileUpload label="Upload file" :accept="acceptedFileType">
  <template #label-tooltip>Id: <code>8576925e-d7e0-4ecd-8f14-15db1765e69a</code></template>
</KFileUpload>

Events

The events below will fire whenever:

• file-added: a file is added
• file-removed: a file is removed
• error: the uploaded file size is greater than maxFileSize prop

All of the above 3 events will emit a JavaScript Array of type FileList. This FileList object provides the File object that has following read-only properties:

• lastModified (returns the last modified time of the file, in millisecond since the UNIX epoch)
• lastModifiedDate (returns the last modified Date of the file referenced by the File object)
• name (returns the name of the file referenced by the File object)
• size (returns the size of the file in bytes)
• type (returns the MIME type of the file)
• webkitRelativePath (returns the path the URL of the File is relative to)

<KFileUpload
  label="Upload file"
  @file-added="file => printData(file)"
  @file-removed="() => fileData = ''"
/>

Emitted value: null