Incorporating the "+ " icon in Vuejs Dropzone to indicate the presence of existing images

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

Answer №1

There doesn't appear to be an official method for accomplishing this task. However, based on a comment found here, I have adapted the code for use with vue2-dropzone. Here is how it can be implemented:

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for showcasing VueX items using information obtained from an API

I am currently exploring ways to display data using VueX with a free API from rapidapi. However, I am facing a problem where I am unable to properly display or iterate through the data in the component. Although the console shows the objects correctly, th ...

Retrieve various SVG file contents with a JavaScript/AJAX function

I am facing an issue with loading multiple SVG files asynchronously. I have created a function to accomplish this: function loadSVG(fileName){ var getSVG = new XMLHttpRequest(); getSVG.open('GET','assets/svg/'+fileName+'.svg&a ...

Out of the box, Next.js is equipped with a standard error message stating: "TypeError: Cannot read properties of null (reading 'useContext')"

After just setting up next.js for my upcoming website, I ran into some unexpected errors while trying to host it with "next". The specific error message I encountered was: TypeError: Cannot read properties of null (reading 'useContext') This iss ...

Looking to bookmark Java links or a similar task?

Apologies for the lackluster title, as I am not well-versed in programming language and struggle to articulate my specific request... Allow me to explain: I frequently need to visit a particular website to conduct research (details below). I attempted usi ...

"Utilizing Ramda's map function to integrate dynamic keys: A step-by-step guide

I am currently working with an array structured like this : array = ['2020-06-03', '2020-06-05', '2020-06-06'] My task is to transform it into the following format : Object { "2020-06-03": Object { "selec ...

The Videojs controls are unresponsive to clicks

Having a strange issue with videojs. I've been attempting to load videojs in the same way as outlined in the documentation, using a dynamic video tag. videojs(document.getElementById('myVideo'), { "controls": true, "autoplay": false, "prelo ...

Generate a series of rotations ranging from -60 to 60 using d3.cloud

I need help replicating the word cloud feature found on for my website. After studying examples and referencing a Stack Overflow answer, I put together the following code: var fill = d3.scale.category20(); var layout = d3.layout.cloud() .size([900, ...

`How can I manage my electron.js application effectively?`

As a newcomer to electron.js, I have successfully created a game using html, css, and javascript that currently runs offline on the client side. However, I am now looking for a way to access, analyze, and make changes to this app. One solution could be lo ...

What steps can be taken to resolve the "npm ERR! code ELIFECYCLE" error in a React application?

After attempting to start my React app with npm start, an error occurred : $ npm start > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f3b3d2a212b3c0f7f617e617f">[email protected]</a> start C:\Users&bso ...

Is AJAX causing issues with my media uploader and color picker?

Currently, I have incorporated tabbed navigation within a WordPress admin page and it is functioning properly on its own (data can be saved). However, I am now looking to implement some AJAX functionality for toggling between pages. The issue arises when t ...

retrieving the file directory from a folder with the help of ajax

I am having trouble retrieving a list of files from a specific URL that lists files inside a folder: https://i.sstatic.net/VH22b.png In order to obtain this list of files using JavaScript, I have written the following code: $.ajax({ url: &ap ...

Activation of navigation buttons in the Vue Full Calendar control the movement to the next and previous

In my current project, I am utilizing https://www.npmjs.com/package/vue-full-calendar. However, I have encountered an issue when trying to receive callbacks or triggers from the next and previous buttons on the calendar. My backend API is structured aroun ...

Discover the process of linking a JavaScript file to an HTML file in React

I am trying to render a React JS file that contains the following code: React.render( <TreeNode node={tree} />, document.getElementById("tree") ); I have included this file in an HTML document like so: <!doctype html> <html lang=" ...

Add option button

Is there a way to dynamically add radio buttons using jQuery or JavaScript and save the data into a database? I have successfully appended input types such as text, textarea, checkbox, and select with options. Here is my code: <!DOCTYPE html> < ...

Applying scoped styling in Vue.js renders the SCSS ineffective

My SCSS code works perfectly on a simple page where I apply background-color. However, when I make the file scoped, the SCSS doesn't seem to have any effect. It's important for me to keep this component scoped so that the background-color doesn&a ...

Dynamic Search Feature Using AJAX on Key Press

Currently, I have developed an AJAX search function that retrieves keyword values upon key up and triggers the script. The objective is to update the content area with results in alphabetical order as the user types each key. However, the issue I am facin ...

Dimming the background of my page as the Loader makes its grand entrance

Currently, I am in the process of developing a filtering system for my content. The setup involves displaying a loader in the center of the screen whenever a filter option is clicked, followed by sorting and displaying the results using JQuery. I have a v ...

A captivating opportunity for a web developer specializing in frontend design

Encountered an intriguing dilemma that has me stumped. There is a single stipulation: Only the json can be altered! I am struggling to meet this requirement: data.hasOwnProperty("\u{0030}") class JobHunter { get data() { return &ap ...

Solving Addition and Subtraction Errors in Javascript/Jquery

Upon running the script below, it aims to calculate the height of the browser, as well as the heights of both the header and footer, subtracting them from the initial browser height: var a = $(window).height(); alert (a); var b = $('#header').cs ...

Reasons for storing `https.get()` inside a request constant in Node.js

When using simple javascript, any content written to the console is displayed on the console itself. An example would be as follows: const name = "david"; This will display david in the console. However, in Node.js, if I store a request in a const varia ...