For uploading files, also display size and last modified date.

Size is nicely formatted. For easier date formatting, momentjs is included.
Pylons · Jun 21, 2014 · a6ccd9e · a6ccd9e
1 parent 6e32573
commit a6ccd9e
Show file tree

Hide file tree

Showing 4 changed files with 2,662 additions and 7 deletions.
diff --git a/substanced/folder/static/css/multiupload.css b/substanced/folder/static/css/multiupload.css
@@ -61,17 +61,31 @@
 
 }
 
-.file-in-progress .file-name {
+.file-in-progress .file-info {
     vertical-align: middle;
+    display: block;
+    position: relative;
+    top: 1em;
+}
+
+.file-in-progress .file-info .file-name {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    line-height: 65px;
+    font-weight: bold;
+}
+
+.file-in-progress .file-info .file-modified {
+    float: left;
+}
+
+.file-in-progress .file-info .file-size {
+    float: right;
 }
 
 .file-in-progress .canvas-wrapper {
-    margin-right: 1.5em;
+    margin-right: 20px;
     height: 65px;
     width: 65px;
 }

diff --git a/substanced/folder/static/js/multiupload.js b/substanced/folder/static/js/multiupload.js
@@ -4,6 +4,24 @@
 (function($) {
     'use strict';
 
+    function sizeToText(n) {
+        // return in units T, G, M, K
+        // powers of 10 are used, ie, 1M = 1000K
+        var power = Math.pow(10, 3);
+        var units = ['', 'K', 'M', 'G', 'T'];
+        while (units.length > 1 && n >= power) {
+            n = n / power;
+            units.shift();
+        }
+        // Examples: 321 4.32K 54.3K 654K 7.65M 87.6M
+        //           987M 1.98G 21.9G 321G ....
+        var formattedN = n.toFixed(Math.max(
+            0,
+            2 - Math.floor(Math.log(n) / Math.LN10)
+        ));
+        return '' + formattedN + units[0];
+    }
+
     function getProgressFromData(data) {
         return parseInt(data.loaded / data.total * 100, 10);
     }
@@ -194,7 +212,15 @@
         var allContainers = $('#files > *');
         $.each(data.files, function (index, file) {
             var newItem = template.clone().appendTo(data.context);
-            newItem.find('.file-name').eq(0).text(file.name);
+            var canvasWrapper = newItem.find('.canvas-wrapper');
+            var fileInfo = newItem.find('.file-info');
+            var fileName = fileInfo.find('.file-name');
+            var fileModified = fileInfo.find('.file-modified');
+            fileName.text(file.name);
+            var fileSize = newItem.find('.file-size');
+            fileSize.text(sizeToText(file.size));
+            fileModified.text(moment(file.lastModifiedDate).format('LL'));
+            console.log('file', file);
             newItem.find('.remove-button').click(function() {
                 // Remove the file from the submit queue.
                 cancelSubmit();

diff --git a/substanced/folder/templates/multiupload.pt b/substanced/folder/templates/multiupload.pt
@@ -39,10 +39,13 @@
       <div class="file-in-progress row">
         <div class="col-xs-8 col-sm-7 col-md-6 col-lg-5 clearfix">
           <div class="left-col">
-            <div class="canvas-wrapper pull-left">
+            <div class="canvas-wrapper pull-left"></div>
+            <div class="file-info">
+              <span class="file-name"></span>
+              <span class="file-modified"></span>
+              <span class="file-size"></span>
+              <div class="clearfix"></div>
             </div>
-            <span class="file-name">
-            </span>
           </div>
         </div>
         <div class="col-xs-4 col-sm-5 col-md-6 col-lg-7 clearfix">
@@ -57,6 +60,8 @@
     <div class="drop-message">
       You can also <b>drop files</b> anywhere in this window.
     </div>
+    <!-- XXX Moment.js is only included in this page, could be loaded globally instead. -->
+    <script src="${request.static_url('substanced.sdi:static/js/moment.js')}" type="text/javascript"></script>
     <!-- The jQuery UI widget factory -->
     <script src="${request.static_url('substanced.folder:static/vendor/jquery-file-upload/js/vendor/jquery.ui.widget.js')}" type="text/javascript"></script>
     <!-- The Load Image plugin is included for the preview images and image resizing functionality -->