Dropzone.js already attached

Question

I've implemented dropzone in to my project all is working great. except the browser decides to throw an error whenever the page is request for clarity I have trimmed the view down as its quite long, but the below HTML currently lives inside a form (not sure if that would cause an issue anyway) I only have the one reference to dropzone which is shown here, the dropzone.js is included inside the bundle config again only one occurrence.

Error : if(this.element.dropzone)throw new Error("Dropzone already attached.")

This is my view

<div class="form-group">
    <div class="col-xs-12 dropzone" id="UploadImage">
         <input type="file" id="id-input-file-2" />
     </div>
</div>

This is how I create dropzone

 $(document).ready(function () {

        $("div#UploadImage").dropzone({ url: '@Url.Action("SaveUploadedFile", "Person")' });
 });

and my controller which is as follows

 public ActionResult SaveUploadedFile()
    {
        bool success = true;

        string fName = string.Empty;

        try
        {
            foreach (var file in Request.Files.Cast<string>().Select(fileName => Request.Files[fileName]).Where(file => file != null))
            {
                fName = file.FileName;

                if (file.ContentLength > 0)
                {
                   // will write the rest of the code here
                }
            }
        }
        catch (Exception ex)
        {
            success = false;
        }

        return Json(success ? new { Message = fName } : new { Message = "Error in saving file" });
    }

now I'm able to retrieve the images within the controller just uncertain on where in the code the dropzone is being initialized again which is resulting in the above error.

UPDATE

After trying Daves suggestion my jquery now looks like this

$(document).ready(function () {

        Dropzone.options.myAwesomeDropzone = false;

        $("div#UploadImage").dropzone({
            url: '@Url.Action("SaveUploadedFile", "Person")',
            addRemoveLinks: true,
            removedfile: function (file) {
                var name = file.name;
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("DeleteUploadedFile", "Person")',
                    data: "id=" + name,
                    dataType: 'html'
                });
                var ref;
                return (ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
            },
            maxFilesize: 2,
            maxFiles: 12,

        });
});

But yet I still get the error.

Answer 1

This is the only solution that worked for me.

What I ended up doing is renaming the css class to "dropzone1", and then renamed all of the instances of "dropzone" to "dropzone1" in the basic.cs and dropzone.cs files. That way I kept all of the CSS styling.

Once I did that, it worked like a charm.

Answer 2

Remove "dropzone" from the class attribute on the UploadImage element and the error will go away. I had the same issue and that fixed it.

I think you're giving the plugin mixed messages by setting autoDiscover to false and also setting the class of an element to "dropzone."

Answer 3

Try from Reference here

1. Turn off autoDiscover globally like this: Dropzone.autoDiscover = false;, or

2. Turn off autoDiscover of specific elements like this: Dropzone.options.myAwesomeDropzone = false;