Clever Geek Handbook

How do I disable Dropzone programmatically?

I am using Dropzone to upload files client side. I created Dropzone programmatically using JQuery and I would like to be able to disable it so that the user can no longer upload files. My ideal solution is to just make it unattractive and then apply a default message to indicate to the user that they have exceeded their downloads.

Here's a simple example: http://www.dressorganic.co.uk/dropzone-test/turn-off-dropzone-after-load.htm

Here I am trying to make it invisible after the success event, but nothing happens.

Here is a link to what I actually want it to look like after a successful download: http://www.dressorganic.co.uk/dropzone-test/dropzone-disabled.htm

    <!DOCTYPE html>
    <head>
    <meta charset="utf-8">
    <title>Turn off Dropzone after load</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="/dropzone-test/dropzone/4.0.1/dist/min/dropzone.min.js"></script>
    <link rel="stylesheet" href="/dropzone-test/dropzone/4.0.1/dist/min/dropzone.min.css">

    <script type="text/javascript">
    //<![CDATA[
    $(function() {

       $("#upload1").dropzone({
          createImageThumbnails : false,
          url: "/dropzone-test/handleupload.asp",
          acceptedFiles : ".jpg,.jpeg,.png,.gif",
          dictDefaultMessage : "Click here or drag and drop files to upload",
          addRemoveLinks : false,
          success : function(file) {
             this.removeAllFiles();

             $("#upload1").dropzone({
                 clickable : false,
                 url: "/dropzone-test/handleupload.asp",
                 dictDefaultMessage : "You have exceeded the number of uploads, please remove existing to add more"
              });

          },
        });

    });  // JQuery
    //]]>
    </script>

    </head>

    <body>

        <div id="singleproductload">

            <div id="upload1" class="dropzone">

            </div>

        </div>

    </body>
    </html>
+4


source to share


3 answers


Why don't you replace or hide the element with another div with one CSS. Try remove , replaceWith , show , hide or toggle



0


source


See How to limit the number of dropzone.js uploaded files? ... You don't want to destroy or hide important dropzone items if you are going to allow users to delete files after they have reached their maximum.



0


source


Try deleting and re-creating the div container along with the destroy () method. This makes it possible to reinitialize the Dropzone with new parameters.

var url = 'myurl',
    dz

function createDrop(opt) {
    dz && dz.destroy()
    $('#dz_container').find('div').remove()
    $('<div>', {'class':'dropzone',id:'dz'}).appendTo($('#dz_container'))
    Dropzone.options.dz = opt
    dz = new Dropzone('div#dz', { url: url})
}

createDrop({dictDefaultMessage:'new message...'})
0


source






More articles:


All Articles