I'm working with nuxt-dropzone https://www.npmjs.com/package/nuxt-dropzone to upload images. I would also like to use it as an image library, so users can view their images in the same way they uploaded them. I'm not finding a lot of documentation on nuxt-dropzone, so I'm wondering how to pre-load the images into the dropzone.

Here's my code:

<template>
  <v-card style="border-radius: 0; box-shadow: none" >
    <v-row justify="center">
      <div  style="width: 1050px">
        <v-tabs
          :centered="false"
          :hide-slider="true"
          :fixed-tabs="false"
          
          height="100%"
        >
          <v-tab
            :ripple="false"
            
            active-
          >
            <div >
              <p >Upload Image</p>
            </div>
          </v-tab>
          <v-tab
            :ripple="false"
            
            active-
          >
            <div >
              <p >Image Library</p>
            </div>
          </v-tab>
          <v-tab-item >
            <div  style="min-height: 400px">
              <dropzone
                id="imageUpload"
                ref="imageUpload"
                v-model="testImages"
                :options="options"
                :destroy-dropzone="true"
                :style="
                  isUploaded
                    ? 'border: 0; border-radius: 25px'
                    : 'border: 4px dashed rgb(111, 118, 167); border-radius: 25px'
                "
                @vdropzone-file-added="onFileAdded"
                @vdropzone-removed-file="onFileRemove"
              >
                <v-icon size="60" color="rgb(176, 173, 173)" 
                  >mdi-file-upload-outline</v-icon
                >
                <h3 style="color: rgb(111, 118, 167)" >
                  To Upload Media, drag files here
                </h3>
                <h3 style="color: rgb(111, 118, 167)" >OR</h3>
                <h3 style="color: rgb(111, 118, 167)">click to select file</h3>
              </dropzone>
            </div>
          </v-tab-item>
          <v-tab-item >
            <div  style="min-height: 400px">
              <dropzone
                id="imageLibrary"
                ref="imageLibrary"
                :destroy-dropzone="true"
                :options="libraryOptions"
              >
                <div
                  v-for="image in testImages"
                  :key="image.dataURL"
                  
                >
                  <img :src="image.dataUrl" :height="200" :width="200" />
                </div>
              </dropzone>
        </v-tabs>
      </div>
    </v-row>
  </v-card>
</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: 'ImageUploadDialog',
  components: { dropzone },
  data() {
    return {
      images: [],
      youtubeUrl: '',
      isUploaded: false,
      testImages: [defaultImage, second],
      options: {
        url: 'https://httpbin.org/post',
        addRemoveLinks: true
      },
 libraryOptions: {
        url: 'https://httpbin.org/post'
      }
    };
  },
  methods: {
    handleClose() {
      this.$nuxt.$emit('close-image-upload');
    },
    handleSave() {
      for (const file of this.$refs.imageUpload.dropzone.files) {
        this.images.push(file);
      }

      const lastIndex = this.youtubeUrl.lastIndexOf('/');
      const youtubeIdentifier = this.youtubeUrl.slice(lastIndex   1);
    },
    onFileAdded() {
      this.isUploaded = true;
    },
    onFileRemove() {
      if (this.$refs.imageUpload.dropzone.files.length === 0) {
        this.isUploaded = false;
      }
    }
  }
};
</script>

I've tried to use the "instance" to emit on load, but I keep getting an error that it cannot read the property of dropzone.

  mounted() {
    const instance = this.$refs.imageLibrary.dropzone;
    for (const image of this.testImages) {
      const mockFile = { name: image, size: 12345 };
      instance.emit('addedFile', mockFile);
    }
  },

CodePudding user response：

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); 
         }
      });       

}

CodePudding user response：

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