progress: disable submit button while posting

Prevent duplicates from unavoidable double clicks.

diff --git a/progress.js b/progress.js
index 575b98e83cf8ef74a833a471815fbf5132ded202..601fec0c57f65afb0bc281b5634dab3eb37307ed 100644 (file)
--- a/progress.js
+++ b/progress.js
@@ -2,11 +2,13 @@ function showsize(bytes) {
        return (bytes / 1024 / 1024).toFixed(2);
 }
 
-function trackupload(input) {
-       if (!input.value) {
-               return true; // default form action
-       }
+function enablesubmit(form) {
+       let submit = form.querySelector('input[type="submit"]:disabled');
+       if (!submit) return;
+       submit.disabled = false;
+}
 
+function trackupload(input) {
        var progress = document.getElementById('progress');
        if (!progress) {
                progress = document.createElement('DIV');
@@ -35,17 +37,20 @@ function trackupload(input) {
                else {
                        progress.textContent = 'fout';
                        progress.innerHTML += ': <small>' + e.target.responseText + '</small>';
+                       enablesubmit(input.form);
                }
                progress.style.width = '100%';
                input.parentNode.removeChild(cancel);
        }, false);
        ajax.addEventListener('error', function (e) {
                progress.textContent = 'mislukt: ' + e.target.responseText;
+               enablesubmit(input.form);
        }, false);
        ajax.addEventListener('abort', function (e) {
                progress.textContent = 'afgebroken';
                input.parentNode.removeChild(cancel);
                input.parentNode.removeChild(progress.parentNode);
+               enablesubmit(input.form);
        }, false);
 
        ajax.open('POST', input.form.action);
@@ -57,15 +62,20 @@ function trackupload(input) {
        cancel.onclick = function () { ajax.abort() };
        cancel.style.float = 'left';
        input.parentNode.insertBefore(cancel, progress.parentNode);
-       return false;
 }
 
 document.addEventListener('DOMContentLoaded', e => {
-       for (let row of document.forms[0].elements) {
-               if (row.type == 'file') {
-                       row.form.onsubmit = () => {
-                               return trackupload(row);
-                       };
-               }
+       for (let form of document.forms) {
+               form.addEventListener('submit', e => {
+                       if (e.explicitOriginalTarget) {
+                               e.explicitOriginalTarget.disabled = true;
+                       }
+                       if (upload = e.target.querySelector('input[type="file"]')) {
+                               if (upload.value) {
+                                       e.preventDefault();
+                                       trackupload(upload);
+                               }
+                       }
+               });
        }
 });