ruling_template/app/views/admin/ruling_templates/upload_files.html.erb

<%= csrf_meta_tags %>
<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "ruling_template/template" %>
  <style type="text/css">
    .fileinput-button {
      position: relative;
      overflow: hidden;
      display: inline-block;
    }
    .fileinput-button input {
      position: absolute;
      top: 0;
      right: 0;
      margin: 0;
      opacity: 0;
      -ms-filter: 'alpha(opacity=0)';
      font-size: 200px !important;
      direction: ltr;
      cursor: pointer;
    }

    /* Fixes for IE < 8 */
    @media screen\9 {
      .fileinput-button input {
        filter: alpha(opacity=0);
        font-size: 100%;
        height: 100%;
      }
    }

    #progress {
      margin-top: 10px;
      height: 5px;
      text-align: center;
      margin-bottom: 5px;
    }
    .progress-text{
      text-align: center;
      font-size: 18px;
    }

    .area {
      margin-bottom: 40px;
      border-bottom: 1px solid #c8c8c8;
    }
  </style>
<% end %>
<div class="file-upload-area">
  <h3><%= @template.title %></h3>
  <% if !@template.template_image_files.empty? %>
     <label class="control-label muted">Uploaded Images (Drag to change order)</label>
    <ul class="preview-image-area">
      <% @template.template_image_files.asc(:order).each do |image| %>
        <li class="uploaded-image" data-id="<%= image.id.to_s %>">
          <img src="<%= image.image_file.thumb.url %>" alt="">
          <a href="<%= delete_image_admin_ruling_template_path(image.id) %>" class="preview-image-delete btn btn-small btn-danger">Delete</a>
        </li>
      <% end %>
    </ul>
  <% end %>
  <div class="preview-upload-area area">
    <label class="control-label muted">Preview Images</label>
    <form action="<%= upload_image_admin_ruling_template_path(@template.id) %>" id="fileupload">
      <!-- Redirect browsers with JavaScript disabled to the origin page -->
      <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
      <div class="fileupload-buttonbar">
        <div class="navbar">
          <div class="navbar-inner">
            <ul class="nav">
              <li>
                <div class="fileinput-button add-photo">
                  <i class="icon-plus icon-white"></i>
                  <span>Add files...</span>
                  <input type="file" name="template_image_file[image_file]" multiple>
                </div>
              </li>
              <li>
                <button type="submit" class="start add-photo">
                  <i class="icon-upload icon-white"></i>
                  <span>Start upload</span>
                </button>
              </li>
              <li>
                <button type="reset" class="cancel add-photo">
                  <i class="icon-ban-circle icon-white"></i>
                  <span>Cancel upload</span>
                </button>
              </li>
              <!-- <li>
                <button type="button" class="delete">
                  <i class="icons-trash icon-white"></i>
                  <span>Delete</span>
                </button>
              </li> -->
            </ul>
          </div>
        </div>
        <!-- The global progress information -->
        <div class="fileupload-progress">
            <!-- The global progress bar -->
            <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                <div class="bar" style="width:0%;"></div>
            </div>
            <!-- The extended global progress information -->
            <div class="progress-extended"></div>
        </div>
      </div>
      <!-- Drop Zone -->
      <div id="dropzone" class="drop">
        <div data-icons="&#xe0a3;"></div>
        Drop files here
      </div>
      <!-- The loading indicator is shown during file processing -->
      <div class="fileupload-loading"></div>
      <!-- The table listing the files available for upload/download -->
      <div id="file-list" class="nano">
        <div class="content">
          <ul role="presentation" class="files clearfix">
          </ul>
        </div>
      </div>
    </form>
  </div>

  <div class="zip-upload-area area">
    <% if !@template.template_psd_file.nil? && !@template.template_psd_file.psd_zip.url.nil? %>
      <a href="<%= @template.template_psd_file.psd_zip.url %>">Click here to download PSD</a>
    <% end %>
    <label class="control-label muted">Upload PSD</label>
    <form id="psdfileupload" method="POST" enctype="multipart/form-data" action="<%= upload_temp_file_admin_ruling_templates_path %>">
      <span class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span>Select PSD File</span>
        <!-- The file input field used as target for the file upload widget -->
       <input type="file" name="psdfile" >
       <input type="hidden" name="path" >
       <input name="authenticity_token" value="<%= form_authenticity_token %>" type="hidden">
      </span>
      <input id="psd-upload-submit" type="submit" class="btn btn-primary" value="Upload" style="display: none;" />
    </form>
    <div class="psd-notification-area"></div>
    <div id="progress" class="progress">
      <div class="bar bar-success"></div>
    </div>
    <div class="progress-text"></div>
  </div>
 
  <div class="template-upload-area area">
    <%= form_for @template, url: admin_ruling_template_path(@template.id) do |f| %>
      <label class="control-label muted">Git Url</label>
      <%= f.text_field :git_url %>
      <label class="control-label muted">Git Branch</label>
      <%= f.text_field :git_branch %>
      <br>
      <%= f.submit 'update',class: 'btn btn-primary' %>
    <% end %>
    <% if !@template.template_zip(true).url.nil? %>
      <a href="<%= @template.template_zip(true).url %>">Click here to download Template</a>
    <% end %>
    <label class="control-label muted">Upload Template</label>
    <%= form_for @template, url: admin_ruling_template_path(@template.id) do |f| %>
       <span class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span>Select Template File</span>
        <%= f.file_field :template_zip %>  
      </span>
      <input id="template-upload-submit" type="submit" class="btn btn-primary" value="Upload" style="display: none;" />
    <% end %>
    <div class="template-notification-area"></div>
  </div>
  <a href="<%= edit_admin_ruling_template_path(@template.id) %>" class="btn btn-info">Edit Template</a>
  <a href="<%= admin_ruling_templates_path %>" class="btn btn-warning">Templates</a>
