progress.js

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