feat: bootstrap filepicker (#1240)

packages/form-js-viewer/src/render/components/form-fields/FilePicker.js

@@ -0,0 +1,18 @@
+/**
+ * @returns {import("preact").JSX.Element}
+ */
+export function FilePicker() {
+  return null;
+}
+
+FilePicker.config = {
+  type: 'filepicker',
+  keyed: true,
+  label: 'File picker',
+  group: 'basic-input',
+  emptyValue: null,
+  sanitizeValue: ({ value }) => {
+    return value;
+  },
+  create: (options = {}) => ({ ...options }),
+};

packages/form-js-viewer/src/render/components/icons/index.js

@@ -20,6 +20,7 @@ import IFrameIcon from './IFrame.svg';
 import ImageIcon from './Image.svg';
 import GroupIcon from './Group.svg';
 import TableIcon from './Table.svg';
+import FilePickerIcon from './FilePicker.svg';
 
 export const iconsByType = (type) => {
   return {
@@ -44,6 +45,7 @@ export const iconsByType = (type) => {
     textfield: TextfieldIcon,
     textarea: TextareaIcon,
     table: TableIcon,
+    filepicker: FilePickerIcon,
     default: FormIcon,
   }[type];
 };

packages/form-js-viewer/src/render/components/index.js

@@ -19,6 +19,7 @@ import { ExpressionField } from './form-fields/ExpressionField';
 import { Textfield } from './form-fields/Textfield';
 import { Textarea } from './form-fields/Textarea';
 import { Table } from './form-fields/Table';
+import { FilePicker } from './form-fields/FilePicker';
 
 import { Label } from './Label';
 import { Description } from './Description';
@@ -52,6 +53,7 @@ export {
   Textfield,
   Textarea,
   Table,
+  FilePicker,
 };
 
 export const formFields = [
@@ -61,6 +63,7 @@ export const formFields = [
   Numberfield,
   Datetime,
   ExpressionField,
+  FilePicker,
 
   /* Selection */
   Checkbox,

packages/form-json-schema/src/defs/component.json

@@ -262,6 +262,16 @@
       "$id": "#/component/content",
       "description": "The content of a custom component.",
       "type": "string"
+    },
+    "accept": {
+      "$id": "#/component/accept",
+      "description": "Define the accepted file types.",
+      "type": "string"
+    },
+    "multiple": {
+      "$id": "#/component/multiple",
+      "description": "Allow multiple files to be selected.",
+      "type": "boolean"
     }
   },
   "required": ["type"]

packages/form-json-schema/src/defs/field-types/inputs.json

@@ -11,7 +11,8 @@
         "taglist",
         "textfield",
         "textarea",
-        "expression"
+        "expression",
+        "filepicker"
       ]
     }
   },

packages/form-json-schema/src/defs/rules/rules-allowed-properties.json

@@ -397,6 +397,24 @@
           "content": false
         }
       }
+    },
+    {
+      "if": {
+        "not": {
+          "properties": {
+            "type": {
+              "const": "filepicker"
+            }
+          },
+          "required": ["type"]
+        }
+      },
+      "then": {
+        "properties": {
+          "accept": false,
+          "multiple": false
+        }
+      }
     }
   ]
 }

packages/form-json-schema/src/defs/type.json

@@ -22,6 +22,7 @@
     "separator",
     "table",
     "iframe",
-    "expression"
+    "expression",
+    "filepicker"
   ]
 }

packages/form-json-schema/test/fixtures/accept-not-allowed.js

@@ -0,0 +1,27 @@
+export const form = {
+  type: 'default',
+  components: [
+    {
+      type: 'textfield',
+      key: 'textfield_g35o3e',
+      accept: '.png,.jpg',
+    },
+  ],
+};
+
+export const errors = [
+  {
+    instancePath: '/components/0/accept',
+    keyword: 'false schema',
+    message: 'boolean schema is false',
+    params: {},
+    schemaPath: '#/properties/components/items/allOf/1/allOf/20/then/properties/accept/false schema',
+  },
+  {
+    instancePath: '/components/0',
+    schemaPath: '#/properties/components/items/allOf/1/allOf/20/if',
+    keyword: 'if',
+    params: { failingKeyword: 'then' },
+    message: 'must match "then" schema',
+  },
+];

packages/form-json-schema/test/fixtures/filepicker.js

@@ -0,0 +1,13 @@
+export const form = {
+  type: 'default',
+  components: [
+    {
+      type: 'filepicker',
+      key: 'filepicker',
+      accept: '.png,.jpg',
+      multiple: true,
+    },
+  ],
+};
+
+export const errors = null;

packages/form-json-schema/test/fixtures/multiple-not-allowed.js

@@ -0,0 +1,27 @@
+export const form = {
+  type: 'default',
+  components: [
+    {
+      type: 'textfield',
+      key: 'textfield_g35o3e',
+      multiple: true,
+    },
+  ],
+};
+
+export const errors = [
+  {
+    instancePath: '/components/0/multiple',
+    keyword: 'false schema',
+    message: 'boolean schema is false',
+    params: {},
+    schemaPath: '#/properties/components/items/allOf/1/allOf/20/then/properties/multiple/false schema',
+  },
+  {
+    instancePath: '/components/0',
+    schemaPath: '#/properties/components/items/allOf/1/allOf/20/if',
+    keyword: 'if',
+    params: { failingKeyword: 'then' },
+    message: 'must match "then" schema',
+  },
+];

packages/form-json-schema/test/spec/validation.spec.js

@@ -174,6 +174,12 @@ describe('validation', function () {
     testForm('dataSource-not-allowed');
 
     testForm('columns-columnsExpression-exclusive');
+
+    testForm('filepicker');
+
+    testForm('accept-not-allowed');
+
+    testForm('multiple-not-allowed');
   });
 
   describe('rules - default', function () {