Skip to content
On this page

File Upload

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

Additional files can be uploaded from HomePage.

No file selected
html
<KFileUpload
  label="Upload File"
  :label-attributes="{ help: 'Accepted file types: .yml, .yaml, .json, .md, .markdown, image/*' }"
  :accept="['.yml', '.yaml', '.json', '.md', '.markdown', 'image/*']"
/>
1
2
3
4
5

Props

type

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

Additional files can be uploaded from HomePage.

No file selected
html
<KFileUpload
  label="Upload File"
  help="Additional files can be uploaded from HomePage."
/>
1
2
3
4
Upload new image (Max 4 MB)
html
<KFileUpload type="image"
  label="Upload File"
  icon="image"
  :accept="['image/*']"
  placeholder="Upload new image (Max 4 MB)"
/>
1
2
3
4
5
6

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.

No file selected
html
<KFileUpload
  label="Upload File"
  :label-attributes="{ help: 'Accepted file types: .yml, .yaml, .json, .md, .markdown, image/*' }"
/>
1
2
3
4
Upload new image (Max 1 MB)
html
<KFileUpload
  type="image"
  label="Upload Image file"
  :label-attributes="{ help: 'Accepted file types: image/*' }"
  icon="image"
  placeholder="Upload new image (Max 1 MB)"
/>
1
2
3
4
5
6
7

help

Use the help prop to display text under KInput.

Some text here..

No file selected
html
<KFileUpload label="Upload File" help="Some text here.." />
1

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.

Please select any file to display the error state.

No file selected
html
<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/*']"
/>
1
2
3
4
5
6
7
8

placeholder

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

Kong You can change the text here!
html
<KFileUpload
  type="image"
  label="Upload File"
  placeholder="You can change the text here!"
  icon="kong"
/>
1
2
3
4
5
6

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.

No file selected
html
<KFileUpload
  :removable="false"
  label="Upload File"
  :label-attributes="{ help: 'Accepted file types: .yml, .yaml, .json, .md, .markdown, image/*' }"
  buttonAppearance="creation"
/>
1
2
3
4
5
6
Kong No cancel button!
html
<KFileUpload
  type="image"
  :removable="false"
  label="Upload File"
  placeholder="No cancel button!"
  icon="kong"
/>
1
2
3
4
5
6
7

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.

No file selected
html
<KFileUpload label="Upload File" buttonAppearance="creation" />
1

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.

No file selected
html
<KFileUpload label="Upload File" buttonAppearance="danger" buttonText="Click me" />
1

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

iconColor

The color of the icon being displayed.

Immunity Customized icon, iconColor & iconSize!
html
<KFileUpload
  type="image" icon="immunity" iconColor="gold" iconSize="30"
  placeholder="You can change the text here!"
/>
1
2
3
4

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)
No file selected
html
<KFileUpload
  label="Upload File"
  @file-added="file => printData(file)"
  @file-removed="() => fileData = ''"
/>
1
2
3
4
5
Emitted value:

Released under the Apache-2.0 License.