Dynamically updating Dropzonejs maxFiles setting?

[deronsizemore]

Dropzone.options.dropzone = {
	uploadMultiple: false,
	maxFiles: {{ imagecount }},
	maxFilesize: 2, // MB
	dictFileTooBig: "That image is too large. We only allow 2MB or smaller.",
	acceptedFiles: ".jpeg, .jpg",
	init: function () {
		this.on("success", function(file, response) {
			$('.uploaded-photos').append('<div><img src="' + response.link + '"height="150" class="photo" id="' + response.id + '"/><span class="delete-photo">Delete</span></div>');
			$('.uploaded-photos').justifiedGallery('norewind')
			this.removeFile(file);

			var grabNewCount = parseInt($('.recordcount').text(), 10)
			$('.recordcount span').text(grabNewCount += 1);
	        });	
	}
};

I’m trying to dynamically update the MaxFiles property each time a new image is uploaded/deleted.

As you can see, I’m passing {{ imagecount }} from my server when the page loads. This is just a check to see how many images have been uploaded for the user and thus a calculation for how many they have left to upload. On first page load, this works.

The problem seems to arise when I delete an image which I’m using AJAX to do. I can’t seem to get that maxFiles value to update. If I allow 10 images initially and a user has 5 currently uploaded and deletes one, then the new maxFiles value should now be 6, but nothing I do seems to have an effect on updating that value dynamically. Here’s what I have for my delete code:

$('.delete-photo').click(function() {
	$(this).text('') // remove "delete" text from button
	$(this).html('<i class="fa fa-spinner fa-spin"></i>') // add spinning icon to indicate "working"

	var csrf = $('[name=csrfmiddlewaretoken]').val();
	$.ajax({
		context: this,
		type: "POST",
		url: '/delete-photo/',
		data: {'csrfmiddlewaretoken': csrf, 'id': $(this).parent().attr('id') },
		dataType: "json",
		timeout: 10000,
		cache: false,
		success: function(data, textStatus, XMLHttpRequest){
			var image = $(this).parent();
			$(image).fadeOut(800, function() {
				$(this).remove();
				$('.uploaded-photos').justifiedGallery()
			});
			Dropzone.options.dropzone.maxFiles = Dropzone.options.dropzone.maxFiles + 1;
			var grabNewCount = parseInt($('.recordcount').text(), 10)
			$('.recordcount span').text(grabNewCount -= 1);
                  }
	});
});

So you can see that I’ve got Dropzone.options.dropzone.maxFiles = Dropzone.options.dropzone.maxFiles + 1; in an attempt to take the current maxFiles value and update the value +1 but that doesn’t do anything.

Any ideas?