ajax drop uploads, progress display

static/index.html

@@ -26,8 +26,8 @@ html, body {
 		<script type="text/javascript" src="/sdk.js"></script>
         <script type="text/javascript">
 "use strict";
-contented.init("#surrogate-area", function(itm) {
-    console.log(itm);
+contented.init("#surrogate-area", function(items) {
+    console.log(items);
 });
 		</script>
 	</body>

static/sdk.js

@@ -4,6 +4,11 @@ var contented = (function ($, currentScriptPath) {
 
     var baseURL = currentScriptPath.replace('sdk.js', '');
 
+    var formatBytes = function(bytes) {
+        // FIXME
+        return Math.floor(bytes / (1024 * 1024)) + " MiB";
+    };
+
     /**
      * contented_SupportsDrop returns whether drag-and-drop is supported by this
      * browser.
@@ -39,7 +44,7 @@ var contented = (function ($, currentScriptPath) {
 
             var extraText = "";
             if (ret.MaxUploadBytes > 0) {
-                extraText = " (max " + Math.floor(ret.MaxUploadBytes / (1024 * 1024)) + " MiB)";
+                extraText = " (max " + formatBytes(ret.MaxUploadBytes) + ")";
             }
 
             $.get(baseURL + "widget.html", function (widgetHtml) {
@@ -101,32 +106,69 @@ var contented = (function ($, currentScriptPath) {
                     $(this).removeClass('is-dragging');
                 });
 
-                $f.find('.contented').on('drag', function (e) {
+                $f.find('.contented').on('drop', function (e) {
                     e.preventDefault();
                     e.stopPropagation();
-                    handleUploadFrom(event.originalEvent.dataTransfer.files);
+                    handleUploadFrom(e.originalEvent.dataTransfer.files);
                 });
 
                 $("body").append($f);
 
+                var setProgressCaption = function(message) {
+                    $f.find(".contented-if-progress label").text(message);
+                };
+                var setProgressPercentage = function(frc) {
+                    $f.find(".contented-progress-element").css('width', (frc * 100) + "%");
+                };
+
                 var handleUploadFrom = function (files) {
 
-                    input.files = event.originalEvent.dataTransfer.files;
-                    refreshCaption();
+                    setProgressCaption("Uploading, please wait...");
+                    setProgressPercentage(0);
                     setType("progress");
 
                     // Ajax uploader
-                    // TODO
-                    form.submit();
+                    var ajaxData = new FormData();
+                    for (var i = 0; i < files.length; ++i) {
+                        ajaxData.append("f", files[i]);
+                    }
+
+                    // ajax request
+                    $.ajax({
+                        url: baseURL + "upload",
+                        type: "POST",
+                        data: ajaxData,
+                        dataType: 'json', // response type
+                        cache: false,
+                        contentType: false,
+                        processData: false,
+                        beforeSend: function (xhr) {
+                            xhr.on('progress', function (ev) {
+                                if (ev.lengthComputable) {
+                                    setProgressCaption("Uploaded " + formatBytes(evt.loaded) + " of " + formatBytes(evt.total) + "...");
+                                    setProgressPercentage(evt.loaded / evt.total);
+                                }
+                            });
+                        },
+                        complete: function () {
+                            setProgressCaption("Upload complete.");
+                            setProgressPercentage(1);
+                        },
+                        success: function (data) {
+                            onUploaded(data);
+                            ourClose();
+                        },
+                        error: function () {
+                            setProgressCaption("Upload failed.");
+                        }
+                    });
 
                 }
 
             });
 
-
         });
 
-
     }
 
     //

static/widget.html

@@ -82,8 +82,10 @@
 .contented-progress-bar {
     display: block;
     width:90%;
+    margin:0.5em auto 0 auto;
+
     height:16px;
-    border-radius:4px;
+    border-radius:8px;
     background:lightgrey;
     position:relative;
 }