code.ivysaur.me/contented
1
0
Fork 0
Code Issues 8 Pull Requests Releases 5 Wiki Activity

ajax drop uploads, progress display

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/index.html
View File

@ -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>

60
static/sdk.js
View File

@ -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.");
}
});
}
});
});
}
//

4
static/widget.html
View File

@ -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;
}