Prevent form validation and give a helpful error message when an user tries to submit a form with a file upload field that is above the maximum file size.

Author: lovasoa

CHANGELOG.md

@@ -9,6 +9,8 @@
  - Fix a bug that occured when no `database_url` was provided in the configuration file. SQLPage would generate an incorrect default SQLite database URL.
  - Add a new `background_color` attribute to the [card](https://sql.ophir.dev/documentation.sql?component=card#component) component to set the background color of the card.
  - new handlebars helper for [custom components](https://sql.ophir.dev/custom_components.sql): `{{app_config 'property'}}` to access the configuration object from the handlebars template.
+ - Prevent form validation and give a helpful error message when an user tries to submit a form with a file upload field that is above the maximum file size.
+   - ![file upload too large](https://github.com/lovasoa/SQLpage/assets/552629/1c684d33-49bd-4e49-9ee0-ed3f0d454ced)
 
 ## 0.23.0 (2024-06-09)
 

sqlpage/sqlpage.js

@@ -152,6 +152,23 @@ function sqlpage_map() {
     }
 }
 
+function sqlpage_form() {
+    const file_inputs = document.querySelectorAll("input[type=file][data-max-size]");
+    for (const input of file_inputs) {
+      const max_size = +input.dataset.maxSize;
+      input.addEventListener("change", function() {
+        input.classList.remove("is-invalid");
+        input.setCustomValidity("");
+        for (const {size} of this.files) {
+          if (size > max_size){
+            input.classList.add("is-invalid");
+            return input.setCustomValidity(`File size must be less than ${max_size/1000} kB.`);
+          }
+        }
+      });
+    }
+}
+
 function get_tabler_color(name) {
     return getComputedStyle(document.documentElement).getPropertyValue('--tblr-' + name);
 }
@@ -175,5 +192,6 @@ add_init_function(function init_components() {
   sqlpage_table();
   sqlpage_map();
   sqlpage_card();
+  sqlpage_form();
   load_scripts();
 });

sqlpage/templates/form.handlebars

@@ -104,6 +104,9 @@
                                 {{~#if autofocus}}autofocus {{/if~}}
                                 {{~#if disabled}}disabled {{/if~}}
                                 {{~#if readonly}}readonly {{/if~}}
+                                {{~#if (eq type "file")}}
+                                    data-max-size="{{app_config "max_uploaded_file_size"}}"
+                                {{/if~}}
                             />
                             {{#if suffix}}<span class="input-group-text">{{suffix}}</span>{{/if}}
                         </div>