Uncaught Error: Dropzone already attached

Question

Working with Dropzone plugin in asp.net to do upload in many pages, I tried to put the script into a usercontrol in order to use it many times, but I get this error: Uncaught Error: Dropzone already attached. I did many searches, and I found some solutions that didn't resolve my problem, such as adding Dropzone.autoDiscover = false; or Dropzone.options.myAwesomeDropzone = false; here is the script included in a usercontrol :

<script type="text/javascript">

$(document).ready(function () {
    var currentDropzoneContent = '#<%=DropContent.ClientID %>';
    var currentDropzone = 'div#<%=dropzonefile2.ClientID %>';
    var dzMessage = $(currentDropzone).children('.dz-message');
    // Dropzone
    $(currentDropzone).dropzone({
        url: "/AdminAjax/FileManager/UploadFile",
        clickable: false,
        createImageThumbnails: true,
        acceptedFiles: "image/*",
        maxFiles: 1,
        accept: function (file, done) {
            done();
        },
        init: function () {
            // drop
            this.on("sending", function (file, xhr, data) {
                var folderValue = $(currentDropzoneContent + " .typeDrop input:checked").val();
                data.append("folderName", folderValue);
            });

            this.on("drop", function (e) {
                dzMessage.text('Drag image here');
            });
            this.on("dragleave", function () {
                dzMessage.text('Drag image here');
            });
            this.on("dragover", function () {
                dzMessage.text('Drop image here');
            });
            // complete
            this.on("complete", function (file) {

            });
            // canceled
            this.on("canceled", function () {
            });
            // success
            this.on("success", function (file, response) {

                this.removeFile(file);
                if ($.trim(response) != "") {
                    var imagePreview = '<%= ImagePreview %>';
                    var imageField = '<%= ImageField %>';
                    $('img#' + imagePreview).attr("src", response + '.ashx?bgcolor=E5E5E5&height=120&width=120');
                    $('#' + imageField).val(response);
                }

            });
            this.on('addedfile', function (file) {

            });

            // error
            this.on("error", function (file, response) {
                this.removeFile(file);
            });
        }
   });
});

and here is the code html for the div in which I drop the file to upload

<div class="mws-form">
    <div class="mws-form-block">
        <div class="mws-form-row">
             <div class="mws-form-item">
                <div id="DropContent" runat="server" class="mws-ui-button- radio">
                    <asp:RadioButton ID="Categories" CssClass="typeDrop" GroupName="typeDrop" runat="server"
                        Text="Categories" />
                    <asp:RadioButton ID="Products" CssClass="typeDrop"  GroupName="typeDrop" runat="server"
                        Text="Products" />
                    <asp:RadioButton ID="Banners" CssClass="typeDrop"     GroupName="typeDrop"  runat="server"
                        Text="Banners" />
                    <asp:RadioButton ID="Manufacturers" CssClass="typeDrop" GroupName="typeDrop"  runat="server"
                        Text="Manufacturers" />
                </div>
            </div>
        </div>
    </div>
</div>
<div ID="dropzonefile2" class="dropzonefile1 dropzone1 needsclick1 dz- clickable1 fade well" runat="server">
    <div class="dz-message needsclick custText" >
        Drag image here</div>
</div>

Thank you !

Camille Camille · Accepted Answer · 2017-02-15T13:43:42

You have to put autoDiscover option before $(document).ready, like :

//Dropzone Configuration
Dropzone.autoDiscover = false;

$(document).ready(function(){

  // Pre init code
  var currentDropzoneContent = '#<%=DropContent.ClientID %>';
  var currentDropzone = 'div#<%=dropzonefile2.ClientID %>';
  var dzMessage = $(currentDropzone).children('.dz-message');

  // Dropzone manual init
  $(currentDropzone).dropzone({
     url: "/AdminAjax/FileManager/UploadFile",
     clickable: false,
     ...
  });
});`

Uncaught Error: Dropzone already attached

1 Answers