Upload

<k-upload>

kirby/panel/src/components/Forms/Upload.vue

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