How do I detach Dropzone programmatically?

Question

I use Dropzone to upload files client side. I have set up Dropzone programmatically using JQuery and I would like to be able to detach it so the user can no longer upload anymore files. My ideal solution is to simply make it unclickable then apply a default message to indicate to the user they have exceeded the number of uploads.

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

Here I try to make it unclickable after the success event but nothing happens.

Here is a link to what I actually want it to look like after a successful upload: 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>

score 0 · Answer 1 · answered May 22 '15 at 23:15

0

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

answered May 22 '15 at 23:15

MikeVelazco

885
2
13
30

1

I am aware I can do this but what I would like to do specifically is detach dropzone then attach it again with new parameters so it becomes unclickable and the new message appears. – Vince De Mello May 23 '15 at 07:39
have you tried [unbind](http://api.jquery.com/unbind/), [off](http://api.jquery.com/off/), [undelegate](http://api.jquery.com/undelegate/) or [die](http://api.jquery.com/die/)? – MikeVelazco May 25 '15 at 15:05

score 0 · Answer 2 · edited May 23 '17 at 11:45

0

See How to limit the number of dropzone.js files uploaded?. You don't want to destroy or hide important dropzone elements if you are going to be allowing your users to remove files after they have hit the maximum.

edited May 23 '17 at 11:45

Community

1
1

answered May 22 '15 at 23:44

Chris Jenkins

719
7
20

I actually generate my own script which lists all the uploaded files and allows you to remove them or add captions. This is why I wanted to disable Dropzone. I therefore only allow one file to be upoaded at a time before removing the thumbnail then listing all the upoading files. – Vince De Mello May 23 '15 at 07:12

score 0 · Answer 3 · answered Jun 21 '19 at 04:02

Try removing and re-creating div container along with destroy() method. It makes possible re-initialization of 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...'})

How do I detach Dropzone programmatically?

3 Answers3