Add fileFieldTag helper

mojolicious · Oct 19, 2022 · 33192c1 · 33192c1
1 parent add9531
commit 33192c1
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,7 +6,7 @@
 ### Features
 
   * Added `isEmpty` getter to `Params` class.
-  * Added `passwordFieldTag` helper.
+  * Added `fileFieldTag` and `passwordFieldTag` helpers.
 
 ## v1.7.0 (2022-10-14)
 

diff --git a/docs/Cheatsheet.md b/docs/Cheatsheet.md
@@ -469,6 +469,15 @@ Generate `<input>` tag of type `checkbox`. Previous input values will automatica
 
 Generate `<link>` tag for a favison, defaults to the [mojo.js](https://mojojs.org) favicon.
 
+#### fileFieldTag
+
+```
+%= await ctx.fileFieldTag('pass')
+%= await ctx.fileFieldTag('pass', {class: 'password'})
+```
+
+Generate `<input>` tag of type `file`.
+
 #### formFor
 
 ```

diff --git a/src/plugins/default-helpers.ts b/src/plugins/default-helpers.ts
@@ -42,6 +42,9 @@ export default function defaultHelpersPlugin(app: MojoApp): void {
 
   app.addHelper('buttonTo', buttonTo);
   app.addHelper('faviconTag', faviconTag);
+  app.addHelper('fileFieldTag', (ctx: MojoContext, name: string, attrs: TagAttrs = {}) => {
+    return tag(ctx, 'input', {...attrs, type: 'file', name});
+  });
   app.addHelper('formFor', formFor);
   app.addHelper('imageTag', imageTag);
   app.addHelper('linkTo', linkTo);

diff --git a/test/plugin-app.js b/test/plugin-app.js
@@ -62,7 +62,11 @@ t.test('Plugin app', async t => {
       nine: 'Nine&',
       ten: 'Ten',
       eleven: 'on',
-      twelve: 'on'
+      twelve: 'on',
+      thirteen: 'Thirteen',
+      fourteen: 'Fourteen',
+      fifteen: 'Fifteen',
+      sixteen: 'Sixteen'
     };
     (await ua.getOk('/form_helpers', {form})).statusIs(200).bodyIs(formTagHelpersFilledResult);
   });
@@ -106,6 +110,8 @@ Radio2: <%= await ctx.radioButtonTag('eleven', {class: 'bar'}) %>
 Radio3: <%= await ctx.radioButtonTag('twelve') %>
 Pass1: <%= await ctx.passwordFieldTag('thirteen') %>
 Pass2: <%= await ctx.passwordFieldTag('fourteen', {class: 'bar'}) %>
+File1: <%= await ctx.fileFieldTag('fifteen') %>
+File2: <%= await ctx.fileFieldTag('sixteen', {class: 'bar'}) %>
 `;
 
 const formTagHelpersResult = `
@@ -126,6 +132,8 @@ Radio2: <input class="bar" type="radio" name="eleven">
 Radio3: <input type="radio" name="twelve">
 Pass1: <input type="password" name="thirteen">
 Pass2: <input class="bar" type="password" name="fourteen">
+File1: <input type="file" name="fifteen">
+File2: <input class="bar" type="file" name="sixteen">
 `;
 
 const formTagHelpersFilledResult = `
@@ -146,6 +154,8 @@ Radio2: <input class="bar" type="radio" name="eleven" checked>
 Radio3: <input type="radio" name="twelve" checked>
 Pass1: <input type="password" name="thirteen">
 Pass2: <input class="bar" type="password" name="fourteen">
+File1: <input type="file" name="fifteen">
+File2: <input class="bar" type="file" name="sixteen">
 `;
 
 const tagHelperPlugin = `