Dropzone

<k-dropzone>

• kirby/panel/src/components/Layout/Dropzone.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 dropzone component helps to simplify creating areas, where files can be dropped and uploaded or displayed. You simply wrap it around any other element to create the zone. The dropzone will also create a focus ring around the area when the user drags files over it.

Props

Prop	Type	Default	Description
disabled	boolean	false	You can deactivate the dropzone with this property

Events

Event	Description	Passes
drop	The drop event is triggered when files are being dropped into the dropzone.	array files The event receives the files list as argument, which can then be used to start an upload for example.

Slots

Slot	Description
default	Everything that should be covered by the dropzone

Example

<template>
  <k-dropzone @drop="upload">
    <k-empty icon="image">Drop some files here</k-empty>
    <k-upload ref="uploader" />
  </k-dropzone>
</template>

<script>
export default {
  methods: {
    drop(files) {
      // start the uploader
      this.$refs.uploader.drop(files);
    }
  }
};
</script>

CSS classes

.k-dropzone