better file input configs

Author: kkartunov

src-ts/lib/form/form-groups/form-input/input-image-picker/InputImagePicker.tsx

@@ -6,10 +6,12 @@ import { InputValue } from '../../../form-input.model'
 import styles from './InputImagePicker.module.scss'
 
 interface InputImagePickerProps {
-    readonly accept?: string
+    readonly fileConfig?: {
+        readonly acceptFileType?: string
+        readonly maxFileSize?: number
+    }
     readonly name: string
     readonly onChange: (event: ChangeEvent<HTMLInputElement>) => void
-    readonly size?: number
     readonly value?: InputValue
 }
 
@@ -49,14 +51,14 @@ const InputImagePicker: FC<InputImagePickerProps> = (props: InputImagePickerProp
             <input
                 name={props.name}
                 type={'file'}
-                accept={props.accept || '*'}
+                accept={props.fileConfig?.acceptFileType || '*'}
                 className={styles.filePickerInput}
                 ref={fileInputRef}
                 onChange={event => {
                     setFiles(event.target.files)
                     props.onChange(event)
                 }}
-                size={props.size || Infinity}
+                size={props.fileConfig?.maxFileSize || Infinity}
             />
             {
                 fileDataURL ? (

src-ts/lib/form/form-input.model.ts

@@ -20,7 +20,6 @@ export interface FormCard {
 export type InputValue = string | boolean | FileList | undefined
 
 export interface FormInputModel {
-    readonly accept?: string
     readonly autocomplete?: FormInputAutocompleteOption
     readonly cards?: ReadonlyArray<FormCard>
     checked?: boolean
@@ -30,6 +29,10 @@ export interface FormInputModel {
     disabled?: boolean
     error?: string
     readonly events?: ReadonlyArray<InputEvent>
+    readonly fileConfig?: {
+        readonly acceptFileType?: string
+        readonly maxFileSize?: number
+    }
     readonly files?: FileList
     readonly hideInlineErrors?: boolean
     readonly hint?: string
@@ -40,7 +43,6 @@ export interface FormInputModel {
     readonly notTabbable?: boolean
     options?: ReadonlyArray<FormRadioButtonOption>
     readonly placeholder?: string
-    readonly size?: number
     readonly spellCheck?: boolean
     readonly title?: string
     touched?: boolean

src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/create-badge-form.config.tsx

@@ -33,9 +33,11 @@ export const createBadgeFormDef: FormDefinition = {
         {
             inputs: [
                 {
-                    accept: GamificationConfig.ACCEPTED_BADGE_MIME_TYPES,
+                    fileConfig: {
+                        acceptFileType: GamificationConfig.ACCEPTED_BADGE_MIME_TYPES,
+                        maxFileSize: GamificationConfig.MAX_BADGE_IMAGE_FILE_SIZE,
+                    },
                     name: CreateBadgeFormField.file,
-                    size: GamificationConfig.MAX_BADGE_IMAGE_FILE_SIZE,
                     type: 'image-picker',
                     validators: [
                         {