1 function showsize(bytes) {
2 return (bytes / 1024 / 1024).toFixed(2);
5 function enablesubmit(form) {
6 let submit = form.querySelector('input[type="submit"]:disabled');
8 submit.disabled = false;
11 function trackupload(input) {
12 var progress = document.getElementById('progress');
14 progress = document.createElement('DIV');
15 progress.id = 'progress';
16 progress.textContent = '0%';
17 progress.style.width = '0';
18 var bar = document.createElement('DIV');
19 bar.className = 'bar';
20 bar.appendChild(progress);
21 input.parentNode.insertBefore(bar, input.nextSibling);
24 var ajax = new XMLHttpRequest();
25 ajax.upload.addEventListener('progress', function (e) {
26 var percent = (e.loaded / e.total) * 100;
27 progress.style.width = percent + '%';
28 progress.textContent = Math.floor(percent) + '%';
29 progress.innerHTML += ' <small>(' + showsize(e.loaded) + ' / ' + showsize(e.total) + ' MB)</small>';
31 ajax.addEventListener('load', function (e) {
32 if (e.target.status == 200) {
33 progress.textContent = 'voltooid';
34 progress.innerHTML += ' <small>(' + showsize(input.files[0].size) + ' MB)</small>';
35 window.location.assign(e.target.response);
38 progress.textContent = 'fout';
39 progress.innerHTML += ': <small>' + e.target.responseText + '</small>';
40 enablesubmit(input.form);
42 progress.style.width = '100%';
43 input.parentNode.removeChild(cancel);
45 ajax.addEventListener('error', function (e) {
46 progress.textContent = 'mislukt: ' + e.target.responseText;
47 enablesubmit(input.form);
49 ajax.addEventListener('abort', function (e) {
50 progress.textContent = 'afgebroken';
51 input.parentNode.removeChild(cancel);
52 input.parentNode.removeChild(progress.parentNode);
53 enablesubmit(input.form);
56 ajax.open('POST', input.form.action);
57 ajax.setRequestHeader('Accept', 'text/plain')
58 ajax.send(new FormData(input.form));
60 var cancel = document.createElement('BUTTON');
61 cancel.textContent = 'Afbreken';
62 cancel.onclick = function () { ajax.abort() };
63 cancel.style.float = 'left';
64 input.parentNode.insertBefore(cancel, progress.parentNode);
67 document.addEventListener('DOMContentLoaded', e => {
68 for (let form of document.forms) {
69 form.addEventListener('submit', e => {
70 if (e.explicitOriginalTarget) {
71 e.explicitOriginalTarget.disabled = true;
73 if (upload = e.target.querySelector('input[type="file"]')) {