lovasoa / SQLpage

SQL-only webapp builder, empowering data analysts to build websites and applications quickly
https://sql.ophir.dev
MIT License
880 stars 62 forks source link

Support multipart/form-data as encoding type on form component #458

Closed djyotta closed 5 days ago

djyotta commented 1 week ago

What are you building with SQLPage ?

A utility to merge yaml files.

In this use case, copy-paste is unfortunately the most straightforward way to interact with the UI. Uploading the files to merge is too hard.

The files are fairly small, but are large enough to hit the URL encoded data limit.

Using multipart/form-data as encoding type would be ideal in this case.

For now I've patched the form component:

--- sqlpage/templates/form.handlebars   2024-06-25 10:14:48.295321207 +1200
+++ /home/daniels/git/SQLpage/sqlpage/templates/form.handlebars 2024-06-24 09:31:31.023355037 +1200
@@ -2,7 +2,6 @@
     {{#if id}}id="{{id}}"{{/if}}
     class="my-3 {{class}}"
     method="{{default method "post"}}"
-    {{#if formenctype}}formenctype="{{formenctype}}"{{/if}}
     {{#if action}}action="{{action}}"
     {{else}}
     {{#if id}}action="#{{id}}"{{/if}}
@@ -119,7 +118,7 @@
                 </label>
             {{/if}}
             {{/if}}
-            {{#if and (eq type "file") (not formenctype)}}
+            {{#if (eq type "file")}}
                 <!-- Change the form encoding type if this is a file input-->
                 {{#delay}}formenctype="multipart/form-data"{{/delay}}
             {{/if}}
@@ -132,7 +131,6 @@
             {{#if validate_outline}} btn-outline-{{validate_outline}} {{/if}}
             {{#if validate_size}} btn-{{validate_size}} {{/if}}"
             {{flush_delayed}}
-            {{#if formenctype}}formenctype="{{formenctype}}"{{/if}}
             type="submit"
             {{#if validate}}value="{{validate}}"{{/if}}>
         {{/if}}
@@ -146,4 +144,4 @@
             value="{{reset}}">
         {{/if}}
     </fieldset>
-</form>
\ No newline at end of file
+</form>

My patch is simple and just makes explicit encoding type take precedence.

Describe the solution you'd like

I'd like to be able to explicitly set the formenctype on the form component.

Currently this is only set when one of the form fields is file type.

I think this behaviour is good, but we should also allow the user to specify the formenctype also.

Describe alternatives you've considered

Uploading the YAML files instead. Unfortunately this is much more steps for the user than simply copy-pasting the content from the text editor straight into the UI.

djyotta commented 1 week ago

I've just seen that formenctype is applied to each field, except textarea and select. I really only need this on a textarea, so will update my PR