[Vuejs]-How to pre-load images into nuxt-dropzone

by

0👍

Use dropzone.js manuallyAddFile() function, with nextTick to render uploaded pictures correctly

mounted(){
      this.$nextTick(() => {
          for(const image of this.testImages){
            let url = `${imageLink}`;
            let file = { size: 123, name: image, type: "image/png" };
            this.$refs.myVueDropzone1.manuallyAddFile(file, url); 
         }
      });       

}

0👍

Okay so what was happening was because the dropzones are in a drawer, they were being loaded as soon as the page loads. The refs were only being recognized when the dropzone was actually displayed on the screen. When I did a ‘window.setTimeout’, the refs worked. So the way I solved it was to put the second dropzone in its own component.

The second component then looked like this:

<template>
  <div class="tab-item-content" style="min-height: 400px">
    <dropzone
      id="imageLibrary"
      ref="imageLibrary"
      :destroy-dropzone="true"
      :options="libraryOptions"
    >
    </dropzone>
  </div>
</template>

<script>
import dropzone from 'nuxt-dropzone';
import 'nuxt-dropzone/dropzone.css';
import defaultImage from '~/assets/empty_photo.png';
import second from '~/assets/google_mic.png';
export default {
  name: 'ImageLibrary',
  components: { dropzone },
  data() {
    return {
      testImages: [defaultImage, second],
      libraryOptions: {
        url: 'https://httpbin.org/post'
      }
    };
  },
  mounted() {
    for (const image of this.testImages) {
      console.log('image', image);
      const url = `${image}`;
      const file = { size: 123, name: `${image}`, type: 'image/png' };
      this.$refs.imageLibrary.manuallyAddFile(file, url);
    }
  }
};
</script>

Leave a comment