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

appearance

KFileUpload comes in two variations: input and dropzone. Default value is input. Both appearances support drag-and-drop file upload functionality.

<KFileUpload
  label="Input file upload"
  :accept="acceptedFileType"
/>

<KFileUpload
  appearance="dropzone"
  label="Dropzone file upload"
  :accept="acceptedFileType"
/>

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
  help="File size must be less than 1MB."
  label="Upload File"
  :accept="acceptedFileType"
/>

<KFileUpload
  help="File size must be less than 1MB."
  appearance="dropzone"
  label="Upload file"
  :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
  error-message="File size must be less than 1MB."
  error
  label="Upload file"
  :accept="acceptedFileType"
/>

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

placeholder

Use the placeholder prop to display placeholder text.

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

<KFileUpload
  placeholder="Select file on your computer"
  appearance="dropzone"
  :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"
/>

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

maxFileSize

Use this prop to customize the maximize size of file that can be uploaded. Default value is 5MB if no valid value is provided.

<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

label

Provide slotted content for the file upload label. This slot takes precedence over the label prop if both are provided.

<KFileUpload :accept="acceptedFileType">
  <template #label>Slotted <code>label</code></template>
</KFileUpload>

icon

Slot for an icon in front of the input field.

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

<KFileUpload
  appearance="dropzone"
  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>

dropzone-footer

Slot for additional content at the bottom of the the dropzone area. Only available when appearance prop is set to dropzone.

Upload your markdown document

Drag & drop a file

We will validate your markdown. Learn more

<KFileUpload
  appearance="dropzone"
  label="Upload your markdown document"
  :accept="acceptedFileType"
>
  <template #dropzone-footer>
    <KAlert>
      We will validate your markdown.
      <KExternalLink href="https://kongponents.konghq.com/">Learn more</KExternalLink>
    </KAlert>
  </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

The file-added and error events emit a FileList object. This FileList contains File objects with the 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