Reference

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.

<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: window.panel.api + "/my-plugin/upload"
      });
    }
  }
};
</script>

Props

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

accept

String (default: *)

attributes

Object (default: null)

max

Number (default: null)

multiple

Boolean (default: true)

url

String (default: null)

Methods

drop(files, 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(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.

<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: window.panel.api + "/my-plugin/upload",
        accept: "image/*",
        multiple: false
      });
    }
  }
};
</script>

Events

@success

Fired when all files have been uploaded successfully.

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

@error

Fired when something went wrong.

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

<script>
export default {
  methods: {
    onSuccess() {
      alert("All files have been uploaded!");
    },
    onError() {
      alert("The files could not be uploaded");
    }
  }
}
</script>