Q: Vuejs Dropzone - How to include "+" icon when there are already some images in the dropzone I've just used Vue-dropzone to create a simple file uploader component. However, I would like to customise it by including an icon or a button called "Add more images" when there are already some images in the dropzone so that user can understand that they can upload multiple photos. How can I achieve this? Below are my code and a screenshot of what I want to achieve
Update I am still trying to implement this feature, any help will be greatly appreciated
Update2  I am still stuck with this, is anyone nice enough to guide me through?
   <template>
  <vue-dropzone
    id="drop1"
    :options="dropOptions"
    :useCustomSlot="true"
    @vdropzone-complete="afterComplete"
  >
    <div class="dropzone-custom-content">
      <i class="fas fa-cloud-upload-alt fa-3x"></i>
      <h4 class="dropzone-custom-title mb-0 mt-3">Drag & Drop</h4>
      <div class="subtitle">or click to add your image</div>
    </div>
  </vue-dropzone>
</template>


import vueDropzone from "vue2-dropzone";

export default {
  data() {
    return {     
      dropOptions: {   
        url: "https://httpbin.org/post",
        acceptedFiles: "image/*",
        addRemoveLinks: true,
        thumbnailWidth: 160, // px
        thumbnailHeight: 160
      }       
    };
  },
  components: {
    vueDropzone
  }
};

What I would like to achieve


A: It seems there is no official way to do this. But from this comment I modify his code to use with vue2-dropzone like below:
<template>
  <div>
    <vue-dropzone id='dropzone'
      ref='myVueDropzone'
      :options='dropzoneOptions'
      @vdropzone-file-added='handleMoreThumbnail'
      @vdropzone-removed-file='handleMoreThumbnail'>
    </vue-dropzone>
    <div class='more' ref='more'>+</div>
  </div>
</template>

<script>
  import vueDropzone from 'vue2-dropzone'
  import 'vue2-dropzone/dist/vue2Dropzone.min.css'

  export default {
    components: {
      vueDropzone
    },

    data () {
      return {
        dropzoneOptions: {
          url: 'https://httpbin.org/post',
          addRemoveLinks: true
        }
      }
    },

    mounted () {
      this.$el.removeChild(this.$refs.more)
    },

    methods: {
      handleMoreThumbnail () {
        let dropzone = this.$refs.myVueDropzone.dropzone
        dropzone.files.length > 0
          ? dropzone.element.appendChild(this.$refs.more)
          : dropzone.element.removeChild(this.$refs.more)
      }
    }
  }
</script>

<style>
  .more {
    display: inline-block;
    margin: 16px;
    border: 3px dashed lightgray;
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    color: lightgray;
    border-radius: 8px;
    font-size: 60px;
    text-align: center;
    line-height: 200px;
    pointer-events: none;
  }
</style>

