Multiple file upload by drag and drop with progress indicators and auto page reload

1 files changed, 20 insertions, 193 deletions

diff --git a/view/tpl/cloud_actionspanel.tpl b/view/tpl/cloud_actionspanel.tpl
index 86fda883c..fba457fdc 100644
--- a/view/tpl/cloud_actionspanel.tpl
+++ b/view/tpl/cloud_actionspanel.tpl
@@ -1,199 +1,26 @@
 <div id="files-mkdir-tools" class="section-content-tools-wrapper">
-	<label for="files-mkdir">{{$folder_header}}</label>
-	<form method="post" action="">
-		<input type="hidden" name="sabreAction" value="mkcol">
-		<input id="files-mkdir" type="text" name="name" class="form-control form-group">
-		<button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$folder_submit}}">{{$folder_submit}}</button>
-	</form>
-	<div class="clear"></div>
+  <label for="files-mkdir">{{$folder_header}}</label>
+  <form method="post" action="">
+    <input type="hidden" name="sabreAction" value="mkcol">
+    <input id="files-mkdir" type="text" name="name" class="form-control form-group">
+    <button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$folder_submit}}">{{$folder_submit}}</button>
+  </form>
+  <div class="clear"></div>
 </div>
 <div id="files-upload-tools" class="section-content-tools-wrapper">
-	{{if $quota.limit || $quota.used}}<div class="{{if $quota.warning}}section-content-danger-wrapper{{else}}section-content-info-wrapper{{/if}}">{{if $quota.warning}}<strong>{{$quota.warning}} </strong>{{/if}}{{$quota.desc}}</div>{{/if}}
-	<!--
-    <label for="files-upload">{{$upload_header}}</label>
-	<form method="post" action="" enctype="multipart/form-data">
-		<input type="hidden" name="sabreAction" value="put">
-		<input class="form-group" id="files-upload" type="file" name="file">
-		<button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button>
-	</form>
-	<div class="clear"></div>
-    -->
-    <form id="ajax-upload-files" action="" method="POST" enctype="multipart/form-data">
-		<input type="hidden" name="sabreAction" value="put">
-
-      <fieldset>
-
-      <input type="hidden" name="sabreAction" value="put">
-      <div>
-          <label for="fileselect">Files to upload:</label>
-<!--          <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />-->
-<!--          <input type="file" id="fileselect" name="fileselect[]"  />-->
-          <div id="filedrag">or drop files here</div>
-      </div>
-
-      <div id="submitbutton">
-          <button type="submit">Upload Files</button>
-      </div>
-
-      </fieldset>
-    <div id="file-upload-list"></div>
-    
-    <div id="profile-rotator-wrapper">
-        <div id="profile-rotator"></div>
+  {{if $quota.limit || $quota.used}}<div class="{{if $quota.warning}}section-content-danger-wrapper{{else}}section-content-info-wrapper{{/if}}">{{if $quota.warning}}<strong>{{$quota.warning}} </strong>{{/if}}{{$quota.desc}}</div>{{/if}}
+  <form id="ajax-upload-files" method="post" action="" enctype="multipart/form-data">
+    <input type="hidden" name="sabreAction" value="put">
+    <div>
+      <div id="filedrag" style="height: 7em;"><br>{{$dragdroptext}}</div>
     </div>
-    </form>
+    <div id="file-upload-list"></div>
+    <div class="clear"></div>
+    <label for="files-upload">{{$upload_header}}</label>
     <div class="clear"></div>
+    <input class="form-group pull-left" id="files-upload" type="file" name="file" style="width: 70%;">
+    <button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button>
+  </form>
+  <div class="clear"></div>
+  <hr/>
 </div>
