From 2a41e90bc1059dd442e5849e383a61e75d5ed884 Mon Sep 17 00:00:00 2001
From: saurabhbhatia <saurabh.a.bhatia@gmail.com>
Date: Tue, 10 Dec 2013 17:40:13 +0800
Subject: [PATCH] Ray's fixes for the file manager

---
 app/assets/stylesheets/lib/filemanager.css |  14 +
 app/views/admin/assets/index.html.erb      | 715 +++++++++++----------
 2 files changed, 380 insertions(+), 349 deletions(-)
 create mode 100644 app/assets/stylesheets/lib/filemanager.css

diff --git a/app/assets/stylesheets/lib/filemanager.css b/app/assets/stylesheets/lib/filemanager.css
new file mode 100644
index 00000000..036924c6
--- /dev/null
+++ b/app/assets/stylesheets/lib/filemanager.css
@@ -0,0 +1,14 @@
+body > section {
+  padding: 20px;
+}
+#panel_l {
+  width: 80%;
+}
+#panel_r {
+  width: 18%;
+  padding-left: 2%;
+}
+.nav-pills {
+  margin-bottom: 0;
+  padding: 20px 20px 0;
+}
\ No newline at end of file
diff --git a/app/views/admin/assets/index.html.erb b/app/views/admin/assets/index.html.erb
index a2956fbe..59ea57e2 100644
--- a/app/views/admin/assets/index.html.erb
+++ b/app/views/admin/assets/index.html.erb
@@ -1,310 +1,327 @@
 <style>
-/* File Upload */
-#upload-panel {
-	clear: both;
-}
-#upload-panel iframe {
-	width: 100%;
-	border: none;
-}
-#fileupload {
-	position: relative;
-	clear: both;
-	overflow: hidden;
-	margin: 40px 0 15px;
-	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;
-}
+  /* 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;
-}
+  #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>
-<ul class="nav nav-tabs  module-nav">
-  <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-pane fade in active" id="filemanager">
-	<a href="<%= admin_module_tags_path(:module_app_id => @module_app_id.to_s) %>"> Tag Management </a>
-	<div id="panel_l" style="width:200px;float:left;margin:5px 5px 5px 5px;">
-		preview is here
-	</div>
-	<div id="panel_r" class="tab-pane fade in active" style="width: 1200px;" >
-		<table id="asset_sort_list" class="table main-list">
-			<thead>
-				<tr>
-			      <th class="span1"></th>
-			      <th class="span4">Name</th>
-			      <th class="span1-2">Size</th>
-			      <th class="span1-2">Description</th>
-			      <th class="span2">Tags</th>
-			      <th class="span1">Action</th>
-				</tr>
-			</thead>
-			<tbody id="tbody_assets" class="sort-holder">
-				<%= render :partial => 'asset', :collection => @assets %>
-			</tbody>
-		</table>
-	</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 id="asset_pagination" class="paginationFixed">
-			<%= paginate @assets, :params => {:direction => params[:direction], :sort => params[:sort], :filter => @filter, :new_filter => nil, :sort_options => params[:sort_options]}, :remote => true %>
-		</div>
-	</div>
-</div>
-<div class="tab-pane fade" id="upload">
-	 <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>
+<%= 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">
+          <!-- <a href="<%= admin_module_tags_path(:module_app_id => @module_app_id.to_s) %>"> Tag Management </a> -->
+          <div id="panel_r" class="pull-right">
+            preview is here
+          </div>
+          <div id="panel_l" class="tab-pane fade in active pull-left">
+            <table id="asset_sort_list" class="table main-list">
+              <thead>
+                <tr>
+                    <th></th>
+                    <th>Name</th>
+                    <th>Size</th>
+                    <th>Description</th>
+                    <th>Tags</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">
+              <ul>
+                <li><a href="#">«</a></li>
+                <li><a href="#">1</a></li>
+                <li><a href="#">2</a></li>
+                <li><a href="#">3</a></li>
+                <li><a href="#">4</a></li>
+                <li><a href="#">5</a></li>
+                <li><a href="#">»</a></li>
+              </ul>
+            </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 id="asset_pagination" class="paginationFixed">
+            <%= paginate @assets, :params => {:direction => params[:direction], :sort => params[:sort], :filter => @filter, :new_filter => nil, :sort_options => params[:sort_options]}, :remote => true %>
+          </div>
         </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 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>
-    <!-- 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 id="editform" class="modal hide fade">
-  
-   
-  
+    <div id="editform" class="modal hide fade"></div>
+  </fieldset>
 </div>
 
 <% content_for :page_specific_javascript do %>
@@ -321,62 +338,62 @@
 <% 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>
-                {% } %}
+  {% 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>
+                    </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>
+<!-- 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>
+          <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>
             {% } %}
-          </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>
-  {% } %}
+          </ul>
+      </li>
+    {% } %}
 </script>
\ No newline at end of file