Added new widget to alert if a file is set at larger than 10 MB.

- Updated default widget to use template that adds a notification box.
- Added JS to add onchange & load events to look at the value in the input and trigger the notification & disable the form submits.

bookwyrm/static/js/bookwyrm.js

@@ -3,6 +3,7 @@
 
 let BookWyrm = new class {
     constructor() {
+        this.MAX_FILE_SIZE = 10000000
         this.initOnDOMLoaded();
         this.initReccuringTasks();
         this.initEventListeners();
@@ -32,15 +33,26 @@ let BookWyrm = new class {
                 'click',
                 this.back)
             );
+
+        document.querySelectorAll('input[type="file"]')
+            .forEach(node => node.addEventListener(
+                'change',
+                this.disableIfTooLarge.bind(this)
+            ));
     }
 
     /**
      * Execute code once the DOM is loaded.
      */
     initOnDOMLoaded() {
+        const bookwyrm = this
+
         window.addEventListener('DOMContentLoaded', function() {
             document.querySelectorAll('.tab-group')
                 .forEach(tabs => new TabGroup(tabs));
+            document.querySelectorAll('input[type="file"]').forEach(
+                bookwyrm.disableIfTooLarge.bind(bookwyrm)
+            )
         });
     }
 
@@ -284,4 +296,27 @@ let BookWyrm = new class {
             node.classList.remove(classname);
         }
     }
+
+    disableIfTooLarge(eventOrElement) {
+        const { addRemoveClass, MAX_FILE_SIZE } = this
+        const element = eventOrElement.currentTarget || eventOrElement
+
+        const submits = element.form.querySelectorAll('[type="submit"]')
+        const warns = element.parentElement.querySelectorAll('.file-too-big')
+        const isTooBig = element.files &&
+            element.files[0] &&
+            element.files[0].size > MAX_FILE_SIZE
+
+        if (isTooBig) {
+            submits.forEach(submitter => submitter.disabled = true)
+            warns.forEach(
+                sib => addRemoveClass(sib, 'is-hidden', false)
+            )
+        } else {
+            submits.forEach(submitter => submitter.disabled = false)
+            warns.forEach(
+                sib => addRemoveClass(sib, 'is-hidden', true)
+            )
+        }
+    }
 }