-
-<style>  
-
-  #filedrag
-  {
-      display: none;
-      font-weight: bold;
-      text-align: center;
-      padding: 1em 0;
-      margin: 1em 0;
-      color: #555;
-      border: 2px dashed #555;
-      border-radius: 7px;
-      cursor: default;
-  }
-
-  #filedrag.hover
-  {
-      color: #f00;
-      border-color: #f00;
-      border-style: solid;
-      box-shadow: inset 0 3px 4px #888;
-  }
-
-</style>
-
-<script>
-$(document).ready(function() {  
-//  
-//    try {
-//        var file_uploader = new window.AjaxUpload('submitbutton',
-//        { action: 'cloud',
-//            name: 'userfile',
-//            title: 'Upload',
-//            onSubmit: function(file,ext) { $('#profile-rotator').spin('tiny'); },
-//            onComplete: function(file,response) {
-//                $("#file-upload-list").append("Upload complete!");
-//                $('#profile-rotator').spin(false);
-//            }
-//        });
-//    } catch(e) {
-//    }
-    // call initialization file
-    if (window.File && window.FileList && window.FileReader) {
-        DragDropUploadInit();
-    }
-});
-
-//
-// initialize
-function DragDropUploadInit() {
-
-	var fileselect = $("#fileselect"),
-		filedrag = $("#filedrag"),
-		submitbutton = $("#submitbutton");
-
-	// file select
-	fileselect.on("change", FileSelectHandler);
-
-	// is XHR2 available?
-	var xhr = new XMLHttpRequest();
-	if (xhr.upload) {
-	
-		// file drop
-		filedrag.on("dragover", FileDragHover);
-		filedrag.on("dragleave", FileDragHover);
-		filedrag.on("drop", FileSelectHandler);
-		filedrag.show();
-		
-		// remove submit button
-		submitbutton.hide();
-	}
-    
-
-}
-
-// file drag hover
-function FileDragHover(e) {
-	e.stopPropagation();
-	e.preventDefault();
-	e.target.className = (e.type == "dragover" ? "hover" : "");
-}
-
-// file selection
-function FileSelectHandler(e) {
-
-	// cancel event and hover styling
-	FileDragHover(e);
-
-	// fetch FileList object
-	var files = e.target.files || e.originalEvent.dataTransfer.files;
-    $("#file-upload-list").empty();
-	// process all File objects
-	for (var i = 0, f; f = files[i]; i++) {
-		$("#file-upload-list").append(
-          "<p>File information: <strong>" + f.name +
-          "</strong> type: <strong>" + f.type +
-          "</strong> size: <strong>" + f.size +
-          "</strong> bytes</p>"
-        );
-        DragDropUploadFile(f);
-	}
-
-}
-
-// upload  files
-function DragDropUploadFile(file) {
-
-    // Serialize the data in the form
-    //var serializedData = $('#ajax-upload-files').serialize();
-//
-//    $.ajax({
-//      type: "POST",
-//      url: '',
-//      data: serializedData,
-//      success: function(result){
-//        //window.console.log(result);
-//        return false;
-//      }
-//    });
-//    
-
-    var xhr = new XMLHttpRequest();
-    xhr.withCredentials = true;
-    (xhr.upload || xhr).addEventListener('progress', function(e) {
-        var done = e.position || e.loaded
-        var total = e.totalSize || e.total;
-        console.log('xhr progress: ' + Math.round(done/total*100) + '%');
-    });
-    xhr.addEventListener('load', function(e) {
-        //console.log('xhr upload complete', e, this.responseText);
-        console.log('xhr upload complete', e);
-    });
-    xhr.open('post', 'cloud', true);
-	
-    var data = new FormData(document.getElementById("ajax-upload-files"));
-    data.append('file', file);
-    xhr.send(data);
-//
-//	var xhr = new XMLHttpRequest();
-//	if (xhr.upload) {
-//		// start upload
-//        window.console.log("Uploading...");
-//		xhr.open("POST", $("#ajax-upload-files").action, true);
-//		xhr.setRequestHeader("X_FILENAME", file.name);
-//		xhr.send(file);
-//
-//	}
-
-}
-
-
-</script>
\ No newline at end of file