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
|
const progress_radius = 20;
const progress_len = progress_radius * 2 * Math.PI;
window.addEventListener('DOMContentLoaded', function() {
let pusher = document.getElementById('push-image-btn');
let total = 0;
let processed = 0;
let page_hard_lock = 1;
pusher.addEventListener('click', function(e) {
let input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.multiple = true;
input.addEventListener('change', (input_event) => {
console.log(input_event.target.files);
Array.prototype.forEach.call(input_event.target.files, file => {
let data = new FormData();
data.append('im', file);
let fileno = total;
total += 1;
let wrapper = append_template_for_file (file, fileno);
let progress = wrapper.querySelector('.progress-path');
let status = wrapper.querySelector('.progress-status');
let req = new XMLHttpRequest();
req.addEventListener('load', (e) => {
let bg = wrapper.querySelector('.progress-bg');
bg.style.filter = 'none';
progress.style.stroke = '#0000';
processed += 1;
if (processed == total && !page_hard_lock) {
location.reload();
}
});
req.upload.addEventListener('progress', (e) => {
let complete = 0;
if (e.lengthComputable) {
complete = e.loaded / e.total;
}
status.innerHTML = (e.loaded / 1000000).toFixed(2) + '/' + (e.total / 1000000).toFixed(2) + 'M';
progress.style.strokeDasharray = (complete * Math.PI * 2 * progress_radius).toString () + ',' + progress_len.toString();
});
req.open('POST', '/c/push');
req.send(data);
});
page_hard_lock = 0;
});
input.click();
});
});
function append_template_for_file (file, fileno) {
let imageurl = URL.createObjectURL(file);
let tmpl = document.querySelector('#progress-template');
let root = document.querySelector('#template-goes-here');
let newnode = document.importNode(tmpl.content, true);
let style = newnode.querySelector('.progress-bg').style;
style.background = 'url(' + imageurl + ')';
style.backgroundSize = 'cover';
style.backgroundPosition = 'center';
style.backgroundRepeat = 'no-repeat';
root.appendChild(newnode);
let appended = root.lastChild.previousSibling;
appended.setAttribute('id', 'progress-files-' + fileno.toString());
return appended;
}
|
