#30 Add support for moving files

GCDWebUploader/GCDWebUploader.bundle/css/index.css

@@ -42,6 +42,11 @@
   text-align: right;
 }
 
+.column-move {
+  width: 40px;
+  text-align: center;
+}
+
 .column-delete {
   width: 40px;
   text-align: center;
@@ -65,7 +70,12 @@
 }
 
 #create-input {
-  width: 250px;
+  width: 50%;
+  height: 20px;
+}
+
+#move-input {
+  width: 80%;
   height: 20px;
 }
 

GCDWebUploader/GCDWebUploader.bundle/index.html

@@ -106,11 +106,32 @@
             <p>Please enter the name of the folder to be created:</p>
             <form onsubmit="return false">
               <input type="text" autocomplete="off" id="create-input">
-            </form>            
+            </form>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-            <button type="button" class="btn btn-primary" id="create-confirm">Create</button>
+            <button type="button" class="btn btn-primary" id="create-confirm">Create Folder</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="modal fade" id="move-modal" tabindex="-1">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal">&times;</button>
+            <h4 class="modal-title">Move Item</h4>
+          </div>
+          <div class="modal-body">
+            <p>Please enter the new location for this item:</p>
+            <form onsubmit="return false">
+              <input type="text" autocomplete="off" id="move-input">
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            <button type="button" class="btn btn-primary" id="move-confirm">Move Item</button>
           </div>
         </div>
       </div>
@@ -135,6 +156,11 @@
             <p>{%=formatFileSize(o.size)%}</p>
           {% } %}
         </td>
+        <td class="column-move">
+          <button type="button" class="btn btn-default btn-xs button-move">
+            <span class="glyphicon glyphicon glyphicon-share-alt"></span>
+          </button>
+        </td>
         <td class="column-delete">
           <button type="button" class="btn btn-danger btn-xs button-delete">
             <span class="glyphicon glyphicon-trash"></span>

GCDWebUploader/GCDWebUploader.bundle/js/index.js

@@ -122,6 +122,16 @@ function _reload(path) {
       _reload(path);
     });
     
+    $(".button-move").click(function(event) {
+      var path = $(this).parent().parent().attr("data-path");
+      if (path[path.length - 1] == "/") {
+        path = path.slice(0, path.length - 1);
+      }
+      $("#move-input").attr("data-path", path);
+      $("#move-input").val(path);
+      $("#move-modal").modal("show");
+    });
+    
     $(".button-delete").click(function(event) {
       var path = $(this).parent().parent().attr("data-path");
       $.ajax({
@@ -229,6 +239,29 @@ $(document).ready(function() {
     }
   });
   
+  $("#move-modal").on("shown.bs.modal", function(event) {
+    $("#move-input").focus();
+    $("#move-input").select();
+  })
+  
+  $("#move-confirm").click(function(event) {
+    $("#move-modal").modal("hide");
+    var oldPath = $("#move-input").attr("data-path");
+    var newPath = $("#move-input").val();
+    if ((newPath != "") && (newPath[0] == "/") && (newPath != oldPath)) {
+      $.ajax({
+        url: 'move',
+        type: 'POST',
+        data: {oldPath: oldPath, newPath: newPath},
+        dataType: 'json'
+      }).fail(function(jqXHR, textStatus, errorThrown) {
+        _showError("Failed moving \"" + oldPath + "\" to \"" + newPath + "\"", textStatus, errorThrown);
+      }).always(function() {
+        _reload(_path);
+      });
+    }
+  });
+  
   $("#reload").click(function(event) {
     _reload(_path);
   });