sqlpage / SQLPage

Fast SQL-only data application builder. Automatically build a UI on top of SQL queries.
https://sql.datapage.app
MIT License
1.57k stars 89 forks source link

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

Closed djyotta closed 3 months ago

djyotta commented 3 months 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 3 months 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