added file size validation

the_works/static/js/fileinput.js

@@ -2,28 +2,28 @@
  * FILE INPUT FUNCTIONS
  */
 function initFileinput(id_stub, current_stub, modal_id) {
-  // add input element event handler
+  // add "change" event listener to file input element 
   document.getElementById(id_stub + "-upload").addEventListener("change", handleFileinputChange);
-  // add event handler to modal that shows the current image if the modal was raised by an update action, and hides it otherwise
+  // add "toggle" event listener to modal that shows the current image if the modal was raised by an update action, and hides it otherwise
   document.getElementById(modal_id).addEventListener("toggle", handleModalToggle);
 }    
   
 
 function handleFileinputChange(event) {
-  let id_stub = event.target.id.split("-")[0];
+  let fi = event.target
+  let id_stub = fi.id.split("-")[0];
 
   // mark change
   document.getElementById(id_stub + "-haschanged").value += "+";
-console.dir(event);
   
   // no file chosen -> show placeholder
-  if ( ! event.target.files.length ) {
+  if ( ! fi.files.length ) {
     showOrHideThumbnail(id_stub, "hide");
     return true;
   }
 
   // set img src to the uploaded file
-  let f = event.target.files[0];
+  let f = fi.files[0];
   let tn = document.getElementById(id_stub + "-thumbnail");
   tn.src = URL.createObjectURL(f);
 
@@ -39,7 +39,7 @@ console.dir(event);
     document.getElementById(id_stub + "-hoehe").innerText = tn.naturalHeight;
     // remove image object from memory 
     URL.revokeObjectURL(tn.src);
-  };
+  }
 }
 
 
@@ -90,3 +90,16 @@ function showOrHideThumbnail(id_stub, mode) {
   }
 }
 
+
+function validate_filesize(input_id="titelbild-upload") {
+  let fi = document.getElementById(input_id);
+console.dir(fi);
+  fi.setCustomValidity("");
+  fi.setAttribute("aria-invalid", "false");
+
+  if ( fi.files[0].size > fi.dataset.maxfilesize ) { 
+    fi.setCustomValidity("Datei ist zu groß, bitte kleinere auswählen.");
+    fi.setAttribute("aria-invalid", "true");
+    fi.reportValidity();
+  }
+}

the_works/templates/views/titelbild.html

@@ -58,9 +58,9 @@
         </label>
         <label for="titelbild-upload" role="button">Bild aussuchen</label>
         <div class="thumbnail-div">
-          <a class="thumbnail-a display-none" id="titelbild-bild" href="" title="zum Originalbild">
+          <span class="display-none" id="titelbild-bild">
             <img class="thumbnail-img" id="titelbild-thumbnail" alt="Thumbnail" src="" />
-          </a>
+          </span>
           <div class="placeholder" id="titelbild-placeholder">
             <svg viewbox="0 0 90 128">
               <use href="#placeholder" />
@@ -69,13 +69,14 @@
         </div>
         <div id="titelbild-info" class="display-none">
           <small>
-            <span id="titelbild-dateiname"></span> Bytes<br />
+            <span id="titelbild-dateiname"></span><br />
             <span id="titelbild-dateigroesse"></span> Bytes, <span id="titelbild-breite"></span>x<span id="titelbild-hoehe"></span> px
           </small>
         </div>
         <div id="titelbild-controls">
-          <input type="file" id="titelbild-upload" name="form_Titelbild" aria-label="Titelbild" placeholder="kein Titelbild" accept="image/*"/>
+          <input type="file" id="titelbild-upload" name="form_Titelbild" aria-label="Titelbild" placeholder="kein Titelbild" accept="image/*" data-maxfilesize="{{ config['MAX_CONTENT_LENGTH'] }}" required />
-          <small>max. Dateigröße: 2 MB</small>
+          <small id="titelbild-toolarge" class="display-none">Datei ist zu groß!</small>
+          <small>max. Dateigröße: {{ config['MAX_CONTENT_LENGTH'] }} Bytes</small>
           <input type="hidden" id="titelbild-haschanged" name="form_Titelbild_haschanged" value="" />
         </div>
       </section>
@@ -96,7 +97,7 @@
       </section>
 
       <footer class="grid">
-        <button id="form_submit" type="submit" formmethod="post" formaction="{{ url_for('titelbild.create') }}">OK</button>
+        <button id="form_submit" type="submit" onclick="return validate_filesize()" formmethod="post" formaction="{{ url_for('titelbild.create') }}">OK</button>
         <button class="secondary" aria-label="close" formmethod="dialog" formnovalidate>Abbrechen</button>
       </footer>
     </form>