websanova/vue-upload

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.