Create a custom dropzone-cropper component from js to Vue

Hello!

I want to integrate this example https://codepen.io/rikschennink/pen/PXQNGp in my Vue project.

I don`t want to use JQuery or vue2-dropzone…etc.

I have installed those 2 libraries:

npm install dropzone
npm install cropperjs

and installs the latest version: dropzone 5.5.1 and cropperjs 1.5.6

I am using vue@2.6.10 with laravel 6 for my project.

After installed I added the css in app.scss

// cropperjs css
@import '~cropperjs/dist/cropper.min.css';

// dropzone css
@import '~dropzone/dist/min/dropzone.min.css';

and created a component to integrate the example above.

<template>
    <div class="dropzone" id="myDropzone"></div>
</template>

<script>
    import 'dropzone/dist/min/dropzone.min.js';
    import 'cropperjs/dist/cropper.min.js';
    export default {
        name: "DropzoneCropper",
        methods: {
            init() {
                // example code 
            }
        },
        mounted() {
            this.init();
        }
    }
</script>

<style scoped>
</style>

The problem is when I load this component:

[Vue warn]: Error in mounted hook: "ReferenceError: Dropzone is not defined"

Anyone please guide me to the correct path ? :slight_smile:

When you import a module you don’t want to import the built distribution. Instead, you want to import the module like so: import Dropzone from 'dropzone'

So…when importing a module I should not import the min js file (the dist), am I right ?

I didn`t know…I thought that

import 'dropzone/dist/min/dropzone.min.js';

would load the min js file.

After importing the right way:

import Dropzone from 'dropzone';
import Cropper from 'cropperjs';

its not loading the dropzone. It gives me no errors...it only show me the border box and thats it.

What am I missing ???

Anyone ? :slightly_smiling_face: