File Upload ​

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

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

Props ​

type ​

KFileUpload has two supported types: file (default) and image.

<KFileUpload
  label="Upload File"
  help="Additional files can be uploaded from HomePage."
/>

<KFileUpload type="image"
  label="Upload File"
  icon="image"
  :accept="['image/*']"
  placeholder="Upload new image (Max 4 MB)"
/>

label ​

String to be used as the KFileUpload label.

labelAttributes ​

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

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

<KFileUpload
  type="image"
  label="Upload Image file"
  :label-attributes="{ help: 'Accepted file types: image/*' }"
  icon="image"
  placeholder="Upload new image (Max 1 MB)"
/>

help ​

Use the help prop to display text under KInput.

<KFileUpload label="Upload File" help="Some text here.." />

hasError ​

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.

Note: For below example, maxFileSize prop has been set to 0 to display the error state.

<KFileUpload
  label="Upload File"
  :maxFileSize="0"
  help="Please select any file to display the error state."
  hasError
  errorMessage="File size should be less than 1MB."
  :accept="['.yml', '.yaml', '.json', '.md', '.markdown', 'image/*']"
/>

placeholder ​

Use the placeholder prop to display placeholder text. The placeholder text is blue to indicate the field is clickable.

<KFileUpload
  type="image"
  label="Upload File"
  placeholder="You can change the text here!"
  icon="kong"
/>

removable ​

A cancel button can be displayed, by default this is set to true. This button is only visible once a file has been added.

<KFileUpload
  :removable="false"
  label="Upload File"
  :label-attributes="{ help: 'Accepted file types: .yml, .yaml, .json, .md, .markdown, image/*' }"
  buttonAppearance="creation"
/>

<KFileUpload
  type="image"
  :removable="false"
  label="Upload File"
  placeholder="No cancel button!"
  icon="kong"
/>

accept ​

Please refer to mdn web docs that defines the file types the file input should accept.

buttonAppearance ​

Use this prop to customize the trigger KButton appearance. This button only shows when prop type is file. Default vaue is set to primary.

<KFileUpload label="Upload File" buttonAppearance="creation" />

buttonText ​

This is the text that will be displayed on the button that triggers the click on KInput. Button text can only be changed when prop type is file.

<KFileUpload label="Upload File" buttonAppearance="danger" buttonText="Click me" />

icon ​

Specify an icon to display to the left of the placeholder text if prop type is image.

iconSize ​

The size of the icon being displayed (default is 24px).

iconColor ​

The color of the icon being displayed.

<KFileUpload
  type="image" icon="immunity" iconColor="gold" iconSize="30px"
  placeholder="You can change the text here!"
/>

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.

Events ​

The events below will fire whenever:

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

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 = ''"
/>