Skip to content

Kirby 3.9.8

Upload

<k-upload>

This UI component hasn't been finalized yet. The functionality and syntax aren't stable and might be redone in an upcoming release. Only use it at your own risk - breaking changes are likely to occur.

The Upload component is a combination of a native file input and a dialog. The native file input is invisible and only serves to open the file selector from the OS. Once files are selected the dialog will open and show the progress and potential upload errors.

Props

Prop Type Default Description
accept
string
"*"
attributes
object
max
number
method
string
"POST"
multiple
boolean
true
url
string

Methods

Method Parameters Description
drop
  • array files
  • object params
Instead of opening the file picker first
you can also start the uploader directly,
by "dropping" a FileList from a drop event
for example.
open
  • object params
Opens the uploader with the object of given parameters.
For all available parameters, check out the component props.
If no additional parameters are passed, the properties from
the upload element are used.

Events

Event Description Passes
error
success
  • undefined



You can use component props to set default params, which will always be used when the open or drop methods are called.

Example

<template>
  <div>
    <k-upload ref="upload" />
    <k-button icon="upload" @click="upload">Upload</k-button>
  </div>
</template>

<script>
export default {
  methods: {
    upload() {
      this.$refs.upload.open({
        url: this.$urls.api + "/my-plugin/upload",
        accept: "image/*",
        multiple: false
      });
    }
  }
};
</script>

The API response is returned as second argument in the @success event:

<template>
  <k-upload @success="onSuccess" />
</template>

<script>
export default {
  methods: {
    onSuccess (uploads, response) {
      // i.e.
      response[0].type;
      response[0].filename;
      response[0].niceSize;
      // etc.
    }
  }
}
</script>

CSS classes

.k-upload