1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
function make_processing_indicator(elt) {
var count = 0;
return function() {
var message = "Finalising upload and saving file: "
if(count > 5) {
count = 1;
}
for(i = 0; i < count; i++) {
message = message + ".";
}
elt.innerHTML = message
count = count + 1
};
}
function make_progress_updater(file, indicator_elt) {
var progress_bar = indicator_elt.querySelector("#progress-bar");
var progress_text = indicator_elt.querySelector("#progress-text");
var extra_text = indicator_elt.querySelector("#progress-extra-text");
return function(event) {
if(event.loaded <= file.size) {
var percent = Math.round((event.loaded / file.size) * 100);
progress_bar.value = percent
progress_text.innerHTML = "Uploading: " + percent + "%";
extra_text.setAttribute("class", "hidden")
}
if(event.loaded == event.total) {
progress_bar.value = 100;
progress_text.innerHTML = "Uploaded: 100%";
extra_text.setAttribute("class", null);
intv = setInterval(make_processing_indicator(extra_text), 400);
setTimeout(function() {clearTimeout(intv);}, 20000);
}
};
}
function setup_cancel_upload(request, indicator_elt) {
document.getElementById("btn-cancel-upload").addEventListener(
"click", function(event) {
event.preventDefault();
request.abort();
indicator_elt.setAttribute("class", "hidden");
});
}
function setup_request(file, progress_indicator_elt) {
var request = new XMLHttpRequest();
var updater = make_progress_updater(file, progress_indicator_elt);
request.upload.addEventListener("progress", updater);
request.onload = function(event) {
document.location.assign(request.responseURL);
};
setup_cancel_upload(request, progress_indicator_elt)
return request;
}
function selected_filetype(radios) {
for(idx = 0; idx < radios.length; idx++) {
if(radios[idx].checked) {
return radios[idx].value;
}
}
}
function make_data_uploader(setup_formdata) {
return function(event) {
event.preventDefault();
var pindicator = document.getElementById("upload-progress-indicator");
var form = event.target;
var the_file = form.querySelector("input[type='file']").files[0];
if(the_file === undefined) {
form.querySelector("input[type='file']").parentElement.setAttribute(
"class", "invalid-input");
error_elt = form.querySelector("#no-file-error");
if(error_elt !== undefined) {
error_elt.setAttribute("style", "display: block;");
}
return false;
}
pindicator.setAttribute("class", "modal");
var formdata = setup_formdata(form);
document.getElementById("progress-filename").innerHTML = the_file.name;
var request = setup_request(
the_file, document.getElementById("upload-progress-indicator"));
request.open(form.getAttribute("method"), form.getAttribute("action"));
request.send(formdata);
return false;
}
}
function setup_upload_handlers(formid, datauploader) {
console.info("Setting up the upload handlers.")
upload_form = document.getElementById(formid);
upload_form.addEventListener("submit", datauploader);
}
|
