Is it possible to set a customized drop area in stead of the whole window? And multiple vue-upload-components with drop=true.

[komushi]

Hello,

When using drop=true I would like to restrict the droppable area by following of its parent component(if this is possible I would like to create multiple vue-upload-components). Currently the whole window will be able to drop files.

Like the component code below I would like the area of width in 100% and height in 100px.

<template>
  <div id="library" style="position: relative; user-select: none; width: 100%; height: 100px;">
    <div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active">
        <h3>Drop files to library</h3>
    </div>
    <vue-upload-component
      :multiple="false"
      :drop="true"
      :drop-directory="false"
      v-model="files"
      ref="upload">
    </vue-upload-component>

  </div>
</template>

<script>
import VueUploadComponent from 'vue-upload-component'

export default {
  name: 'MyLibrary',
  data() {
    return {
    }
  },
  props: {
  },  
  components: {
      VueUploadComponent
  },
  methods: {
  }
}

</script>

<style>
  #library .drop-active {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999;
    opacity: .8;
    text-align: center;
    background: #000;
  }

  #library .drop-active h3 {
    margin: -.5em 0 0;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 40px;
    color: #fff;
    padding: 0;
  }
</style>

[nikitaplanet]

I have the same question! Do you find the solution ?

[artilishes]

The :drop property also takes strings and refs. You can do...

drop=".drop-area"

or

:drop="$refs.dropArea"