register_modules/app/views/admin/admin_modules/uploadfiles.html.erb

<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "lib/main-forms" %>
  <%= stylesheet_link_tag "lib/main-list" %>
  <%= stylesheet_link_tag "lib/dropzone" %>
  <%= stylesheet_link_tag "//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" %>
  <%= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" %>
<% end %>
<% content_for :page_specific_javascript do %>
	<%= javascript_include_tag "lib/dropzone" %>
  <%= javascript_include_tag "lib/bootstrap-datetimepicker" %>
  <%= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %>
  <%= javascript_include_tag "lib/file-type" %>
  <%= javascript_include_tag "lib/module-area" %>  
<% end %>
<style>
	.message{
		float: right;
		text-align: center;
		width: 125px;
		padding: 25px;
		background-color: #7a7a7a;
		color: #fff;
		font-size: 18px;
		border-radius: 50px 0 0 50px;
	}
	.message .upload-text{
		margin-left: 5px;
	}
	.group-clear-4{
		display: inline-block;
		margin-bottom: 20px;
	}
	.group-clear-4 .group-item{
		display: inline-block;
	}
	.group-clear-4 img{
		width: 150px;
	}
</style>
<%= form_for @rm, url: admin_admin_module_path(@rm.id), html: {class: "form-horizontal main-forms previewable", id: "module_edit_form"} do |f| %>
<fieldset>
	<div class="message hide">
	  <i class="fa fa-refresh fa-spin"></i>
	  <span class="upload-text">Uploading...</span>
	</div>
    <!-- Input Area -->
	<div class="input-area">

  <!-- Module Tabs -->
	  <div class="nav-name"><strong><%= t(:module) %></strong></div>
	  <ul class="nav nav-pills module-nav">
	    <li class="active"><a href="#basic" data-toggle="tab"><%= t(:basic) %></a></li>
	    <li><a href="#tag" data-toggle="tab"><%= t(:tags) %></a></li>
	    <li><a href="#upload" data-toggle="tab"><%= t(:images) %></a></li>
	  </ul>

  <!-- Module -->
	  <div class="tab-content module-area">

	    <!-- Basic Module -->
	    <div class="tab-pane fade in active" id="basic">

	      <!-- Category -->
	      <div class="control-group">
	        <label class="control-label muted"><%= t(:category) %></label>
	        <div class="controls">
	          <%= select_category(f, @module_app) %>
	        </div>
	      </div>

			<!-- Git Path -->
	      <div class="control-group">
	        <%= f.label :git_path, t("register_module.git_path"), :class => "control-label muted" %>
	        <div class="controls col-5">
	          <%= f.text_field :git_path, :class => "input-xxlarge" %>
	        </div>
	      </div>

	      <!-- icon class -->
	      <div class="control-group">
	        <%= f.label :icon_class, t("register_module.icon_class"), :class => "control-label muted" %>
	        <div class="controls col-5">
	          <%= f.text_field :icon_class %>
	        </div>
	      </div>
				<!-- display in frontend -->
				<div class="control-group">
	        <%= f.label :display_in_frontend, t("register_module.display_in_frontend"), :class => "control-label muted" %>
	        <div class="controls col-5">
	          <%= f.check_box :display_in_frontend %>
	        </div>
	      </div>
	    </div>

	    <!-- Tag Module -->
	    <div class="tab-pane fade" id="tag">
	      <div class="control-group">
	        <label class="control-label muted"><%= t(:tags) %></label>
	        <%= select_tags(f, @module_app) %>
	      </div>
	    </div>

	    <div class="tab-pane fade" id="upload">
	      <div class="control-group">
        	<label class="control-label muted"><%= t(:images) %></label>
	        <div class="controls">
	          <div class="group group-clear-4 clearfix">
	            <% @rm.module_show_files.each do |image| %>
	              <div class="group-item col-md-3">
	                <div class="group-item-inner">
	                  <img class="group-img" src="<%= image.image.thumb.url %>">
	                  <div class="group-actions">
	                  	<label class="group-label" for="image_<%= image.id.to_s %>">
	                    	<input class="group-checkbox" id="image_<%= image.id.to_s %>" type="checkbox" name="images_to_destroy[]" value="<%= image.id.to_s %>" /> 
	                    		Delete Image
	                    </label>
	                  </div>
	                </div>
	                    
	              </div>
	            <% end %>
	          </div>
	          <div class="dropzone dropzone-pool" id="module-files">
	            <div class="dropzone-previews" id="module-files-container"></div>
	          </div>
	          <button class="remove_image_btn btn btn-warning">
	            <i class="fa fa-ban"></i>
	            <span>Remove all images</span>
	          </button>
	        </div>
	        <div id="image_ids">
	            
	        </div>
      </div>
	    </div>
	 	</div>

	<!-- Language Tabs -->
  <div class="nav-name"><strong><%= t(:language) %></strong></div>
  <ul class="nav nav-pills language-nav">
    <% @site_in_use_locales.each_with_index do |locale, i| %>
      <li class="<%= 'active' if i == 0 %>">
        <a data-toggle="tab" href=".<%= locale %>"><%= t(locale) %></a>
      </li>
    <% end %>
  </ul>
    <!-- Language -->
  <div class="tab-content language-area">

    <% @site_in_use_locales.each_with_index do |locale, i| %>
    
      <div class="<%= locale %> tab-pane fade <%= ( i == 0 ) ? "in active" : '' %>">
      	<!-- title  -->
      	<div class="control-group input-content">
          <label class="control-label muted"><%= t(:title) %></label>
          <div class="controls">
            <div class="textarea">
              <%= f.fields_for :name_translations do |f| %>
                <%= f.text_field locale, rows: 5, class: "input-block-level", :value => (@rm.name_translations[locale] rescue nil) %>
              <% end %>
            </div>
          </div>
        </div>

        <!-- Content -->
        <div class="control-group input-content">
          <label class="control-label muted"><%= t(:content) %></label>
          <div class="controls">
            <div class="textarea">
              <%= f.fields_for :description_translations do |f| %>
                <%= f.cktext_area locale, rows: 5, class: "input-block-level", :value => (@rm.description_translations[locale] rescue nil) %>
              <% end %>
            </div>
          </div>
        </div>

      </div>

    <% end %>

  </div>
