✨ [#2] File upload component, pt. 2

Incorporate the configuration for the file uploads in the type.

Added annotations because many of these are dynamically set
by the backend or the calculated as part of the form builder
form.

src/formio/components/file.ts

@@ -63,17 +63,57 @@ export interface FileUploadData {
   url: string;
 }
 
+export interface FileUploadConfiguration {
+  // vanilla Form.io
+  name: string;
+  type: string[];
+  // custom, injected by the backend or calculated by the builder
+  allowedTypesLabels: string[];
+}
+
 /**
  * @group Form.io components
  * @category Base types
  */
 export interface BaseFileComponentSchema
   extends Omit<StrictComponentSchema<FileUploadData[]>, UnusedFileProperties | 'errors'>,
     DisplayConfig,
-    OFExtensions<TranslatableKeys>,
+    Omit<OFExtensions<TranslatableKeys>, 'registration'>,
     HasValidation<Validator> {
   type: 'file';
   multiple?: boolean;
+
+  // (possibly) more-constrained existing formio properties
+  storage: 'url';
+  url: string;
+  file: FileUploadConfiguration;
+  filePattern: string; // can be empty string, which sort of acts like wildcard
+  fileMaxSize?: string; // strings like 10MB, 1GB... parsed by Form.io
+
+  // custom open forms properties.
+  // TODO: this should all be merged in the openForms namespace, but that's a rather
+  // big refactor/cleanup :(
+  useConfigFiletypes?: boolean;
+  // backend gloms it with defaults, so it anticipates keys being absent. Note that this
+  // is also only used in the backend!
+  of?: {
+    image?: {
+      resize?: {
+        apply?: boolean;
+        // backend falls back to defaults if the keys are absent, but if they are
+        // provided, they must be ints
+        width?: number;
+        height?: number;
+      };
+    };
+  };
+  maxNumberOfFiles?: number | null; // should maybe go in validate.maxNumberOfFiles?
+  registration?: {
+    informatieobjecttype?: string;
+    bronorganisatie?: string;
+    docVertrouwelijkheidaanduiding?: string;
+    titel?: string;
+  };
 }
 
 export type SingleFileComponentSchema = BaseFileComponentSchema & {

test-d/formio/components/file.test-d.ts

@@ -26,6 +26,14 @@ expectAssignable<FileComponentSchema>({
   type: 'file',
   key: 'someFile',
   label: 'Attachment',
+  storage: 'url',
+  url: '',
+  file: {
+    name: '',
+    type: [],
+    allowedTypesLabels: [],
+  },
+  filePattern: '*',
 });
 
 // Behaviour of single vs. multiple file uploads
@@ -35,6 +43,14 @@ const explicitSingleUpload: FileComponentSchema = {
   type: 'file',
   key: 'someFile',
   label: 'Attachment',
+  storage: 'url',
+  url: '',
+  file: {
+    name: '',
+    type: [],
+    allowedTypesLabels: [],
+  },
+  filePattern: '*',
   multiple: false,
 };
 type ExplicitSingleUploadValue = (typeof explicitSingleUpload)['defaultValue'];
@@ -47,6 +63,14 @@ const explicitMultipleUpload: FileComponentSchema = {
   type: 'file',
   key: 'someFile',
   label: 'Attachment',
+  storage: 'url',
+  url: '',
+  file: {
+    name: '',
+    type: [],
+    allowedTypesLabels: [],
+  },
+  filePattern: '*',
   multiple: true,
 };
 type ExplicitMultipleUploadValue = (typeof explicitMultipleUpload)['defaultValue'];
@@ -59,8 +83,58 @@ const implicitSingleUpload: FileComponentSchema = {
   type: 'file',
   key: 'someFile',
   label: 'Attachment',
+  storage: 'url',
+  url: '',
+  file: {
+    name: '',
+    type: [],
+    allowedTypesLabels: [],
+  },
+  filePattern: '*',
 };
 type ImplicitSingleUploadValue = (typeof implicitSingleUpload)['defaultValue'];
 expectAssignable<ImplicitSingleUploadValue>([]);
 expectAssignable<ImplicitSingleUploadValue>([anUpload]);
 expectNotAssignable<ImplicitSingleUploadValue>([anUpload, anUpload]);
+
+// Form builder assignability checks
+
+// with additional, file-component specific properties
+expectAssignable<FileComponentSchema>({
+  id: 'yejak',
+  type: 'file',
+  key: 'someInput',
+  label: 'Some input',
+  // builder sets empty URL, backend dynamically makes this non-empty
+  storage: 'url',
+  url: '',
+  file: {
+    // vanilla
+    name: 'prefix_{{ fileName }}',
+    type: ['image/png', 'application/pdf'],
+    // custom
+    allowedTypesLabels: ['.png', '.pdf'],
+  },
+  useConfigFiletypes: false, // custom option to dynamically set allowed file types
+  registration: {
+    informatieobjecttype: '',
+    bronorganisatie: '',
+    docVertrouwelijkheidaanduiding: '',
+    titel: '',
+  },
+  openForms: {
+    translations: {},
+  },
+  of: {
+    image: {
+      resize: {
+        apply: true,
+        width: 2000,
+        height: 2000,
+      },
+    },
+  },
+  filePattern: 'image/png,application/pdf',
+  fileMaxSize: '10MB',
+  maxNumberOfFiles: 3, // custom setting
+});