How do you use the Dropzone, what is el-overlay?
assembledadam opened this issue · 2 comments
Confused by the readme. In the readme, you have an example for using the dropzone.
<el-overlay v-show="$upload.meta('product-gallery').dropzoneActive">
Drop files anywhere here to begin upload.
</el-overlay>
What is el-overlay? It doesn't refer to anything in the library or any third party libs.
Also:
Set the dropzone container which will automatically create the dropzone.
Do you set it to the DOM ID of the element? i.e. <div id="product-gallery-dropzone">
?
I ask because even your 'Multiple File (With Dropzone)' example here sets the dropzone ID to 'product-gallery-dropzone'. but there is no mention of that ID anywhere in the example code:
<div>
<button v-on:click="$upload.select('product-gallery')" :disabled="$upload.meta('product-gallery').status === 'sending'">
<span v-show="$upload.meta('product-gallery').status === 'sending'">Uploading...</span>
<span v-show="!$upload.meta('product-gallery').status === 'sending'">Select Photos</span>
</button>
<button v-on:click="$upload.reset('product-gallery')" :disabled="$upload.meta('product-gallery').status === 'sending'">
Clear
</button>
</div>
...
mounted() {
this.$upload.reset('product-gallery', {
url: 'products/' + this.product.id + '/gallery',
currentFiles: this.product.gallery.length,
dropzoneId: 'product-gallery-dropzone',
});
},
...
Thanks.
Answered my own question regarding the Dropzone here by just code diving and got things working (worth it, this lib is considerably lighter than Dropzone).
I might create a few minor adjustments to the readme in a PR to make it a little clearer. I haven't tried your example, but I'm not convinced it will work (with the dropzone) for the aforementioned reason.
Cool, thanks.
Ya, the el-overlay is just some copy and paste. I've changed it to a div now.