ajax drop uploads, progress display

This commit is contained in:
mappu 2017-10-08 14:49:00 +13:00
parent ba3f85919f
commit 2345447d59
3 changed files with 56 additions and 12 deletions

View File

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

View File

@ -4,6 +4,11 @@ var contented = (function ($, currentScriptPath) {
var baseURL = currentScriptPath.replace('sdk.js', ''); 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 * contented_SupportsDrop returns whether drag-and-drop is supported by this
* browser. * browser.
@ -39,7 +44,7 @@ var contented = (function ($, currentScriptPath) {
var extraText = ""; var extraText = "";
if (ret.MaxUploadBytes > 0) { if (ret.MaxUploadBytes > 0) {
extraText = " (max " + Math.floor(ret.MaxUploadBytes / (1024 * 1024)) + " MiB)"; extraText = " (max " + formatBytes(ret.MaxUploadBytes) + ")";
} }
$.get(baseURL + "widget.html", function (widgetHtml) { $.get(baseURL + "widget.html", function (widgetHtml) {
@ -101,32 +106,69 @@ var contented = (function ($, currentScriptPath) {
$(this).removeClass('is-dragging'); $(this).removeClass('is-dragging');
}); });
$f.find('.contented').on('drag', function (e) { $f.find('.contented').on('drop', function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
handleUploadFrom(event.originalEvent.dataTransfer.files); handleUploadFrom(e.originalEvent.dataTransfer.files);
}); });
$("body").append($f); $("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) { var handleUploadFrom = function (files) {
input.files = event.originalEvent.dataTransfer.files; setProgressCaption("Uploading, please wait...");
refreshCaption(); setProgressPercentage(0);
setType("progress"); setType("progress");
// Ajax uploader // Ajax uploader
// TODO var ajaxData = new FormData();
form.submit(); 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.");
}
});
} }
}); });
}); });
} }
// //

View File

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