From f870581c6b3f7877c41e902b38aa22641c895596 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Mon, 16 Oct 2023 19:09:16 +0200 Subject: [PATCH] :sparkles: [#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 | 42 +++++++++++++- test-d/formio/components/file.test-d.ts | 74 +++++++++++++++++++++++++ 2 files changed, 115 insertions(+), 1 deletion(-) diff --git a/src/formio/components/file.ts b/src/formio/components/file.ts index aea4d84..a070cac 100644 --- a/src/formio/components/file.ts +++ b/src/formio/components/file.ts @@ -63,6 +63,14 @@ 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 @@ -70,10 +78,42 @@ export interface FileUploadData { export interface BaseFileComponentSchema extends Omit, UnusedFileProperties | 'errors'>, DisplayConfig, - OFExtensions, + Omit, 'registration'>, HasValidation { 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 & { diff --git a/test-d/formio/components/file.test-d.ts b/test-d/formio/components/file.test-d.ts index 5ca05c7..d1f566b 100644 --- a/test-d/formio/components/file.test-d.ts +++ b/test-d/formio/components/file.test-d.ts @@ -26,6 +26,14 @@ expectAssignable({ 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([]); expectAssignable([anUpload]); expectNotAssignable([anUpload, anUpload]); + +// Form builder assignability checks + +// with additional, file-component specific properties +expectAssignable({ + 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 +});