orbit-basic/app/views/admin/assets/index.html.erb

<style>
  /* File Upload */
  #upload-panel {
    clear: both;
  }
  #upload-panel iframe {
    width: 100%;
    border: none;
  }
  #fileupload {
    position: relative;
    clear: both;
    overflow: hidden;
    margin: 0 0 20px;
    height: 254px;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    background-color: #FDFDFD;
    /*-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .15) inset;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, .15) inset;*/
  }
  #fileupload table {
    margin: 0;
  }
  #fileupload .fileupload-buttonbar .navbar {
    margin-bottom: 0;
  }
  #fileupload .fileupload-buttonbar .navbar .add-photo {
    border: none;
    border-right: 1px solid #d4d4d4;
    background-color: transparent;
    padding: 10px 15px 10px;
    color: #777777;
    text-decoration: none;
    text-shadow: 0 1px 0 #ffffff;
  }
  #fileupload .fileupload-buttonbar .navbar .add-photo:hover {
    color: #333333;
    text-decoration: none;
    background-color: #EDEDED;
  }
  #fileupload .fileupload-buttonbar .navbar .fileinput-button {
    position: relative;
    overflow: hidden;
  }
  #fileupload .fileupload-buttonbar .navbar .fileinput-button input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    font-size: 23px;
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    cursor: pointer;
    -webkit-transform: translate(-300px, 0) scale(4);
       -moz-transform: translate(-300px, 0) scale(4);
      -ms-transform: translate(-300px, 0) scale(4);
       -o-transform: translate(-300px, 0) scale(4);
        transform: translate(-300px, 0) scale(4);
    direction: ltr;
  }
  #fileupload .fileupload-buttonbar .navbar-inner {
    border-width: 0 0 1px;
    border-radius: 4px 4px 0 0;
    padding: 0;
  }

  #fileupload .fileupload-progress .progress {
    position: absolute;
    right: 0;
    left: 0;
    margin-bottom: 0;
    height: 5px;
    border-radius: 0;
    background-color: transparent;
    background-image: none;
  }
  #fileupload .fileupload-progress .progress-success.progress-striped .bar {
    background-color: #0088CC;
  }
  #fileupload .fileupload-progress .progress-extended {
    position: absolute;
    top: 1px;
    right: 0;
    padding-right: 15px;
    color: #0088CC;
    text-align: right;
    text-shadow: 0 1px 0 #ffffff;
    letter-spacing: -0.1em;
    font-size: 12px;
    font-family: 'Varela Round', sans-serif;
    line-height: 40px;
  }
  #fileupload .fileupload-buttonbar {
    position: relative;
    z-index: 3;
  }
  #fileupload #dropzone {
    margin: 15px 10px 10px;
    padding: 30px;
    text-align: center;
    font-size: 2em;
    font-family: 'Raleway';
    line-height: 1.2em;
    color: #e4e4e4;
  }
  #fileupload #dropzone div[data-icons] {
    font-size: 4em;
    height: 70px;
    padding-top: 30px;
    text-shadow: 0px -1px 0px #ececec;
    color: #f5f5f5;
  }
  #fileupload #dropzone.drop {
    position: absolute;
    top: 37px;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px dashed #0088CC;
    border-radius: 10px;
    color: #0088CC;
    background-color: #FFFFFF;
    z-index: 0;
  }
  #fileupload #dropzone.fade {
    opacity: .3;
  }
  #fileupload #dropzone.in {
    opacity: .7;
    z-index: 2;
    border-color: #faa732;
    color: #faa732;
  }
  #fileupload #dropzone.drop div[data-icons] {
    text-shadow: 0px -1px 0px #0c5f80;
    color: #0088CC;
  }
  #fileupload #dropzone.in div[data-icons] {
    text-shadow: 0px -1px 0px #a28a10;
    color: #faa732;
  }
  #fileupload #file-list {
    position: relative;
    z-index: 1;
    height: 209px;
    margin: 2px 0;
  }
  #fileupload #file-list .pane {
    margin-right: 2px;
  }
  #fileupload #file-list .files {
    margin: 0;
    padding: 10px 14px 10px 10px;
    list-style: none;
  }
  #fileupload #file-list .files > li {
    padding: 10px;
  }
  #fileupload #file-list .files > li:nth-child(even) {
    background-color: #e9e9e9;
    border-radius: 3px;
  }
  #fileupload #file-list .files ul {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #fileupload #file-list .files ul li {
    float: left;
  }
  #fileupload #file-list .files ul li.action-bnt {
    float: right;
  }
  #fileupload #file-list .preview {
    width: 80px;
    min-height: 1px;
    margin-right: 10px;
    text-align: center;
  }
  #fileupload #file-list .name {
    width: 150px;
    max-width: 250px;
    margin-left: 15px;
  }
  #fileupload #file-list .progress {
    position: absolute;
    left: -5px;
    right: -5px;
    bottom: -5px;
    margin-bottom: 0;
    height: 5px;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
  }
  #fileupload #file-list .size {
    width: 80px;
  }
  #fileupload #file-list .action-bnt {
    text-align: right;
  }
</style>
<%= stylesheet_link_tag "lib/filemanager"%>
<%= stylesheet_link_tag "lib/main-forms"%>
<div class="form-horizontal main-forms">
  <fieldset>
    <ul class="nav nav-pills">
      <li class="active"><a href="#filemanager" data-toggle="tab">File Manager</a></li>
      <li><a href="#upload" data-toggle="tab">Upload</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane fade in active" id="filemanager">
        <div class="input-area clearfix">
          <div id="panel_r" class="pull-right">
            <div class="control-group">
              <label class="control-label">Preview</label>
            </div>
            <div class="preview-area">
            </div>
          </div>
          <div id="panel_l" class="tab-pane fade in active pull-left">
            <form data-remote='true' action="<%= admin_assets_path(request.filtered_parameters) %>" method="get">
              <div class="control-group">
                <label class="control-label">Search Box :</label>
                <div class="controls">
                  <input type="text" name="filter" placeholder="Enter Filename" />
                </div>
              </div>
            </form>
            <table id="asset_sort_list" class="table main-list">
              <thead>
                <tr>
                    <th></th>
                    <th>Name</th>
                    <th>Size</th>
                    <th>Description</th>
                    <th>Action</th>
                </tr>
              </thead>
              <tbody id="tbody_assets" class="sort-holder">
                <%= render :partial => 'asset', :collection => @assets %>
              </tbody>
            </table>
            <div class="pagination pagination-centered">
               <%= paginate @assets, :params => {:direction => params[:direction], :sort => params[:sort], :type => params[:type]}, :remote => true %>
            </div>
          </div>
        </div>
        <div class="form-actions form-fixed pagination-right">
          <button class="btn btn-primary" id="insert_btn" style="display:none;">Insert</button>
          <button class="btn btn-primary" id="delete_btn" style="display:none;">Delete</button>
        </div>
      </div>
      <div class="tab-pane fade" id="upload">
        <div class="input-area">
          <form action="<%= file_upload_admin_assets_path %>", 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="files[]" 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>
    </div>
    <div id="editform" class="modal hide fade"></div>
  </fieldset>
</div>

<% content_for :page_specific_javascript do %>
  <%= 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" %>
  <%= javascript_include_tag "admin/filemanager.js" %>
<% end %>

<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>