Drag and drop file information display in cloud files upload form. No actual upload implemented yet.

view/tpl/cloud_actionspanel.tpl

@@ -17,4 +17,116 @@
 		<!-- Name (optional): <input type="text" name="name"> we should rather provide a rename action in edit form-->
 	</form>
 	<div class="clear"></div>
+    
+    <form id="upload" action="" method="POST" enctype="multipart/form-data">
+
+      <fieldset>
+
+      <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
+      <input type="hidden" name="sabreAction" value="put">
+      <div>
+          <label for="fileselect">Files to upload:</label>
+          <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
+          <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>
+
+    </form>
+    <div class="clear"></div>
+</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() {  
+// 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>"
+        );
+	}
+
+}
+
+</script>