File Upload

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

File upload

Accepted file types: .yml, .yaml, .json, .md, .markdown, image/*

No file selected

File size must be less than 1MB.

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

Input file upload

No file selected

Dropzone file upload

Drag & drop a file

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

No file selected

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

label

String to be used as the label.

Upload file

No file selected

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

labelAttributes

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

Upload file

Accepted file types: .yml, .yaml, .json, .md, .markdown, image/*

No file selected

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

Upload file

No file selected

File size must be less than 1MB.

Upload file

File size must be less than 1MB.

Drag & drop a file

File size must be less than 1MB.

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

Upload file

No file selected

File size must be less than 1MB.

Upload file

File size must be less than 1MB.

Drag & drop a file

File size must be less than 1MB.

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

Select file on your computer

Select file on your computer

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

No file selected

Drag & drop a file

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

No file selected

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

Upload image

No file selected

Upload image

Drag & drop a file

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

Upload file

Id: 8576925e-d7e0-4ecd-8f14-15db1765e69a

No file selected

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

Upload file

Accepted file types: .yml, .yaml, .json, .md, .markdown, image/*

No file selected

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

Emitted value: null