</div>
<% content_for :page_specific_javascript do %>
  <%= javascript_include_tag "lib/jquery-ui-sortable.min" %>
  <%= javascript_include_tag "file-upload/vendor/jquery.ui.widget.js" %>
  <%= javascript_include_tag "file-upload/tmpl.min.js" %>
  <%= javascript_include_tag "file-upload/load-image.min.js" %>
  <%= javascript_include_tag "file-upload/canvas-to-blob.min.js" %>
  <%= javascript_include_tag "file-upload/jquery.iframe-transport.js" %>
  <%= javascript_include_tag "file-upload/jquery.fileupload.js" %>
  <%= javascript_include_tag "file-upload/jquery.fileupload-fp.js" %>
  <%= javascript_include_tag "file-upload/jquery.fileupload-ui.js" %>
  <%= javascript_include_tag "file-upload/drop-zone.js" %>
  <script type="text/javascript">
      !function ($) {
        $.fn.checkListLength = function (param){
            _defaultSettings = {
                onlyOne: null,
            };
            _set = $.extend(_defaultSettings, param);
            $this = this;
            $li = this.children('li');
            $dropzone = $('#dropzone');
            if(($li.length - _set.onlyOne) == 0) {
            $('#dropzone').fadeIn(300);
        } else {
            $('#dropzone').fadeOut(300);
        };
        $('#file-list').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
        }
    }(window.jQuery);
    $(function () {
        'use strict';
        // Initialize the jQuery File Upload widget:
        if($('#fileupload').length){
          $('#fileupload').fileupload({
              maxFileSize: 5000000,
              acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
              dropZone: $('#dropzone'),
              headers:{
                  'X-CSRF-Token': $('meta[name="csrf-token"]').attr("content")
              }
          }).on('fileuploaddone', function (e, data) {
            alert("Please refresh the page.");
          });
      }

      var psdfilename = null,
          psdFileForm = null;
      $("#psdfileupload").fileupload({
        maxChunkSize :  8 * 1024 * 1024,
        acceptFileTypes: /(\.|\/)(zip)$/i,
        add : function(e, data){
          var file = data.originalFiles[0].name.split(".");
          psdfilename = data.originalFiles[0].name;
          psdFileForm = data;
          if(file[file.length - 1] == "zip"){
            $("div.psd-notification-area").removeClass("error").text("");
            $("#psd-upload-submit").show();
          }else{
            $("div.psd-notification-area").addClass("error").text("Only zip file allowed.");
            $("#psd-upload-submit").hide();
            return false;
          }
        },
        progressall: function (e, data) {
          var progress = parseInt(data.loaded / data.total * 100, 10);
          $('#progress .bar').css(
              'width',
              progress + '%'
          );
          if(progress < 100){
            $('.progress-text').text("Uploading " + progress + "%");
          }else{
            $('.progress-text').text("Uploaded successfully.");
          }
        }
      })

      $("#psd-upload-submit").on("click",function(){
        $.ajax({
          url : "<%= get_temp_dir_name_admin_ruling_template_path(@template.id) %>",
          dataType : "json",
          type : "get",
          data : {"filename" : psdfilename}
        }).done(function(data){
          $('.progress-text').show();
          $("#psdfileupload input[type=hidden]").val(data.path);
          psdFileForm.submit();
        })
        return false;
      })

      $("#r_template_template_zip").on("change",function(){
        var file = this.files[0].name.split(".");
        if(file[file.length - 1] == "zip"){
          $("div.template-notification-area").removeClass("error").text("");
          $("#template-upload-submit").show();
        }else{
          $("div.template-notification-area").addClass("error").text("Only zip file allowed.");
          $("#template-upload-submit").hide();
          return false;
        }
      })
    });

  </script>
