I am currently utilizing nuxt-dropzone https://www.npmjs.com/package/nuxt-dropzone for image uploads. My goal is to also utilize it as an image library where users can view their uploaded images in a similar fashion. As there isn't much documentation available for nuxt-dropzone, I am curious about how to preload the images into the dropzone.
Below is the code snippet:
<template>
<v-card style="border-radius: 0; box-shadow: none" class="px-10">
<v-row justify="center">
<div class="pt-8" style="width: 1050px">
<v-tabs
:centered="false"
:hide-slider="true"
:fixed-tabs="false"
class="hls-tabs py-1"
height="100%"
>
<v-tab
:ripple="false"
class="hls-tab background py-3 tabs-0"
active-class="primary tab-active"
>
<div class="background px-1 tab-container">
<p class="tab-content py-4 subheading">Upload Image</p>
</div>
</v-tab>
<v-tab
:ripple="false"
class="hls-tab background py-3 tabs-1"
active-class="primary tab-active"
>
<div class="background px-1 tab-container">
<p class="tab-content py-4 subheading">Image Library</p>
</div>
</v-tab>
<v-tab-item class="tab-item tab-item-0">
<div class="tab-item-content px-15 py-15" 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)" class="pb-5"
>mdi-file-upload-outline</v-icon
>
<h3 style="color: rgb(111, 118, 167)" class="pb-5">
To Upload Media, drag files here
</h3>
<h3 style="color: rgb(111, 118, 167)" class="pb-5">OR</h3>
<h3 style="color: rgb(111, 118, 167)">click to select file</h3>
</dropzone>
</div>
</v-tab-item>
<v-tab-item class="tab-item tab-item-0">
<div class="tab-item-content" style="min-height: 400px">
<dropzone
id="imageLibrary"
ref="imageLibrary"
:destroy-dropzone="true"
:options="libraryOptions"
>
<div
v-for="image in testImages"
:key="image.dataURL"
class="dropzone-previews dropzone"
>
<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 have attempted to use the "instance" to emit during loading, but I consistently encounter an error indicating that the property of dropzone cannot be read.
mounted() {
const instance = this.$refs.imageLibrary.dropzone;
for (const image of this.testImages) {
const mockFile = { name: image, size: 12345 };
instance.emit('addedFile', mockFile);
}
},