CODEWITHSUNDEEP
javascriptjquerydropzone.jsdeferred
user3431239
user3431239

Reputation: 267

Dropzone not working after add 'defer' on js file

So I have a dropzone control and everything is working just fine.

Code below: 

<head runat="server">
    <title></title>
    
    <script type="text/javascript" src="/content/js/jquery-1.11.2.min.js"  ></script>
        <link rel="stylesheet" href="/content/css/dropzone.css" />
    <script type="text/javascript" src="/content/js/dropzone.js"  ></script>

       <script type="text/javascript">

                Dropzone.autoDiscover = false;
                $(document).ready(function () {
                        $("#dZUploadPhoto").dropzone({
                        url: "/ashx/file-upload.ashx",

                        sending: function (file, xhr, formData) {
                            formData.append("type", "employee");
                        },
                        success: function (file, response) {
                        },
                        acceptedFiles: ".jpeg,.jpg,.png"
                    });
                });
          
    </script>

</head>
<body>
    <form id="form1" runat="server">
       <div runat="server" id="divFileUploadBackground">
            <div id="dZUploadPhoto" class="dropzone">
                <div class="dz-default dz-message">Click or drop photo here to upload</div>
            </div>
        </div>
    </form>
</body>

To speed up page load & eliminate render-blocking javascript files, I put 'defer' on every js file and add "DOMContentLoaded" on document.ready as per below:

<head runat="server">
    <title></title>
    
    <script type="text/javascript" src="/content/js/jquery-1.11.2.min.js" defer></script>
        <link rel="stylesheet" href="/content/css/dropzone.css" />
    <script type="text/javascript" src="/content/js/dropzone.js" defer></script>

       <script type="text/javascript">
           window.addEventListener('DOMContentLoaded', function () {
               (function ($) {

                Dropzone.autoDiscover = false;
                $(document).ready(function () {
                        $("#dZUploadPhoto").dropzone({
                        url: "/ashx/file-upload.ashx",

                        sending: function (file, xhr, formData) {
                            formData.append("type", "employee");
                           
                        },
                        success: function (file, response) {
                        },
                        acceptedFiles: ".jpeg,.jpg,.png"
                    });
                });
          
               })(jQuery);
           });
    </script>

</head>
<body>
    <form id="form1" runat="server">
       <div runat="server" id="divFileUploadBackground">
            <div id="dZUploadPhoto" class="dropzone">
                <div class="dz-default dz-message">Click or drop photo here to upload</div>
            </div>
        </div>
    </form>
</body>

Now, my code is not working with 2 error message:

I've been searching high & low and still don't get it. Can someone enlighten me and show me the way? Where i did wrong?

Upvotes: 1

Views: 428

Answers (1)

wallek876
wallek876

Reputation: 3269

The problem is that when you include the line:

Dropzone.autoDiscover = false;

Inside the listener for the DOMContentLoaded, this delays the execution of this line to the point that, when its executed, the default dropzone auto discover feature and the default configuration have already been used.

Just move this line outside the listener:

Dropzone.autoDiscover = false;

window.addEventListener('DOMContentLoaded', function () {
    /* Rest of the code */
}

In fact dropzone also has a listener for the DOMContentLoaded and runs the auto discover when that event is fired, but since the dropzone library is registered first on that event it triggers before than your script, at least most popular browsers like chrome of firefox do it this way.

Upvotes: 1

Related Questions