Dropzone.js not showing in vue-js-modal

Question

In a project, I am using the vue-js-modal plugin by euvl and dropzone.js for multiple file uploads.

I know want to combine both libraries and let the user open a modal and upload files. Unfortunately, it looks like the dropzone.js library is not initialized properly, the modal pops up, but I can't upload photos through the dropzone container.

Unfortunately, I don't get an error on the console, but the file upload window doesn't open and drag and drop of files is also not possible.

This is my vue component file:

<template>
<modal name="upload-files-modal" classses="p-4 bg-card rounded-lg" height="auto">
        <div class="card mt-3">
        <h3 class="font-normal text-xl py-4 -ml-5 mb-3 border-l-4 border-blue-light pl-4">
           Upload some pictures
        </h3>
            <form id="newForm" method="POST" action="" class="dropzone" >
            </form>
        </div>
</modal>
</template>

<script>
import Dropzone from 'dropzone'
import 'dropzone/dist/dropzone.css'

Dropzone.autoDiscover = false;
Dropzone.options.newForm = {
        paramName: 'photo',
        maxFilesize: 3,
        acceptedFiles: '.jpg, .jpeg, .png .bmp',
        init: function () {
        // Set up any event handlers
        this.on('queuecomplete', function (file) {
                location.reload();
        });
    }
}

export default {
    props: ['uploadurl']
}
</script>

This is how I use the vue component in my laravel blade file:

<upload-files-modal uploadurl="{{ $project->path() . '/photos' }}" ></upload-files-modal>

<a href="" @click.prevent=$modal.show('upload-files-modal')>Upload Photo</a>

Answer 1

I think you should initialize Dropzone after modal opens up.

Example

 Dropzone.autoDiscover = false; const VModal = window["vue-js-modal"].default; Vue.use(VModal) const dropForm = Vue.component('drop-form', { template: `<div class="content"> <modal name="modal" @opened="afterOpen"> <div ref="dropZoneRef" class="dropzone"></div> </modal> <button @click="showModal()">Upload files</button></div>`, methods: { showModal() { this.$modal.show('modal') }, afterOpen() { const dropZone = new Dropzone(this.$refs.dropZoneRef, { url: "/file/post" }); } }, mounted() { } }); new Vue({ el: '#root', template: `<drop-form></drop-form>` })

 .content { padding: 1rem; border: 1px solid black; height: 200px; } #dropZone { height: 100px }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/basic.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/dropzone.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/dropzone.js"></script> <script src="https://unpkg.com/vue-js-modal@2.0.0-rc.3/dist/index.js"></script> <div id="root"></div>