Looking to enhance my Vue-dropzone file uploader component by adding an icon or button labeled "Add more images" when there are already images present in the dropzone. This will help users understand that they can upload multiple photos. Any suggestions on how I can do this? Check out my code snippet and desired outcome screenshot below:
Update: Still working on implementing this feature, any assistance is greatly appreciated.
Update2: Still struggling with this task, would anyone be willing to provide guidance?
<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
}
};
Desired Outcome: https://i.sstatic.net/PRJQF.png