How to detach Dropzone programmatically

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>

Open in new window

mike99cAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
How about this sample on the JQuery UI site for using draggable handles

https://jqueryui.com/resources/demos/draggable/handle.html

It seems it does what you want.
0
mike99cAuthor Commented:
Thanks Julian but I can't see how your solution relates to my issue.
0
Julian HansenCommented:
Sorry mike99c - I posted to the wrong post.
0
Slick812Commented:
greetings  mike99c, , in this code for the success -
   success : function(file) {
      this.removeAllFiles();
// code below not works, do NOT create another  .dropzone
//  this.   one already exists
      $("#upload1").dropzone({ 
                 clickable : false,
	         url: "/dropzone-test/handleupload.asp",
			 dictDefaultMessage : "You have exceeded the number of uploads, please remove existing to add more"
		  });

	  }

Open in new window


You do not want to create the dropzone again, it already exists, in this code block the the variable    this.    IS THE DROPZONE instance, because you use it as -
     this.removeAllFiles();

so any  methods or options you need can be accessed from the    this.

you might try the code below as the success method, it may not be correct, I do not have time to test it, but it may give you something to work with
   success : function(file) {
      this.removeAllFiles();
      this.options.clickable = false;
      this.options.dictDefaultMessage ="You have exceeded the number of uploads";
	  }

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.