A Vue directive with two-way binding for Dropzone

Posted 4 years ago - updated 4 years ago vuejs dropzone

Note var that = this; as this in the Dropzone.on callback won't be the vuejs instance.

<button v-dropzone="user.profile_image" class="user-essentials-avatar-edit-button">Edit</button>

<script type="text/javascript">

        Vue.directive("dropzone", {

                twoWay: true,

                bind: function () {

                        var that = this;

                        Dropzone.options.myAwesomeDropzone = false;
                        Dropzone.autoDiscover = false;

                        myDropzone = new Dropzone(this.el, {
                                url: "/uploadimage",
                        });

                        myDropzone.on("success", function (file, response) {
                                response = JSON.parse(response);
                                that.set(response.filelink);
                        });
                }
         });

</script>