feat: add filepicker properties panel

packages/form-js-editor/src/features/properties-panel/Util.js

@@ -86,6 +86,7 @@ export const INPUTS = [
   'taglist',
   'textfield',
   'textarea',
+  'filepicker',
 ];
 
 export const OPTIONS_INPUTS = ['checklist', 'radio', 'select', 'taglist'];

packages/form-js-editor/src/features/properties-panel/entries/AcceptEntry.js

@@ -0,0 +1,65 @@
+import { get } from 'min-dash';
+
+import { useService, useVariables } from '../hooks';
+
+import { FeelTemplatingEntry, isFeelEntryEdited } from '@bpmn-io/properties-panel';
+
+export function AcceptEntry(props) {
+  const { editField, field } = props;
+
+  const entries = [];
+
+  entries.push({
+    id: 'accept',
+    component: Accept,
+    editField: editField,
+    field: field,
+    isEdited: isFeelEntryEdited,
+    isDefaultVisible: (field) => field.type === 'filepicker',
+  });
+
+  return entries;
+}
+
+function Accept(props) {
+  const { editField, field, id } = props;
+
+  const debounce = useService('debounce');
+
+  const variables = useVariables().map((name) => ({ name }));
+
+  const path = ['accept'];
+
+  const getValue = () => {
+    return get(field, path, '');
+  };
+
+  const setValue = (value) => {
+    return editField(field, path, value);
+  };
+
+  return FeelTemplatingEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Supported file formats',
+    singleLine: true,
+    setValue,
+    variables,
+    description,
+  });
+}
+
+// helpers //////////
+
+const description = (
+  <>
+    A comma-separated list of{' '}
+    <a
+      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers"
+      target="_blank">
+      file type specifiers
+    </a>
+  </>
+);

packages/form-js-editor/src/features/properties-panel/entries/DefaultValueEntry.js

@@ -36,29 +36,29 @@ export function DefaultValueEntry(props) {
     };
   }
 