<% end %>
<script type="text/javascript">
  $(".preview-image-area").sortable({
    update : function(event, ui){
      var image_ids = [];
      $(".preview-image-area li").each(function(){
        image_ids.push($(this).data("id"));
      })
      $.ajax({
        url : "<%= change_image_order_admin_ruling_templates_path %>",
        data : {"images" : image_ids},
        dataType : "json",
        type : "post",
        headers:{
          'X-CSRF-Token' : $('meta[name="csrf-token"]').attr("content")
        }
      })
    }
  });
  $(".preview-image-delete").on("click",function(){
    var el = $(this);
    if(confirm("Are you sure?")){
      $.ajax({
        url : el.attr("href"),
        type : "delete",
        dataType : "json",
        headers:{
          'X-CSRF-Token' : $('meta[name="csrf-token"]').attr("content")
        }
      }).done(function(){
        el.parent().remove();
      })
    }
    return false;
  })
  
  
</script>
 <!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
      <li class="template-upload fade">
        <ul class="clearfix">
            <li class="action-bnt">
              {% if (o.files.valid && !i) { %}
                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                  <div class="bar" style="width:0%;"></div>
                </div>
                {% if (!o.options.autoUpload) { %}
                  <button class="btn btn-primary start">
                    <i class="icon-upload icon-white"></i>
                  </button>
                {% } %}
              {% } %}
              {% if (!i) { %}
                <button class="btn btn-warning cancel">
                  <i class="icon-ban-circle icon-white"></i>
                </button>
              {% } %}
            </li>
            <li class="preview pull-left"><span class="fade"></span></li>
            <li class="name-size">
              <p>{%=file.name%}</p>
              {% if (file.error) { %}
                <p class="error"><span class="label label-important">Error</span> {%=file.error%}</p>
              {% } else if (o.files.valid && !i) { %}
                <p class="label label-info">{%=o.formatFileSize(file.size)%}</p>
              {% } %}
            </li>
          </ul>
      </li>
    {% } %}
  </script>
  <!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
  {% for (var i=0, file; file=o.files[i]; i++) { %}
    <li class="template-download fade">
      <ul class="clearfix">
        {% if (file.error) { %}
          <li class="name-size">
            <p>{%=file.name%}</p>
            <p class="error"><span class="label label-important">Error</span> {%=file.error%}</p>
          </li>
        {% } else { %}
          <li class="preview">
            {% if (file.thumbnail_url) { %}
              <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
            {% } %}
          </li>
          <li class="name-size">
            <p><a href="{%=file.url%}" title="{%=file.name%}" data-gallery="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a></p>
            <p ><span class="label label-success">Success</span> File uploaded successfully!</p>
            <p class="label label-info">{%=o.formatFileSize(file.size)%}</p>
          </li>
        {% } %}
      </ul>
    </li>
  {% } %}
</script>