dashboard: cooler file upload form

circle/dashboard/templates/dashboard/store/list.html

@@ -31,7 +31,7 @@
       </div>
       <div class="clearfix"></div>
     </a>
-      <div class="infos" style="position: relative;">
+      <div class="store-list-file-infos" style="position: relative;">
         <a href="{% url "dashboard.views.store-download" %}?path={{ f.path }}" 
           class="btn btn-primary" style="position: absolute; right: 15px; top: 32px;">
           <i class="icon-download"></i>
@@ -53,14 +53,50 @@
         {% trans "This folder is empty." %}
       </a>
     {% endfor %}
-    <div class="list-group-item">
+    <div class="list-group-item" style="height: 50px;">
       Upload file to this folder
       <form action="" data-action="{% url "dashboard.views.store-upload" %}" 
-        method="POST" enctype="multipart/form-data" class="pull-right">
+        method="POST" enctype="multipart/form-data" class="pull-right"
+        id="store-upload-form">
         {% csrf_token %}
-        <input type="hidden" name="current_dir" value="{{ current }}"></a>
-        <input type="file" name="data"/>
-        <input type="submit"/>
+        <input type="hidden" name="current_dir" value="{{ current }}"/>
+        <div class="input-group" style="max-width: 400px;">
+          <span class="input-group-btn" id="store-upload-browse">
+            <span class="btn btn-primary btn-sm">
+              {% trans "Browse..." %}
+            </span>     
+          </span>
+          <input type="text" class="input-sm form-control" 
+           id="store-upload-filename"/>
+          <span class="input-group-btn">
+            <input type="submit" class="btn btn-primary btn-sm"
+            value="{% trans "Upload" %}"/>
+          </span>
+        </div>
+        <input id="store-upload-file" name="data" type="file" style="display:none" multiple>
+ 
+<script type="text/javascript">
+  $('#store-upload-browse').click(function() {
+    $('#store-upload-form input[type="file"]').click();
+  });
+  
+  $("#store-upload-file").change(function() {
+    var input = $(this);
+    var numFiles = input.get(0).files ? input.get(0).files.length : 1;
+    var label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
+    input.trigger('fileselect', [numFiles, label]);
+  });
+
+  $("#store-upload-file").on("fileselect", function(event, numFiles, label)  {
+        var input = $("#store-upload-filename");
+        var log = numFiles > 1 ? numFiles + ' files selected' : label;
+        
+        if( input.length ) {
+            input.val(log);
+        }
+  });
+
+</script>
       </form>
     </div>
     </div>
@@ -93,19 +129,18 @@
     float: right;
   }
 
-  .infos {
+  .store-list-file-infos {
     padding: 20px;
     display: none;
     border-left: 1px solid #ddd;
     border-right: 1px solid #ddd;
   }
-
 </style>
 <script>
 $(function() {
   $(".store-list-item").click(function() {
     if($(this).data("item-type") == "D") return true;
-    $(this).next(".infos").stop().slideToggle();
+    $(this).next(".store-list-file-infos").stop().slideToggle();
     return false;
   });