-  const defaulValueBase = {
+  const defaultValueBase = {
     editField,
     field,
     id: 'defaultValue',
     label: 'Default value',
   };
 
   entries.push({
-    ...defaulValueBase,
+    ...defaultValueBase,
     component: DefaultValueCheckbox,
     isEdited: isSelectEntryEdited,
     isDefaultVisible: isDefaultVisible((field) => field.type === 'checkbox'),
   });
 
   entries.push({
-    ...defaulValueBase,
+    ...defaultValueBase,
     component: DefaultValueNumber,
     isEdited: isTextFieldEntryEdited,
     isDefaultVisible: isDefaultVisible((field) => field.type === 'number'),
   });
 
   entries.push({
-    ...defaulValueBase,
+    ...defaultValueBase,
     component: DefaultValueSingleSelect,
     isEdited: isSelectEntryEdited,
     isDefaultVisible: isDefaultVisible((field) => field.type === 'radio' || field.type === 'select'),
@@ -67,14 +67,14 @@ export function DefaultValueEntry(props) {
   // todo(Skaiir): implement a multiselect equivalent (cf. https://github.com/bpmn-io/form-js/issues/265)
 
   entries.push({
-    ...defaulValueBase,
+    ...defaultValueBase,
     component: DefaultValueTextfield,
     isEdited: isTextFieldEntryEdited,
     isDefaultVisible: isDefaultVisible((field) => field.type === 'textfield'),
   });
 
   entries.push({
-    ...defaulValueBase,
+    ...defaultValueBase,
     component: DefaultValueTextarea,
     isEdited: isTextAreaEntryEdited,
     isDefaultVisible: isDefaultVisible((field) => field.type === 'textarea'),

packages/form-js-editor/src/features/properties-panel/entries/DescriptionEntry.js

@@ -17,7 +17,7 @@ export function DescriptionEntry(props) {
     editField: editField,
     field: field,
     isEdited: isFeelEntryEdited,
-    isDefaultVisible: (field) => INPUTS.includes(field.type),
+    isDefaultVisible: (field) => field.type !== 'filepicker' && INPUTS.includes(field.type),
   });
 
   return entries;

packages/form-js-editor/src/features/properties-panel/entries/MultipleEntry.js

@@ -0,0 +1,52 @@
+import { get } from 'min-dash';
+
+import { useService, useVariables } from '../hooks';
+
+import { FeelToggleSwitchEntry, isFeelEntryEdited } from '@bpmn-io/properties-panel';
+
+export function MultipleEntry(props) {
+  const { editField, field } = props;
+
+  const entries = [];
+
+  entries.push({
+    id: 'multiple',
+    component: Multiple,
+    editField: editField,
+    field: field,
+    isEdited: isFeelEntryEdited,
+    isDefaultVisible: (field) => field.type === 'filepicker',
+  });
+
+  return entries;
+}
+
+function Multiple(props) {
+  const { editField, field, id } = props;
+
+  const debounce = useService('debounce');
+
+  const variables = useVariables().map((name) => ({ name }));
+
+  const path = ['multiple'];
+
+  const getValue = () => {
+    return get(field, path, '');
+  };
+
+  const setValue = (value) => {
+    return editField(field, path, value);
+  };
+
+  return FeelToggleSwitchEntry({
+    debounce,
+    element: field,
+    feel: 'optional',
+    getValue,
+    id,
+    label: 'Upload multiple files',
+    inline: true,
+    setValue,
+    variables,
+  });
+}

packages/form-js-editor/src/features/properties-panel/entries/index.js

@@ -39,3 +39,5 @@ export { RowCountEntry } from './RowCountEntry';
 export { HeadersSourceSelectEntry } from './HeadersSourceSelectEntry';
 export { ColumnsExpressionEntry } from './ColumnsExpressionEntry';
 export { StaticColumnsSourceEntry } from './StaticColumnsSourceEntry';
+export { AcceptEntry } from './AcceptEntry';
+export { MultipleEntry } from './MultipleEntry';

packages/form-js-editor/src/features/properties-panel/groups/GeneralGroup.js

@@ -23,6 +23,8 @@ import {
   TableDataSourceEntry,
   PaginationEntry,
   RowCountEntry,
+  AcceptEntry,
+  MultipleEntry,
 } from '../entries';
 
 export function GeneralGroup(field, editField, getService) {
@@ -46,6 +48,8 @@ export function GeneralGroup(field, editField, getService) {
     ...ImageSourceEntry({ field, editField }),
     ...AltTextEntry({ field, editField }),
     ...SelectEntries({ field, editField }),
+    ...AcceptEntry({ field, editField }),
+    ...MultipleEntry({ field, editField }),
     ...DisabledEntry({ field, editField }),
     ...ReadonlyEntry({ field, editField }),
     ...TableDataSourceEntry({ field, editField }),

packages/form-js-editor/test/spec/features/properties-panel/PropertiesPanel.spec.js

@@ -3416,6 +3416,26 @@ describe('properties panel', function () {
         });
       });
     });
+
+    describe('filepicker', function () {
+      it('entries', function () {
+        // given
+        const field = schema.components.find(({ key }) => key === 'files');
+
+        bootstrapPropertiesPanel({
+          container,
+          field,
+        });
+
+        // then
+        expectPanelStructure(container, {
+          General: ['Field label', 'Key', 'Supported file formats', 'Upload multiple files', 'Disabled', 'Read only'],
+          Condition: [],
+          Validation: ['Required'],
+          'Custom properties': [],
+        });
+      });
+    });
   });
 
   describe('custom properties', function () {

packages/form-js-editor/test/spec/features/properties-panel/groups/GeneralGroup.spec.js

@@ -280,7 +280,7 @@ describe('GeneralGroup', function () {
 
     it('should render for INPUTS', function () {
       // given
-      for (const type of INPUTS) {
+      for (const type of INPUTS.filter((type) => type !== 'filepicker')) {
         const field = { type };
 
         // when
@@ -511,11 +511,14 @@ describe('GeneralGroup', function () {
     });
 
     describe('for all other INPUTS', () => {
-      const otherInputTypes = INPUTS.filter((i) => !OPTIONS_INPUTS.includes(i));
+      const nonDefaultValueInputs = new Set(['datetime', 'filepicker']);
+      const defaultValueInputs = INPUTS.filter(
+        (input) => !OPTIONS_INPUTS.includes(input) && !nonDefaultValueInputs.has(input),
+      );
 
       it('should render', function () {
         // given
-        for (const type of otherInputTypes) {
+        for (const type of defaultValueInputs) {
           const field = { type };
 
           // when
@@ -524,8 +527,22 @@ describe('GeneralGroup', function () {
           // then
           const defaultValueEntry = findEntry('defaultValue', container);
 
-          if (type === 'datetime') expect(defaultValueEntry).to.not.exist;
-          else expect(defaultValueEntry).to.exist;
+          expect(defaultValueEntry).to.exist;
+        }
+      });
+
+      it('should not render', function () {
+        // given
+        for (const type of nonDefaultValueInputs) {
+          const field = { type };
+
+          // when
+          const { container } = renderGeneralGroup({ field });
+
+          // then
+          const defaultValueEntry = findEntry('defaultValue', container);
+
+          expect(defaultValueEntry).to.not.exist;
         }
       });
     });

packages/form-js-editor/test/spec/form.json

@@ -238,6 +238,14 @@
       "alt": "The bpmn.io logo",
       "type": "image"
     },
+    {
+      "label": "Image files",
+      "type": "filepicker",
+      "id": "files",
+      "key": "files",
+      "multiple": true,
+      "accept": ".jpg,.png"
+    },
     {
       "id": "Spacer_1",
       "type": "spacer",

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

@@ -271,7 +271,7 @@
     "multiple": {
       "$id": "#/component/multiple",
       "description": "Allow multiple files to be selected.",
-      "type": "boolean"
+      "type": ["boolean", "string"]
     }
   },
   "required": ["type"]

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

@@ -415,6 +415,21 @@
           "multiple": false
         }
       }
+    },
+    {
+      "if": {
+        "properties": {
+          "type": {
+            "const": "filepicker"
+          }
+        },
+        "required": ["type"]
+      },
+      "then": {
+        "properties": {
+          "description": false
+        }
+      }
     }
   ]
 }