Skip to content

Kirby 3.9.8

Dropzone

<k-dropzone>

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