File Upload Progress display base implementation
This commit is contained in:
parent
d322905b35
commit
288ab9834a
|
@ -1064,8 +1064,7 @@ int main(int argc, char *argv[]) {
|
|||
});
|
||||
|
||||
|
||||
CROW_ROUTE(app, "/fileuploadtestExecution")
|
||||
.methods(crow::HTTPMethod::Post)([](const crow::request& postRequest) {
|
||||
CROW_ROUTE(app, "/fileuploadtestExecution").methods(crow::HTTPMethod::Post)([](const crow::request& postRequest) {
|
||||
crow::multipart::message multipartMessage(postRequest);
|
||||
for (const auto& part : multipartMessage.part_map)
|
||||
{
|
||||
|
|
|
@ -2,6 +2,45 @@
|
|||
<html>
|
||||
<head>
|
||||
{{> templateIncludes/style.css.html}}
|
||||
<script type="text/javascript">
|
||||
|
||||
function _(el) {
|
||||
return document.getElementById(el);
|
||||
}
|
||||
|
||||
function upload() {
|
||||
var file = _("FILE_SUBMISSION").files[0];
|
||||
var formdata = new FormData();
|
||||
formdata.append("FILE_SUBMISSION", file);
|
||||
var ajax = new XMLHttpRequest();
|
||||
ajax.upload.addEventListener("progress", progressHandler, false);
|
||||
ajax.addEventListener("load", completeHandler, false);
|
||||
ajax.addEventListener("error", errorHandler, false);
|
||||
ajax.addEventListener("abort", abortHandler, false);
|
||||
ajax.open("POST", "/fileuploadtestExecution");
|
||||
ajax.send(formdata);
|
||||
}
|
||||
|
||||
function progressHandler(event) {
|
||||
_("loadedtotal").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
|
||||
var percent = (event.loaded / event.total) * 100;
|
||||
_("progressBar").value = Math.round(percent);
|
||||
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
|
||||
}
|
||||
|
||||
function completeHandler(event) {
|
||||
_("status").innerHTML = event.target.responseText;
|
||||
_("progressBar").value = 0;
|
||||
}
|
||||
|
||||
function errorHandler(event) {
|
||||
_("status").innerHTML = "Upload Failed";
|
||||
}
|
||||
|
||||
function abortHandler(event) {
|
||||
_("status").innerHTML = "Upload Aborted";
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<form method="post" enctype="multipart/form-data" action="/fileuploadtestExecution">
|
||||
|
@ -14,6 +53,12 @@
|
|||
<input type="submit"/>
|
||||
</p>
|
||||
</form>
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
<input type="file" name="FILE_SUBMISSION" id="FILE_SUBMISSION" onchange="upload()"><br>
|
||||
<progress id="progressBar" value="0" max="100" style="width:250px;"></progress>
|
||||
<h2 id="status"></h2>
|
||||
<p id="loadedtotal"></p>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
Loading…
Reference in New Issue