space/app/views/admin/spaces/edit_sub_unit.html.erb

<%= form_for @sub_unit, url: "/admin/space/update_sub_unit", html: {class: "form-horizontal main-forms edit_sub_unit_form"} do |f| %>
  <fieldset>
      <%= render :partial => "sub_unit_form", locals: {f: f} %>
  </fieldset>
<% end %>

<script type="text/javascript">
	Dropzone.autoDiscover = false;
	var image_id_panel = $("#image_ids"),
		total_images = 0,
		validator = new FormValidator($("form.edit_sub_unit_form"));
	var subUnitImageDropzone = new Dropzone("div#sub-unit-images", {
		url :  "/admin/space/upload_sub_unit_image",
		previewsContainer : "#sub-unit-images-container",
		paramName : "floor_sub_unit_image[image]",
		clickable : true,
		autoProcessQueue : false,
		maxFilesize : 2,
		addRemoveLinks : true,
		uploadMultiple : false,
	    accept: function(file, done) {
	      var regex = new RegExp(/(\.|\/)(gif|jpe?g|png)$/i)
	      if(regex.test(file.name)){
	      	total_images++;
	      	done();
	      }else{
	      	this.removeFile(file);
	      }
	    }
	})

	$(".remove_image_btn").on("click",function(){
		subUnitImageDropzone.removeAllFiles();
		return false;
	})

	subUnitImageDropzone.on("success",function(file,data){
		image_id_panel.append("<input type='hidden' name='floor_sub_unit[floor_sub_unit_images][]' value='" + data.id + "' />");
		total_images--;
		if(total_images == 0){
			submitForm();
		}
	})
	subUnitImageDropzone.on("sending",function(file,xhr,obj){
		obj.append("authenticity_token",$("form.edit_sub_unit_form input[name=authenticity_token]").val());
	})

	var doImagesUpload = function(){
		subUnitImageDropzone.processQueue();
		subUnitImageDropzone.on("complete", function(file) {
			var filesCount = subUnitImageDropzone.getQueuedFiles().length;
			if(filesCount > 0){
				doImagesUpload();
			}
		});
	}

	$("#floor-sub-unit-form-btn").on("click",function(){
		if(validator.isFormValidated()){
			if(subUnitImageDropzone.getQueuedFiles().length > 0){
				doImagesUpload();
			}else{
				submitForm();
			}
		}else{
			return false;
		}
		// uploading all the files
		$(".message")
			.removeClass("hide")
			.addClass("animated slideInRight");
		return false;
	})

	var submitForm = function(){
		if(subUnitImageDropzone.getQueuedFiles().length > 0){
			return false;
		}else{
			$(".upload-status-notice span.upload-text").text("Submitting");
			$("form.edit_sub_unit_form").submit();
			return false;
		}
	}

</script>