How to fix Error: Dropzone already attached?

Question

When I successfully upload an image, I want to run editDataImage() to retrieve the data that is on the server. But when I will display image data in the dropzone , I get an error. Please help me!

Function Get Data Image

            editDataImage(uuid){
                var app = this;
                app.$http({
                    url: app.api_url+'/gambarpengambilcontoh/'+uuid,
                    method: 'GET',
                }).then((response)=>{
                    var app = this;
                    app.imageList = response.data.data;
                    app.editGambar();
                });
            },

Function Dropzone

            editGambar(){
                var app = this;
                Dropzone.autoDiscover = false;
                $("#edit_image").dropzone({
                    url: app.api_url+'/gambarpengambilcontoh/tambah',
                    paramName: 'gambar_ambil_contoh',
                    headers: {
                        'Authorization': 'Bearer '+localStorage.getItem('authToken'),
                        'Accept': 'Application/json',
                    },
                    maxFiles: 10,
                    maxFilesize: 10,
                    addRemoveLinks: true,
                    init: function() {
                        var myDropzone = this;
                        if (app.imageList) {
                            for (var i = 0; i < app.imageList.length; i++) {
                                var mockFile = {
                                    name: app.imageList[i].gambar_ambil_contoh,
                                    status: Dropzone.ADDED,
                                    url: app.base_url+'/assets/gambarAmbil/'+app.imageList[i].gambar_ambil_contoh,
                                };
                                myDropzone.files.push(mockFile);
                                myDropzone.emit("addedfile", mockFile);
                                myDropzone.emit("thumbnail", mockFile, app.base_url+'/assets/gambarAmbil/'+app.imageList[i].gambar_ambil_contoh);
                                myDropzone.emit("processing", mockFile);
                                myDropzone.emit("success", mockFile);
                                myDropzone.emit("complete", mockFile);
                                $('.dz-image').last().find('img').attr({width: '120px', height: '120px'});
                            }
                        }

                        this.on("removedfile", function(file){
                            $.ajax({
                                headers: {
                                    'Authorization': 'Bearer '+localStorage.getItem('authToken'),
                                    'Accept': 'Application/json',
                                },
                                url: app.api_url+'/gambarpengambilcontoh/delete',
                                type: 'DELETE',
                                data: {'gambar_ambil_contoh': file.name}
                            })
                        });

                        this.on('sending', function(file, xhr, formData) {
                            formData.append('pengambil_contoh_id', app.formData.id);
                        });

                        this.on("success", function(file) {
                            app.editDataImage(app.formData.uuid); // call back function Get Data Image
                        });

                    }
                })
            },

Error

Error: Dropzone already attached.

Sorry, if my question is a little confusing!

Answer 1

Move your Dropzone.autoDiscover = false; outside of editGambar() function

//Dropzone Configuration
Dropzone.autoDiscover = false;