I'm currently working on a project that involves using both the vue-js-modal plugin by euvl and dropzone.js for handling multiple file uploads.
My goal is to integrate both libraries so that users can open a modal window and upload files. However, I've encountered an issue where the dropzone.js library seems to not be properly initialized. The modal opens up, but the dropzone container fails to allow photo uploads.
Despite checking the console for errors, I haven't been able to pinpoint the root cause of the problem. Neither the file upload window appears nor can files be dragged and dropped into the container.
Below is a snippet of my Vue component code:
<template>
<modal name="upload-files-modal" classes="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>
In my Laravel blade file, here is how I implement the Vue component:
<upload-files-modal uploadurl="{{ $project->path() . '/photos' }}" ></upload-files-modal>
<a href="" @click.prevent=$modal.show('upload-files-modal')>Upload Photo</a>