</div>
	<div class="form-actions">
		<%= f.submit t('submit'), class: 'btn btn-primary', :id => "module-form-btn" %>
	</div>
</fieldset>
<% end %>
<script>
	Dropzone.autoDiscover = false;
	var image_id_panel = $("#image_ids"),
		total_images = 0;
	var subUnitImageDropzone = new Dropzone("div#module-files", {
		url :  "/admin/admin_modules/upload_module_image",
		previewsContainer : "#module-files-container",
		paramName : "module_show_file[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='registered_module[module_show_files][]' value='" + data.id + "' />");
		total_images--;
		if(total_images == 0){
			submitForm();
		}
	})
	subUnitImageDropzone.on("sending",function(file,xhr,obj){
		obj.append("authenticity_token",$("form#module_edit_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();
			}
		});
	}

	$("#module-form-btn").on("click",function(){
		if(subUnitImageDropzone.getQueuedFiles().length > 0){
			doImagesUpload();
		}else{
			submitForm();
		}
		// 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#module_edit_form").submit();
			return false;
		}
	}
  function equalHeight(items) {
	  if (typeof items === 'string' && items.length > 0) {
	      var $items = $(items);
	      var $this = null;
	      var maxHeight = -1;

	      // when images are loaded
	      $items.find('img').load(function() {
	        console.log('g')
	          $.each($items, function(i, val) {
	              $this = $(this);
	              if ($this.outerHeight() > maxHeight) {
	                  maxHeight = $this.outerHeight();
	              }
	              console.log($this)
	          }).css('min-height', maxHeight + 'px');
	      });
	  }
	}

	equalHeight('.group-item-inner');
      
</script>