From a578a4acdd4157bcd7b45372df26f873a19acb8f Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sat, 29 Oct 2022 10:21:53 -0400
Subject: [PATCH 1/9] Provide file-renderer

---
 example/src/examples/control/schema.json   |  25 +-
 example/src/examples/control/uischema.json |  39 +++
 vue2-vuetify/src/controls/FileRenderer.vue | 359 +++++++++++++++++++++
 vue2-vuetify/src/controls/index.ts         |   3 +
 4 files changed, 420 insertions(+), 6 deletions(-)
 create mode 100644 vue2-vuetify/src/controls/FileRenderer.vue

diff --git a/example/src/examples/control/schema.json b/example/src/examples/control/schema.json
index 278b7758..a806e8d2 100644
--- a/example/src/examples/control/schema.json
+++ b/example/src/examples/control/schema.json
@@ -27,11 +27,24 @@
     },
     "enum": {
       "type": "string",
-      "enum": [
-        "One",
-        "Two",
-        "Three"
-      ]
+      "enum": ["One", "Two", "Three"]
+    },
+    "imageDataUri": {
+      "type": "string",
+      "format": "uri",
+      "contentEncoding": "base64",
+      "contentMediaType": "image/*",
+      "description": "Image with maximum size of 1MB encoded as data URI"
+    },
+    "fileDataUriWithFileName": {
+      "type": "string",
+      "format": "binary",
+      "description": "File with maximum size of 1MB encoded as data URI and including the file name"
+    },
+    "base64String": {
+      "type": "string",
+      "contentEncoding": "base64",
+      "description": "File with maximum size of 1MB encoded as base64"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/control/uischema.json b/example/src/examples/control/uischema.json
index a6477623..4043deb0 100644
--- a/example/src/examples/control/uischema.json
+++ b/example/src/examples/control/uischema.json
@@ -39,6 +39,45 @@
     {
       "type": "Control",
       "scope": "#/properties/enum"
+    },
+    {
+      "type": "Control",
+      "scope": "#/properties/imageDataUri",
+      "options": {
+        "showUnfocusedDescription": true,
+        "formatMaximum": "1048576",
+        "vuetify": {
+          "v-file-input": {
+            "showSize": true
+          }
+        }
+      }
+    },
+    {
+      "type": "Control",
+      "scope": "#/properties/fileDataUriWithFileName",
+      "options": {
+        "showUnfocusedDescription": true,
+        "formatMaximum": "1048576",
+        "vuetify": {
+          "v-file-input": {
+            "showSize": true
+          }
+        }
+      }
+    },
+    {
+      "type": "Control",
+      "scope": "#/properties/base64String",
+      "options": {
+        "showUnfocusedDescription": true,
+        "formatMaximum": "1048576",
+        "vuetify": {
+          "v-file-input": {
+            "showSize": true
+          }
+        }
+      }
     }
   ]
 }
diff --git a/vue2-vuetify/src/controls/FileRenderer.vue b/vue2-vuetify/src/controls/FileRenderer.vue
new file mode 100644
index 00000000..b98f233b
--- /dev/null
+++ b/vue2-vuetify/src/controls/FileRenderer.vue
@@ -0,0 +1,359 @@
+<template>
+  <control-wrapper
+    v-bind="controlWrapper"
+    :styles="styles"
+    :isFocused="isFocused"
+    :appliedOptions="appliedOptions"
+  >
+    <v-hover v-slot="{ hover }">
+      <v-file-input
+        v-disabled-icon-focus
+        :id="control.id + '-input'"
+        :class="styles.control.input"
+        :disabled="!control.enabled"
+        :autofocus="appliedOptions.focus"
+        :placeholder="appliedOptions.placeholder"
+        :label="computedLabel"
+        :hint="control.description"
+        :persistent-hint="persistentHint()"
+        :required="control.required"
+        :error-messages="errorMessages"
+        :clearable="hover"
+        :accept="accept"
+        v-model="currentFile"
+        v-bind="vuetifyProps('v-file-input')"
+        @change="selectFile"
+        @focus="isFocused = true"
+        @blur="isFocused = false"
+      ></v-file-input>
+    </v-hover>
+    <v-dialog v-model="dialog" hide-overlay persistent width="300">
+      <v-card>
+        <v-toolbar dense flat>
+          <v-toolbar-title>{{ standby }}</v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-btn @click="abort" icon> <v-icon>$close</v-icon> </v-btn>
+        </v-toolbar>
+        <v-card-text>
+          <v-progress-linear
+            v-model="progressValue"
+            :indeterminate="progressIndeterminate"
+            :query="true"
+            height="25"
+          >
+            <strong>{{ Math.ceil(progressValue) }}%</strong>
+          </v-progress-linear>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </control-wrapper>
+</template>
+
+<script lang="ts">
+import {
+  and,
+  ControlElement,
+  getI18nKey,
+  isStringControl,
+  JsonFormsRendererRegistryEntry,
+  JsonSchema,
+  rankWith,
+  schemaMatches,
+  uiTypeIs,
+} from '@jsonforms/core';
+import {
+  DispatchRenderer,
+  rendererProps,
+  RendererProps,
+  useJsonFormsControl,
+} from '@jsonforms/vue2';
+import toNumber from 'lodash/toNumber';
+import { computed, defineComponent, ref, unref } from 'vue';
+import {
+  VBtn,
+  VCard,
+  VCardText,
+  VDialog,
+  VFileInput,
+  VHover,
+  VIcon,
+  VProgressLinear,
+  VSpacer,
+  VToolbar,
+  VToolbarTitle,
+} from 'vuetify/lib';
+import { useTranslator, useVuetifyControl } from '../util';
+import { default as ControlWrapper } from './ControlWrapper.vue';
+import { DisabledIconFocus } from './directives';
+
+const formatBytes = (bytes: number, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+};
+
+const toNonNegativeNumber = (param: any): number | undefined => {
+  const result = param !== undefined ? toNumber(param) : undefined;
+  return result && result >= 0 ? result : undefined;
+};
+
+const getFileSize = (
+  schema: JsonSchema & {
+    formatMinimum: any;
+    formatMaximum: any;
+    formatExclusiveMinimum: any;
+    formatExclusiveMaximum: any;
+    contentSchema?: { minItems: any; maxItems: any };
+  },
+  variant: 'min' | 'max'
+): [number | undefined, boolean] => {
+  let exclusive = false;
+  let fileSize: number | undefined = undefined;
+
+  if (variant === 'min') {
+    fileSize = toNonNegativeNumber(schema?.formatMinimum);
+    if (fileSize === undefined) {
+      fileSize = toNonNegativeNumber(schema?.formatExclusiveMinimum);
+      exclusive = true;
+    }
+    if (fileSize === undefined) {
+      fileSize = toNonNegativeNumber(schema?.contentSchema?.minItems);
+    }
+  } else {
+    fileSize = toNonNegativeNumber(schema?.formatMaximum);
+    if (fileSize === undefined) {
+      fileSize = toNonNegativeNumber(schema?.formatExclusiveMaximum);
+      exclusive = true;
+    }
+    if (fileSize === undefined) {
+      fileSize = toNonNegativeNumber(schema?.contentSchema?.maxItems);
+    }
+  }
+
+  return [fileSize, exclusive];
+};
+
+const toBase64 = (
+  file: File,
+  reader: FileReader,
+  vm: { progressIndeterminate: boolean; progressValue: number },
+  schemaFormat?: string
+) =>
+  new Promise((resolve, reject) => {
+    reader.onload = () => {
+      const dataurl = reader.result as string;
+      if (schemaFormat === 'uri') {
+        resolve(dataurl);
+      } else if (schemaFormat === 'binary') {
+        //special handling to encode the filename
+        const insertIndex = dataurl.indexOf(';base64,');
+        resolve(
+          dataurl.substring(0, insertIndex) +
+            `;filename=${encodeURIComponent(file.name)}` +
+            dataurl.substring(insertIndex)
+        );
+      } else {
+        resolve(dataurl.substring(dataurl.indexOf(',') + 1));
+      }
+    };
+    reader.onabort = (error) => reject(error);
+    reader.onerror = (error) => reject(error);
+    reader.onprogress = (progress) => {
+      if (progress.lengthComputable) {
+        vm.progressIndeterminate = false;
+        vm.progressValue = (progress.loaded / progress.total) * 100;
+      }
+    };
+    reader.readAsDataURL(file);
+  });
+
+const fileRenderer = defineComponent({
+  name: 'file-control-renderer',
+  components: {
+    VHover,
+    ControlWrapper,
+    DispatchRenderer,
+    VFileInput,
+    VDialog,
+    VCard,
+    VCardText,
+    VProgressLinear,
+    VSpacer,
+    VToolbar,
+    VToolbarTitle,
+    VBtn,
+    VIcon,
+  },
+  directives: {
+    DisabledIconFocus,
+  },
+  props: {
+    ...rendererProps<ControlElement>(),
+  },
+  setup(props: RendererProps<ControlElement>) {
+    const currentFile = ref<File | undefined>(undefined);
+    const currentFileReader = new FileReader();
+    const currentFileValidationErrors = ref<string | null>(null);
+
+    const t = useTranslator();
+    const input = useJsonFormsControl(props);
+
+    const dialog = ref(false);
+    const progressIndeterminate = ref(true);
+    const progressValue = ref(0);
+
+    // implement the validation outside the Ajv since we do not want even to transform invalid files into string and then implement custom Avj validator
+    const minFileSize = computed(
+      () => getFileSize(unref(input.control).schema as any, 'min')[0]
+    );
+    const minFileSizeExclusive = computed(
+      () => getFileSize(unref(input.control).schema as any, 'min')[1]
+    );
+
+    const maxFileSize = computed(
+      () => getFileSize(unref(input.control).schema as any, 'max')[0]
+    );
+    const maxFileSizeExclusive = computed(
+      () => getFileSize(unref(input.control).schema as any, 'max')[1]
+    );
+
+    return {
+      ...useVuetifyControl(input),
+      t,
+      dialog,
+      progressValue,
+      progressIndeterminate,
+      currentFile,
+      currentFileReader,
+      currentFileValidationErrors,
+      maxFileSize,
+      maxFileSizeExclusive,
+      minFileSize,
+      minFileSizeExclusive,
+    };
+  },
+  computed: {
+    accept(): string | undefined {
+      // note that we cast to any since JsonSchema7 JSONFomrs core type does not yet define contentMediaType although contentMediaType is part of JSON schema draft-07
+      return (this.control.schema as any).contentMediaType;
+    },
+    errorMessages(): string | undefined {
+      return this.currentFileValidationErrors ?? this.control.errors;
+    },
+    standby(): string {
+      return this.t('Attaching file...', 'Attaching file...');
+    },
+  },
+  methods: {
+    reset() {
+      this.dialog = false;
+      this.progressIndeterminate = true;
+      this.progressValue = 0;
+      this.currentFileReader = new FileReader();
+    },
+    abort() {
+      this.currentFileReader.abort();
+      this.currentFile = undefined;
+      this.reset();
+    },
+    async selectFile(value: File) {
+      const schema: JsonSchema = this.control.schema;
+
+      if (value == null) {
+        this.currentFileValidationErrors = null;
+      } else {
+        this.currentFileValidationErrors = null;
+
+        if (this.maxFileSize) {
+          const maxFileSizeValid = this.maxFileSizeExclusive
+            ? value.size < this.maxFileSize
+            : value.size <= this.maxFileSize;
+          if (!maxFileSizeValid) {
+            const key = getI18nKey(
+              this.control.schema,
+              this.control.uischema,
+              this.control.path,
+              'error.contentSchema.maxItems'
+            );
+
+            this.currentFileValidationErrors = this.t(
+              key!,
+              `size should be less than ${formatBytes(this.maxFileSize)}`
+            );
+          }
+        }
+        if (this.minFileSize) {
+          const minFileSizeValid = this.minFileSizeExclusive
+            ? value.size > this.minFileSize
+            : value.size >= this.minFileSize;
+          if (!minFileSizeValid) {
+            const key = getI18nKey(
+              this.control.schema,
+              this.control.uischema,
+              this.control.path,
+              'error.contentSchema.minItems'
+            );
+            this.currentFileValidationErrors = this.t(
+              key!,
+              `size should be greater than ${formatBytes(this.minFileSize)}`
+            );
+          }
+        }
+      }
+
+      if (this.currentFileValidationErrors !== null) {
+        this.currentFile = undefined;
+      } else {
+        if (value) {
+          this.dialog = true;
+
+          try {
+            this.currentFileReader = new FileReader();
+
+            const base64 = await toBase64(
+              value,
+              this.currentFileReader,
+              this,
+              schema.format
+            );
+
+            this.onChange(base64);
+          } catch (e) {
+            // clear the selected file when there is an error converting the file into base64
+            this.currentFile = undefined;
+          } finally {
+            this.reset();
+          }
+        } else {
+          this.onChange(undefined);
+        }
+      }
+    },
+  },
+});
+
+export default fileRenderer;
+
+export const isBase64String = and(
+  uiTypeIs('Control'),
+  isStringControl,
+  schemaMatches(
+    (schema) =>
+      (Object.prototype.hasOwnProperty.call(schema, 'contentEncoding') &&
+        (schema as any).contentEncoding == 'base64') ||
+      schema.format === 'binary' ||
+      schema.format === 'byte'
+  )
+);
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: fileRenderer,
+  tester: rankWith(2, isBase64String),
+};
+</script>
diff --git a/vue2-vuetify/src/controls/index.ts b/vue2-vuetify/src/controls/index.ts
index b610731f..9c129a1d 100644
--- a/vue2-vuetify/src/controls/index.ts
+++ b/vue2-vuetify/src/controls/index.ts
@@ -19,6 +19,7 @@ export { default as SliderControlRenderer } from './SliderControlRenderer.vue';
 export { default as StringControlRenderer } from './StringControlRenderer.vue';
 export { default as StringMaskControlRenderer } from './StringMaskControlRenderer.vue';
 export { default as TimeControlRenderer } from './TimeControlRenderer.vue';
+export { default as FileRenderer } from './FileRenderer.vue';
 
 import { entry as anyOfStringOrEnumControlRendererEntry } from './AnyOfStringOrEnumControlRenderer.vue';
 import { entry as booleanControlRendererEntry } from './BooleanControlRenderer.vue';
@@ -37,6 +38,7 @@ import { entry as sliderControlRendererEntry } from './SliderControlRenderer.vue
 import { entry as stringControlRendererEntry } from './StringControlRenderer.vue';
 import { entry as stringMaskControlRendererEntry } from './StringMaskControlRenderer.vue';
 import { entry as timeControlRendererEntry } from './TimeControlRenderer.vue';
+import { entry as fileRendererEntry } from './FileRenderer.vue';
 
 export const controlRenderers = [
   anyOfStringOrEnumControlRendererEntry,
@@ -56,4 +58,5 @@ export const controlRenderers = [
   stringControlRendererEntry,
   stringMaskControlRendererEntry,
   timeControlRendererEntry,
+  fileRendererEntry,
 ];

From 25276a8b9f85d06de9bd24e9e466008101f33ddd Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sat, 29 Oct 2022 11:05:30 -0400
Subject: [PATCH 2/9] add ability to control the file size restrictions from
 uischema

---
 example/src/examples/control/schema.json   | 17 -----
 example/src/examples/control/uischema.json | 39 -----------
 example/src/examples/file/data.json        |  1 +
 example/src/examples/file/index.ts         | 10 +++
 example/src/examples/file/schema.json      | 22 +++++++
 example/src/examples/file/uischema.json    | 44 +++++++++++++
 example/src/examples/index.ts              |  6 ++
 vue2-vuetify/src/controls/FileRenderer.vue | 76 ++++++++++++++++------
 8 files changed, 139 insertions(+), 76 deletions(-)
 create mode 100644 example/src/examples/file/data.json
 create mode 100644 example/src/examples/file/index.ts
 create mode 100644 example/src/examples/file/schema.json
 create mode 100644 example/src/examples/file/uischema.json

diff --git a/example/src/examples/control/schema.json b/example/src/examples/control/schema.json
index a806e8d2..be46169d 100644
--- a/example/src/examples/control/schema.json
+++ b/example/src/examples/control/schema.json
@@ -28,23 +28,6 @@
     "enum": {
       "type": "string",
       "enum": ["One", "Two", "Three"]
-    },
-    "imageDataUri": {
-      "type": "string",
-      "format": "uri",
-      "contentEncoding": "base64",
-      "contentMediaType": "image/*",
-      "description": "Image with maximum size of 1MB encoded as data URI"
-    },
-    "fileDataUriWithFileName": {
-      "type": "string",
-      "format": "binary",
-      "description": "File with maximum size of 1MB encoded as data URI and including the file name"
-    },
-    "base64String": {
-      "type": "string",
-      "contentEncoding": "base64",
-      "description": "File with maximum size of 1MB encoded as base64"
     }
   }
 }
diff --git a/example/src/examples/control/uischema.json b/example/src/examples/control/uischema.json
index 4043deb0..a6477623 100644
--- a/example/src/examples/control/uischema.json
+++ b/example/src/examples/control/uischema.json
@@ -39,45 +39,6 @@
     {
       "type": "Control",
       "scope": "#/properties/enum"
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/imageDataUri",
-      "options": {
-        "showUnfocusedDescription": true,
-        "formatMaximum": "1048576",
-        "vuetify": {
-          "v-file-input": {
-            "showSize": true
-          }
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/fileDataUriWithFileName",
-      "options": {
-        "showUnfocusedDescription": true,
-        "formatMaximum": "1048576",
-        "vuetify": {
-          "v-file-input": {
-            "showSize": true
-          }
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/base64String",
-      "options": {
-        "showUnfocusedDescription": true,
-        "formatMaximum": "1048576",
-        "vuetify": {
-          "v-file-input": {
-            "showSize": true
-          }
-        }
-      }
     }
   ]
 }
diff --git a/example/src/examples/file/data.json b/example/src/examples/file/data.json
new file mode 100644
index 00000000..0967ef42
--- /dev/null
+++ b/example/src/examples/file/data.json
@@ -0,0 +1 @@
+{}
diff --git a/example/src/examples/file/index.ts b/example/src/examples/file/index.ts
new file mode 100644
index 00000000..8f5e6566
--- /dev/null
+++ b/example/src/examples/file/index.ts
@@ -0,0 +1,10 @@
+import schema from './schema.json';
+import uischema from './uischema.json';
+import data from './data.json';
+import { UISchemaElement, JsonSchema } from '@jsonforms/core';
+
+export const input: {
+  schema: JsonSchema;
+  uischema: UISchemaElement;
+  data: any;
+} = { schema, uischema, data };
diff --git a/example/src/examples/file/schema.json b/example/src/examples/file/schema.json
new file mode 100644
index 00000000..273fec09
--- /dev/null
+++ b/example/src/examples/file/schema.json
@@ -0,0 +1,22 @@
+{
+  "type": "object",
+  "properties": {
+    "imageDataUri": {
+      "type": "string",
+      "format": "uri",
+      "contentEncoding": "base64",
+      "contentMediaType": "image/*",
+      "description": "Image with maximum size of 1MB encoded as data URI"
+    },
+    "fileDataUriWithFileName": {
+      "type": "string",
+      "format": "binary",
+      "description": "File with maximum size of 1MB encoded as data URI and including the file name"
+    },
+    "base64String": {
+      "type": "string",
+      "contentEncoding": "base64",
+      "description": "File with maximum size of 1MB encoded as base64"
+    }
+  }
+}
diff --git a/example/src/examples/file/uischema.json b/example/src/examples/file/uischema.json
new file mode 100644
index 00000000..8aa88cfa
--- /dev/null
+++ b/example/src/examples/file/uischema.json
@@ -0,0 +1,44 @@
+{
+  "type": "VerticalLayout",
+  "elements": [
+    {
+      "type": "Control",
+      "scope": "#/properties/imageDataUri",
+      "options": {
+        "showUnfocusedDescription": true,
+        "formatMaximum": 1048576,
+        "vuetify": {
+          "v-file-input": {
+            "showSize": true
+          }
+        }
+      }
+    },
+    {
+      "type": "Control",
+      "scope": "#/properties/fileDataUriWithFileName",
+      "options": {
+        "showUnfocusedDescription": true,
+        "formatMaximum": 1048576,
+        "vuetify": {
+          "v-file-input": {
+            "showSize": true
+          }
+        }
+      }
+    },
+    {
+      "type": "Control",
+      "scope": "#/properties/base64String",
+      "options": {
+        "showUnfocusedDescription": true,
+        "formatMaximum": 1048576,
+        "vuetify": {
+          "v-file-input": {
+            "showSize": true
+          }
+        }
+      }
+    }
+  ]
+}
diff --git a/example/src/examples/index.ts b/example/src/examples/index.ts
index 0a670d9f..3d278c66 100644
--- a/example/src/examples/index.ts
+++ b/example/src/examples/index.ts
@@ -41,6 +41,7 @@ import { input as rule } from './rule';
 import { input as verticalLayout } from './vertical-layout';
 import { input as huge } from './huge';
 import { input as ifThenElse } from './if-then-else';
+import { input as file } from './file';
 
 export const examples = [
   {
@@ -63,6 +64,11 @@ export const examples = [
     title: 'Control Options',
     input: controlOptions,
   },
+  {
+    id: 'file',
+    title: 'File',
+    input: file,
+  },
   {
     id: 'datetime',
     title: 'Datetime',
diff --git a/vue2-vuetify/src/controls/FileRenderer.vue b/vue2-vuetify/src/controls/FileRenderer.vue
index b98f233b..213eeef2 100644
--- a/vue2-vuetify/src/controls/FileRenderer.vue
+++ b/vue2-vuetify/src/controls/FileRenderer.vue
@@ -68,7 +68,7 @@ import {
   useJsonFormsControl,
 } from '@jsonforms/vue2';
 import toNumber from 'lodash/toNumber';
-import { computed, defineComponent, ref, unref } from 'vue';
+import { defineComponent, ref } from 'vue';
 import {
   VBtn,
   VCard,
@@ -111,6 +111,14 @@ const getFileSize = (
     formatExclusiveMaximum: any;
     contentSchema?: { minItems: any; maxItems: any };
   },
+  uioptions:
+    | {
+        formatMinimum: any;
+        formatMaximum: any;
+        formatExclusiveMinimum: any;
+        formatExclusiveMaximum: any;
+      }
+    | undefined,
   variant: 'min' | 'max'
 ): [number | undefined, boolean] => {
   let exclusive = false;
@@ -125,6 +133,15 @@ const getFileSize = (
     if (fileSize === undefined) {
       fileSize = toNonNegativeNumber(schema?.contentSchema?.minItems);
     }
+
+    if (fileSize === undefined && uioptions) {
+      if (typeof uioptions.formatMinimum === 'number') {
+        fileSize = toNonNegativeNumber(uioptions.formatMinimum);
+      } else if (typeof uioptions.formatExclusiveMinimum === 'number') {
+        fileSize = toNonNegativeNumber(uioptions.formatExclusiveMinimum);
+        exclusive = true;
+      }
+    }
   } else {
     fileSize = toNonNegativeNumber(schema?.formatMaximum);
     if (fileSize === undefined) {
@@ -134,6 +151,15 @@ const getFileSize = (
     if (fileSize === undefined) {
       fileSize = toNonNegativeNumber(schema?.contentSchema?.maxItems);
     }
+
+    if (fileSize === undefined && uioptions) {
+      if (typeof uioptions.formatMaximum === 'number') {
+        fileSize = toNonNegativeNumber(uioptions.formatMaximum);
+      } else if (typeof uioptions.formatExclusiveMaximum === 'number') {
+        fileSize = toNonNegativeNumber(uioptions.formatExclusiveMaximum);
+        exclusive = true;
+      }
+    }
   }
 
   return [fileSize, exclusive];
@@ -208,21 +234,6 @@ const fileRenderer = defineComponent({
     const progressIndeterminate = ref(true);
     const progressValue = ref(0);
 
-    // implement the validation outside the Ajv since we do not want even to transform invalid files into string and then implement custom Avj validator
-    const minFileSize = computed(
-      () => getFileSize(unref(input.control).schema as any, 'min')[0]
-    );
-    const minFileSizeExclusive = computed(
-      () => getFileSize(unref(input.control).schema as any, 'min')[1]
-    );
-
-    const maxFileSize = computed(
-      () => getFileSize(unref(input.control).schema as any, 'max')[0]
-    );
-    const maxFileSizeExclusive = computed(
-      () => getFileSize(unref(input.control).schema as any, 'max')[1]
-    );
-
     return {
       ...useVuetifyControl(input),
       t,
@@ -232,10 +243,6 @@ const fileRenderer = defineComponent({
       currentFile,
       currentFileReader,
       currentFileValidationErrors,
-      maxFileSize,
-      maxFileSizeExclusive,
-      minFileSize,
-      minFileSizeExclusive,
     };
   },
   computed: {
@@ -249,6 +256,34 @@ const fileRenderer = defineComponent({
     standby(): string {
       return this.t('Attaching file...', 'Attaching file...');
     },
+    minFileSize(): number | undefined {
+      return getFileSize(
+        this.control.schema as any,
+        this.appliedOptions,
+        'min'
+      )[0];
+    },
+    minFileSizeExclusive(): boolean | undefined {
+      return getFileSize(
+        this.control.schema as any,
+        this.appliedOptions,
+        'min'
+      )[1];
+    },
+    maxFileSize(): number | undefined {
+      return getFileSize(
+        this.control.schema as any,
+        this.appliedOptions,
+        'max'
+      )[0];
+    },
+    maxFileSizeExclusive(): boolean | undefined {
+      return getFileSize(
+        this.control.schema as any,
+        this.appliedOptions,
+        'max'
+      )[1];
+    },
   },
   methods: {
     reset() {
@@ -288,6 +323,7 @@ const fileRenderer = defineComponent({
             );
           }
         }
+
         if (this.minFileSize) {
           const minFileSizeValid = this.minFileSizeExclusive
             ? value.size > this.minFileSize

From 37d05fd16a44e3e40114bc7bc9fdda7faee90d19 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sat, 29 Oct 2022 12:27:22 -0400
Subject: [PATCH 3/9] make sure that in uischema if  the type for format limits
 is string then it is going to work as well since this is what the schema
 expects, remove the invalid contentSchema minItems, maxItems, provide size
 parameters for error message

---
 vue2-vuetify/src/controls/FileRenderer.vue | 52 +++++++++++++++-------
 1 file changed, 35 insertions(+), 17 deletions(-)

diff --git a/vue2-vuetify/src/controls/FileRenderer.vue b/vue2-vuetify/src/controls/FileRenderer.vue
index 213eeef2..d23ed0a2 100644
--- a/vue2-vuetify/src/controls/FileRenderer.vue
+++ b/vue2-vuetify/src/controls/FileRenderer.vue
@@ -109,7 +109,6 @@ const getFileSize = (
     formatMaximum: any;
     formatExclusiveMinimum: any;
     formatExclusiveMaximum: any;
-    contentSchema?: { minItems: any; maxItems: any };
   },
   uioptions:
     | {
@@ -126,36 +125,42 @@ const getFileSize = (
 
   if (variant === 'min') {
     fileSize = toNonNegativeNumber(schema?.formatMinimum);
-    if (fileSize === undefined) {
+    if (fileSize === undefined && schema?.formatExclusiveMinimum) {
       fileSize = toNonNegativeNumber(schema?.formatExclusiveMinimum);
       exclusive = true;
     }
-    if (fileSize === undefined) {
-      fileSize = toNonNegativeNumber(schema?.contentSchema?.minItems);
-    }
 
     if (fileSize === undefined && uioptions) {
-      if (typeof uioptions.formatMinimum === 'number') {
+      if (
+        typeof uioptions.formatMinimum === 'number' ||
+        typeof uioptions.formatMinimum === 'string'
+      ) {
         fileSize = toNonNegativeNumber(uioptions.formatMinimum);
-      } else if (typeof uioptions.formatExclusiveMinimum === 'number') {
+      } else if (
+        typeof uioptions.formatExclusiveMinimum === 'number' ||
+        typeof uioptions.formatExclusiveMinimum === 'string'
+      ) {
         fileSize = toNonNegativeNumber(uioptions.formatExclusiveMinimum);
         exclusive = true;
       }
     }
   } else {
     fileSize = toNonNegativeNumber(schema?.formatMaximum);
-    if (fileSize === undefined) {
+    if (fileSize === undefined && schema?.formatExclusiveMaximum) {
       fileSize = toNonNegativeNumber(schema?.formatExclusiveMaximum);
       exclusive = true;
     }
-    if (fileSize === undefined) {
-      fileSize = toNonNegativeNumber(schema?.contentSchema?.maxItems);
-    }
 
     if (fileSize === undefined && uioptions) {
-      if (typeof uioptions.formatMaximum === 'number') {
+      if (
+        typeof uioptions.formatMaximum === 'number' ||
+        typeof uioptions.formatMaximum === 'string'
+      ) {
         fileSize = toNonNegativeNumber(uioptions.formatMaximum);
-      } else if (typeof uioptions.formatExclusiveMaximum === 'number') {
+      } else if (
+        typeof uioptions.formatExclusiveMaximum === 'number' ||
+        typeof uioptions.formatExclusiveMaximum === 'string'
+      ) {
         fileSize = toNonNegativeNumber(uioptions.formatExclusiveMaximum);
         exclusive = true;
       }
@@ -314,12 +319,18 @@ const fileRenderer = defineComponent({
               this.control.schema,
               this.control.uischema,
               this.control.path,
-              'error.contentSchema.maxItems'
+              this.maxFileSizeExclusive
+                ? 'error.formatExclusiveMaximum'
+                : 'error.formatMaximum'
             );
 
+            const formatSize = formatBytes(this.maxFileSize);
             this.currentFileValidationErrors = this.t(
               key!,
-              `size should be less than ${formatBytes(this.maxFileSize)}`
+              `size should be less than ${formatSize}`,
+              {
+                size: `${formatSize}`,
+              }
             );
           }
         }
@@ -333,11 +344,18 @@ const fileRenderer = defineComponent({
               this.control.schema,
               this.control.uischema,
               this.control.path,
-              'error.contentSchema.minItems'
+              this.minFileSizeExclusive
+                ? 'error.formatExclusiveMinimum'
+                : 'error.formatMinimum'
             );
+
+            const formatSize = formatBytes(this.minFileSize);
             this.currentFileValidationErrors = this.t(
               key!,
-              `size should be greater than ${formatBytes(this.minFileSize)}`
+              `size should be greater than ${formatSize}`,
+              {
+                size: `${formatSize}`,
+              }
             );
           }
         }

From 0b5bbb482ade5f690042b1e002ffa5ccaa4c3ba6 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sat, 29 Oct 2022 12:37:56 -0400
Subject: [PATCH 4/9] add support for parameterized messages

---
 example/src/i18n/i18n.ts | 56 +++++++++++++++++++++++++++++-----------
 1 file changed, 41 insertions(+), 15 deletions(-)

diff --git a/example/src/i18n/i18n.ts b/example/src/i18n/i18n.ts
index 74bc46e0..1ac61276 100644
--- a/example/src/i18n/i18n.ts
+++ b/example/src/i18n/i18n.ts
@@ -1,20 +1,46 @@
+import { Translator } from '@jsonforms/core';
 import get from 'lodash/get';
+import template from 'lodash/template';
+import memoize from 'lodash/memoize';
 
-export const createTranslator =
-  (locale: string, translations?: Record<string, any>) =>
-  (key: string, defaultMessage: string | undefined): string | undefined => {
-    if (!translations) {
-      return defaultMessage;
-    }
+export const createTranslator = (
+  locale: string,
+  translations?: Record<string, any>
+): Translator => {
+  let localeTranslations = translations ? translations[locale] : undefined;
+
+  if (!localeTranslations && translations) {
+    const dashIndex = locale.indexOf('-');
+    localeTranslations =
+      dashIndex > 0 ? translations[locale.substring(0, dashIndex)] : undefined;
+  }
 
-    let localeTranslations = translations[locale];
-    if (!localeTranslations) {
-      // if specific locale like en-US is not available then use more generic like us
-      const dashIndex = locale.indexOf('-');
-      localeTranslations =
-        dashIndex > 0
-          ? translations[locale.substring(0, dashIndex)]
-          : translations['en'];
+  const translate = (
+    id: string,
+    defaultMessage: string | undefined,
+    values?: any
+  ): string | undefined => {
+    if (!localeTranslations) return defaultMessage;
+
+    const message = get(localeTranslations, id);
+    if (message && values) {
+      return translateWithParams(message, values) ?? defaultMessage;
     }
-    return get(localeTranslations, key) ?? defaultMessage;
+    return message ?? defaultMessage;
   };
+
+  return translate as Translator;
+};
+
+const translateWithParams = memoize(templateToMessage);
+
+function templateToMessage(
+  templateMessage: string,
+  params: Record<string, string | number> = {}
+): string {
+  const compiled = template(templateMessage, {
+    interpolate: /\${([\s\S]+?)}/g, // ${myVar}
+  });
+
+  return compiled(params);
+}

From b19a0384bdf8fe823a59916f0bee7a5bf226149e Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sat, 29 Oct 2022 12:53:33 -0400
Subject: [PATCH 5/9] match ajv param

---
 vue2-vuetify/src/controls/FileRenderer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/vue2-vuetify/src/controls/FileRenderer.vue b/vue2-vuetify/src/controls/FileRenderer.vue
index d23ed0a2..275bb4e6 100644
--- a/vue2-vuetify/src/controls/FileRenderer.vue
+++ b/vue2-vuetify/src/controls/FileRenderer.vue
@@ -329,7 +329,7 @@ const fileRenderer = defineComponent({
               key!,
               `size should be less than ${formatSize}`,
               {
-                size: `${formatSize}`,
+                limit: `${formatSize}`,
               }
             );
           }
@@ -354,7 +354,7 @@ const fileRenderer = defineComponent({
               key!,
               `size should be greater than ${formatSize}`,
               {
-                size: `${formatSize}`,
+                limit: `${formatSize}`,
               }
             );
           }

From 249885ce8798a43eb458bc358c48573e80fa2831 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sat, 29 Oct 2022 12:54:22 -0400
Subject: [PATCH 6/9] update file example

---
 example/src/examples/file/i18n.json     | 16 ++++++++++++++++
 example/src/examples/file/index.ts      |  4 +++-
 example/src/examples/file/schema.json   |  2 ++
 example/src/examples/file/uischema.json |  3 +--
 4 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 example/src/examples/file/i18n.json

diff --git a/example/src/examples/file/i18n.json b/example/src/examples/file/i18n.json
new file mode 100644
index 00000000..331a48b4
--- /dev/null
+++ b/example/src/examples/file/i18n.json
@@ -0,0 +1,16 @@
+{
+  "en": {
+    "imageDataUri": {
+      "label": "Image File",
+      "error": {
+        "formatMaximum": "size should be less than ${limit}"
+      }
+    },
+    "fileDataUriWithFileName": {
+      "label": "Image File"
+    },
+    "base64String": {
+      "label": "Image File"
+    }
+  }
+}
diff --git a/example/src/examples/file/index.ts b/example/src/examples/file/index.ts
index 8f5e6566..b942ddff 100644
--- a/example/src/examples/file/index.ts
+++ b/example/src/examples/file/index.ts
@@ -1,10 +1,12 @@
 import schema from './schema.json';
 import uischema from './uischema.json';
 import data from './data.json';
+import i18n from './i18n.json';
 import { UISchemaElement, JsonSchema } from '@jsonforms/core';
 
 export const input: {
   schema: JsonSchema;
   uischema: UISchemaElement;
   data: any;
-} = { schema, uischema, data };
+  i18n: any;
+} = { schema, uischema, data, i18n };
diff --git a/example/src/examples/file/schema.json b/example/src/examples/file/schema.json
index 273fec09..16bd3959 100644
--- a/example/src/examples/file/schema.json
+++ b/example/src/examples/file/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "imageDataUri": {
@@ -11,6 +12,7 @@
     "fileDataUriWithFileName": {
       "type": "string",
       "format": "binary",
+      "formatMaximum": "1048576",
       "description": "File with maximum size of 1MB encoded as data URI and including the file name"
     },
     "base64String": {
diff --git a/example/src/examples/file/uischema.json b/example/src/examples/file/uischema.json
index 8aa88cfa..a427dfaf 100644
--- a/example/src/examples/file/uischema.json
+++ b/example/src/examples/file/uischema.json
@@ -6,7 +6,7 @@
       "scope": "#/properties/imageDataUri",
       "options": {
         "showUnfocusedDescription": true,
-        "formatMaximum": 1048576,
+        "formatMaximum": "1048576",
         "vuetify": {
           "v-file-input": {
             "showSize": true
@@ -19,7 +19,6 @@
       "scope": "#/properties/fileDataUriWithFileName",
       "options": {
         "showUnfocusedDescription": true,
-        "formatMaximum": 1048576,
         "vuetify": {
           "v-file-input": {
             "showSize": true

From 2d4de6f99cfd57aec175341a5997ddbe74132440 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sat, 29 Oct 2022 12:59:19 -0400
Subject: [PATCH 7/9] add $schema property and format

---
 example/src/examples/allOf/schema.json        | 14 ++++--------
 example/src/examples/anyOf-simple/schema.json |  8 +++----
 example/src/examples/anyOf/schema.json        | 14 ++++--------
 .../src/examples/array-restrict/schema.json   |  8 +++----
 .../examples/array-with-reorder/schema.json   |  8 +++----
 example/src/examples/array/schema.json        |  8 +++----
 example/src/examples/basic/schema.json        |  1 +
 .../categorization-stepper-nav/schema.json    | 12 +++-------
 .../categorization-stepper/schema.json        | 12 +++-------
 .../src/examples/categorization/schema.json   | 12 +++-------
 .../src/examples/control-options/schema.json  |  1 +
 example/src/examples/control/schema.json      |  1 +
 .../src/examples/custom-renderer/schema.json  |  1 +
 example/src/examples/date/schema.json         |  1 +
 example/src/examples/datetime/schema.json     |  1 +
 .../src/examples/enum-in-array/schema.json    |  8 +++----
 example/src/examples/enum/schema.json         | 13 ++++-------
 example/src/examples/group-layout/schema.json | 22 +++++--------------
 .../examples/horizontal-layout/schema.json    | 22 +++++--------------
 example/src/examples/if-then-else/schema.json | 11 ++++------
 .../list-with-details-and-reorder/schema.json |  7 +++---
 .../list-with-details-restrict/schema.json    |  7 +++---
 .../examples/list-with-details/schema.json    |  7 +++---
 example/src/examples/login/schema.json        |  8 +++----
 example/src/examples/main/schema.json         | 13 ++++-------
 example/src/examples/multi-enum/schema.json   |  9 +++-----
 .../nested-array-restrict/schema.json         |  3 ++-
 .../nested-array-with-reorder/schema.json     |  5 ++---
 example/src/examples/nested-array/schema.json |  1 +
 .../src/examples/nested-layout/schema.json    | 22 +++++--------------
 example/src/examples/no-ui-schema/schema.json | 15 ++++---------
 example/src/examples/object/schema.json       | 13 +++--------
 example/src/examples/oneOf/schema.json        | 14 ++++--------
 example/src/examples/radio-group/schema.json  |  9 +++-----
 example/src/examples/radio/schema.json        |  1 +
 example/src/examples/rule/schema.json         | 15 ++++---------
 example/src/examples/time/schema.json         |  1 +
 .../src/examples/vertical-layout/schema.json  | 22 +++++--------------
 38 files changed, 110 insertions(+), 240 deletions(-)

diff --git a/example/src/examples/allOf/schema.json b/example/src/examples/allOf/schema.json
index c128998f..4535ec7a 100644
--- a/example/src/examples/allOf/schema.json
+++ b/example/src/examples/allOf/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "definitions": {
     "address": {
       "type": "object",
@@ -14,11 +15,7 @@
           "type": "string"
         }
       },
-      "required": [
-        "street_address",
-        "city",
-        "state"
-      ]
+      "required": ["street_address", "city", "state"]
     },
     "user": {
       "type": "object",
@@ -31,10 +28,7 @@
           "type": "string"
         }
       },
-      "required": [
-        "name",
-        "mail"
-      ]
+      "required": ["name", "mail"]
     }
   },
   "type": "object",
@@ -50,4 +44,4 @@
       ]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/anyOf-simple/schema.json b/example/src/examples/anyOf-simple/schema.json
index 0b7020ff..bf82edb3 100644
--- a/example/src/examples/anyOf-simple/schema.json
+++ b/example/src/examples/anyOf-simple/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "foo": {
@@ -7,12 +8,9 @@
           "type": "string"
         },
         {
-          "enum": [
-            "foo",
-            "bar"
-          ]
+          "enum": ["foo", "bar"]
         }
       ]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/anyOf/schema.json b/example/src/examples/anyOf/schema.json
index 58c1d49a..3a1859db 100644
--- a/example/src/examples/anyOf/schema.json
+++ b/example/src/examples/anyOf/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "definitions": {
     "address": {
       "type": "object",
@@ -14,11 +15,7 @@
           "type": "string"
         }
       },
-      "required": [
-        "street_address",
-        "city",
-        "state"
-      ]
+      "required": ["street_address", "city", "state"]
     },
     "user": {
       "type": "object",
@@ -31,10 +28,7 @@
           "type": "string"
         }
       },
-      "required": [
-        "name",
-        "mail"
-      ]
+      "required": ["name", "mail"]
     }
   },
   "type": "object",
@@ -50,4 +44,4 @@
       ]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/array-restrict/schema.json b/example/src/examples/array-restrict/schema.json
index d6f69d1e..6b535ce3 100644
--- a/example/src/examples/array-restrict/schema.json
+++ b/example/src/examples/array-restrict/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "comments": {
@@ -16,10 +17,7 @@
           },
           "enum": {
             "type": "string",
-            "enum": [
-              "foo",
-              "bar"
-            ]
+            "enum": ["foo", "bar"]
           }
         }
       },
@@ -27,4 +25,4 @@
       "maxItems": 5
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/array-with-reorder/schema.json b/example/src/examples/array-with-reorder/schema.json
index b2ac7ce4..fad10b75 100644
--- a/example/src/examples/array-with-reorder/schema.json
+++ b/example/src/examples/array-with-reorder/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "comments": {
@@ -16,13 +17,10 @@
           },
           "enum": {
             "type": "string",
-            "enum": [
-              "foo",
-              "bar"
-            ]
+            "enum": ["foo", "bar"]
           }
         }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/array/schema.json b/example/src/examples/array/schema.json
index b2ac7ce4..fad10b75 100644
--- a/example/src/examples/array/schema.json
+++ b/example/src/examples/array/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "comments": {
@@ -16,13 +17,10 @@
           },
           "enum": {
             "type": "string",
-            "enum": [
-              "foo",
-              "bar"
-            ]
+            "enum": ["foo", "bar"]
           }
         }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/basic/schema.json b/example/src/examples/basic/schema.json
index 9ca98a94..f6cc7ceb 100644
--- a/example/src/examples/basic/schema.json
+++ b/example/src/examples/basic/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "name": {
diff --git a/example/src/examples/categorization-stepper-nav/schema.json b/example/src/examples/categorization-stepper-nav/schema.json
index dbb0480d..391c5133 100644
--- a/example/src/examples/categorization-stepper-nav/schema.json
+++ b/example/src/examples/categorization-stepper-nav/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "firstName": {
@@ -21,14 +22,7 @@
     },
     "nationality": {
       "type": "string",
-      "enum": [
-        "DE",
-        "IT",
-        "JP",
-        "US",
-        "RU",
-        "Other"
-      ]
+      "enum": ["DE", "IT", "JP", "US", "RU", "Other"]
     },
     "provideAddress": {
       "type": "boolean"
@@ -74,4 +68,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/categorization-stepper/schema.json b/example/src/examples/categorization-stepper/schema.json
index dbb0480d..391c5133 100644
--- a/example/src/examples/categorization-stepper/schema.json
+++ b/example/src/examples/categorization-stepper/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "firstName": {
@@ -21,14 +22,7 @@
     },
     "nationality": {
       "type": "string",
-      "enum": [
-        "DE",
-        "IT",
-        "JP",
-        "US",
-        "RU",
-        "Other"
-      ]
+      "enum": ["DE", "IT", "JP", "US", "RU", "Other"]
     },
     "provideAddress": {
       "type": "boolean"
@@ -74,4 +68,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/categorization/schema.json b/example/src/examples/categorization/schema.json
index dbb0480d..391c5133 100644
--- a/example/src/examples/categorization/schema.json
+++ b/example/src/examples/categorization/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "firstName": {
@@ -21,14 +22,7 @@
     },
     "nationality": {
       "type": "string",
-      "enum": [
-        "DE",
-        "IT",
-        "JP",
-        "US",
-        "RU",
-        "Other"
-      ]
+      "enum": ["DE", "IT", "JP", "US", "RU", "Other"]
     },
     "provideAddress": {
       "type": "boolean"
@@ -74,4 +68,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/control-options/schema.json b/example/src/examples/control-options/schema.json
index 7e4cdc45..c2daad75 100644
--- a/example/src/examples/control-options/schema.json
+++ b/example/src/examples/control-options/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "multilineString": {
diff --git a/example/src/examples/control/schema.json b/example/src/examples/control/schema.json
index be46169d..43980d52 100644
--- a/example/src/examples/control/schema.json
+++ b/example/src/examples/control/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "string": {
diff --git a/example/src/examples/custom-renderer/schema.json b/example/src/examples/custom-renderer/schema.json
index 25c7f52d..92b0b7a0 100644
--- a/example/src/examples/custom-renderer/schema.json
+++ b/example/src/examples/custom-renderer/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "exampleArray": {
diff --git a/example/src/examples/date/schema.json b/example/src/examples/date/schema.json
index 4ac37835..60a400c4 100644
--- a/example/src/examples/date/schema.json
+++ b/example/src/examples/date/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "date": {
diff --git a/example/src/examples/datetime/schema.json b/example/src/examples/datetime/schema.json
index 94e8f746..c2c9b178 100644
--- a/example/src/examples/datetime/schema.json
+++ b/example/src/examples/datetime/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "dateTime": {
diff --git a/example/src/examples/enum-in-array/schema.json b/example/src/examples/enum-in-array/schema.json
index 3da1e05b..bcefddd6 100644
--- a/example/src/examples/enum-in-array/schema.json
+++ b/example/src/examples/enum-in-array/schema.json
@@ -1,14 +1,12 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "array",
   "items": {
     "type": "object",
     "properties": {
       "plainEnum": {
         "type": "string",
-        "enum": [
-          "foo",
-          "bar"
-        ]
+        "enum": ["foo", "bar"]
       },
       "oneOfEnum": {
         "type": "string",
@@ -29,4 +27,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/enum/schema.json b/example/src/examples/enum/schema.json
index b21d8d72..1e3f6dcd 100644
--- a/example/src/examples/enum/schema.json
+++ b/example/src/examples/enum/schema.json
@@ -1,19 +1,14 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "plainEnum": {
       "type": "string",
-      "enum": [
-        "foo",
-        "bar"
-      ]
+      "enum": ["foo", "bar"]
     },
     "plainEnumSet": {
       "type": "string",
-      "enum": [
-        "foo",
-        "bar"
-      ]
+      "enum": ["foo", "bar"]
     },
     "oneOfEnum": {
       "type": "string",
@@ -50,4 +45,4 @@
       ]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/group-layout/schema.json b/example/src/examples/group-layout/schema.json
index 215f8fd8..963d4bf6 100644
--- a/example/src/examples/group-layout/schema.json
+++ b/example/src/examples/group-layout/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "name": {
@@ -15,14 +16,7 @@
     },
     "nationality": {
       "type": "string",
-      "enum": [
-        "DE",
-        "IT",
-        "JP",
-        "US",
-        "RU",
-        "Other"
-      ]
+      "enum": ["DE", "IT", "JP", "US", "RU", "Other"]
     },
     "personalData": {
       "type": "object",
@@ -41,10 +35,7 @@
           "default": 7
         }
       },
-      "required": [
-        "age",
-        "height"
-      ]
+      "required": ["age", "height"]
     },
     "occupation": {
       "type": "string"
@@ -54,8 +45,5 @@
       "maxLength": 5
     }
   },
-  "required": [
-    "occupation",
-    "nationality"
-  ]
-}
\ No newline at end of file
+  "required": ["occupation", "nationality"]
+}
diff --git a/example/src/examples/horizontal-layout/schema.json b/example/src/examples/horizontal-layout/schema.json
index 215f8fd8..963d4bf6 100644
--- a/example/src/examples/horizontal-layout/schema.json
+++ b/example/src/examples/horizontal-layout/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "name": {
@@ -15,14 +16,7 @@
     },
     "nationality": {
       "type": "string",
-      "enum": [
-        "DE",
-        "IT",
-        "JP",
-        "US",
-        "RU",
-        "Other"
-      ]
+      "enum": ["DE", "IT", "JP", "US", "RU", "Other"]
     },
     "personalData": {
       "type": "object",
@@ -41,10 +35,7 @@
           "default": 7
         }
       },
-      "required": [
-        "age",
-        "height"
-      ]
+      "required": ["age", "height"]
     },
     "occupation": {
       "type": "string"
@@ -54,8 +45,5 @@
       "maxLength": 5
     }
   },
-  "required": [
-    "occupation",
-    "nationality"
-  ]
-}
\ No newline at end of file
+  "required": ["occupation", "nationality"]
+}
diff --git a/example/src/examples/if-then-else/schema.json b/example/src/examples/if-then-else/schema.json
index 883ac90a..88fcd73a 100644
--- a/example/src/examples/if-then-else/schema.json
+++ b/example/src/examples/if-then-else/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "b": {
@@ -12,15 +13,11 @@
   "if": {
     "properties": {
       "b": {
-        "enum": [
-          false
-        ]
+        "enum": [false]
       }
     }
   },
   "then": {
-    "required": [
-      "c"
-    ]
+    "required": ["c"]
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/list-with-details-and-reorder/schema.json b/example/src/examples/list-with-details-and-reorder/schema.json
index 2714669b..8448b800 100644
--- a/example/src/examples/list-with-details-and-reorder/schema.json
+++ b/example/src/examples/list-with-details-and-reorder/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "users": {
@@ -22,10 +23,8 @@
             "minimum": 0
           }
         },
-        "required": [
-          "firstname"
-        ]
+        "required": ["firstname"]
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/list-with-details-restrict/schema.json b/example/src/examples/list-with-details-restrict/schema.json
index 9c536700..4e6c5184 100644
--- a/example/src/examples/list-with-details-restrict/schema.json
+++ b/example/src/examples/list-with-details-restrict/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "users": {
@@ -22,12 +23,10 @@
             "minimum": 0
           }
         },
-        "required": [
-          "firstname"
-        ]
+        "required": ["firstname"]
       },
       "minItems": 1,
       "maxItems": 5
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/list-with-details/schema.json b/example/src/examples/list-with-details/schema.json
index 2714669b..8448b800 100644
--- a/example/src/examples/list-with-details/schema.json
+++ b/example/src/examples/list-with-details/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "users": {
@@ -22,10 +23,8 @@
             "minimum": 0
           }
         },
-        "required": [
-          "firstname"
-        ]
+        "required": ["firstname"]
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/login/schema.json b/example/src/examples/login/schema.json
index 7368bee5..acd6b6ed 100644
--- a/example/src/examples/login/schema.json
+++ b/example/src/examples/login/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "username": {
@@ -11,8 +12,5 @@
       "description": "Login password"
     }
   },
-  "required": [
-    "username",
-    "password"
-  ]
-}
\ No newline at end of file
+  "required": ["username", "password"]
+}
diff --git a/example/src/examples/main/schema.json b/example/src/examples/main/schema.json
index 8d4f6bcd..82f4e4ea 100644
--- a/example/src/examples/main/schema.json
+++ b/example/src/examples/main/schema.json
@@ -1,8 +1,7 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
-  "required": [
-    "age"
-  ],
+  "required": ["age"],
   "properties": {
     "firstName": {
       "type": "string",
@@ -21,11 +20,7 @@
     },
     "gender": {
       "type": "string",
-      "enum": [
-        "Male",
-        "Female",
-        "Undisclosed"
-      ]
+      "enum": ["Male", "Female", "Undisclosed"]
     },
     "height": {
       "type": "number"
@@ -58,4 +53,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/multi-enum/schema.json b/example/src/examples/multi-enum/schema.json
index d4277792..c2e5ebe0 100644
--- a/example/src/examples/multi-enum/schema.json
+++ b/example/src/examples/multi-enum/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "oneOfMultiEnum": {
@@ -26,12 +27,8 @@
       "uniqueItems": true,
       "items": {
         "type": "string",
-        "enum": [
-          "foo",
-          "bar",
-          "foobar"
-        ]
+        "enum": ["foo", "bar", "foobar"]
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/nested-array-restrict/schema.json b/example/src/examples/nested-array-restrict/schema.json
index f087dce6..f9c79f44 100644
--- a/example/src/examples/nested-array-restrict/schema.json
+++ b/example/src/examples/nested-array-restrict/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "exampleArray": {
@@ -21,4 +22,4 @@
       "maxItems": 5
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/nested-array-with-reorder/schema.json b/example/src/examples/nested-array-with-reorder/schema.json
index 17220f04..fefff772 100644
--- a/example/src/examples/nested-array-with-reorder/schema.json
+++ b/example/src/examples/nested-array-with-reorder/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "exampleArray": {
@@ -15,9 +16,7 @@
             }
           }
         },
-        "required":[
-          "name"
-        ]
+        "required": ["name"]
       }
     }
   }
diff --git a/example/src/examples/nested-array/schema.json b/example/src/examples/nested-array/schema.json
index 82eab10f..fd663b3d 100644
--- a/example/src/examples/nested-array/schema.json
+++ b/example/src/examples/nested-array/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "exampleArray": {
diff --git a/example/src/examples/nested-layout/schema.json b/example/src/examples/nested-layout/schema.json
index 215f8fd8..963d4bf6 100644
--- a/example/src/examples/nested-layout/schema.json
+++ b/example/src/examples/nested-layout/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "name": {
@@ -15,14 +16,7 @@
     },
     "nationality": {
       "type": "string",
-      "enum": [
-        "DE",
-        "IT",
-        "JP",
-        "US",
-        "RU",
-        "Other"
-      ]
+      "enum": ["DE", "IT", "JP", "US", "RU", "Other"]
     },
     "personalData": {
       "type": "object",
@@ -41,10 +35,7 @@
           "default": 7
         }
       },
-      "required": [
-        "age",
-        "height"
-      ]
+      "required": ["age", "height"]
     },
     "occupation": {
       "type": "string"
@@ -54,8 +45,5 @@
       "maxLength": 5
     }
   },
-  "required": [
-    "occupation",
-    "nationality"
-  ]
-}
\ No newline at end of file
+  "required": ["occupation", "nationality"]
+}
diff --git a/example/src/examples/no-ui-schema/schema.json b/example/src/examples/no-ui-schema/schema.json
index 6dbc016e..542db3fb 100644
--- a/example/src/examples/no-ui-schema/schema.json
+++ b/example/src/examples/no-ui-schema/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "name": {
@@ -18,20 +19,12 @@
         }
       },
       "additionalProperties": true,
-      "required": [
-        "age"
-      ]
+      "required": ["age"]
     },
     "postalCode": {
       "type": "string"
     }
   },
   "additionalProperties": true,
-  "required": [
-    "name",
-    "vegetarian",
-    "birthDate",
-    "personalData",
-    "postalCode"
-  ]
-}
\ No newline at end of file
+  "required": ["name", "vegetarian", "birthDate", "personalData", "postalCode"]
+}
diff --git a/example/src/examples/object/schema.json b/example/src/examples/object/schema.json
index 980dc09f..b3614988 100644
--- a/example/src/examples/object/schema.json
+++ b/example/src/examples/object/schema.json
@@ -15,11 +15,7 @@
           "type": "string"
         }
       },
-      "required": [
-        "street_address",
-        "city",
-        "state"
-      ]
+      "required": ["street_address", "city", "state"]
     },
     "user": {
       "type": "object",
@@ -31,10 +27,7 @@
           "type": "string"
         }
       },
-      "required": [
-        "name",
-        "mail"
-      ]
+      "required": ["name", "mail"]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/oneOf/schema.json b/example/src/examples/oneOf/schema.json
index 6b96db35..9c06e516 100644
--- a/example/src/examples/oneOf/schema.json
+++ b/example/src/examples/oneOf/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "definitions": {
     "address": {
       "type": "object",
@@ -14,11 +15,7 @@
           "type": "string"
         }
       },
-      "required": [
-        "street_address",
-        "city",
-        "state"
-      ]
+      "required": ["street_address", "city", "state"]
     },
     "user": {
       "type": "object",
@@ -31,10 +28,7 @@
           "type": "string"
         }
       },
-      "required": [
-        "name",
-        "mail"
-      ]
+      "required": ["name", "mail"]
     }
   },
   "type": "object",
@@ -50,4 +44,4 @@
       ]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/radio-group/schema.json b/example/src/examples/radio-group/schema.json
index 63ad5224..0c3b3fe7 100644
--- a/example/src/examples/radio-group/schema.json
+++ b/example/src/examples/radio-group/schema.json
@@ -1,13 +1,10 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "exampleRadioEnum": {
       "type": "string",
-      "enum": [
-        "One",
-        "Two",
-        "Three"
-      ]
+      "enum": ["One", "Two", "Three"]
     },
     "exampleRadioOneOfEnum": {
       "type": "string",
@@ -27,4 +24,4 @@
       ]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/radio/schema.json b/example/src/examples/radio/schema.json
index e111e18d..81d6262c 100644
--- a/example/src/examples/radio/schema.json
+++ b/example/src/examples/radio/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "exampleRadioEnum": {
diff --git a/example/src/examples/rule/schema.json b/example/src/examples/rule/schema.json
index ec821735..653c58c7 100644
--- a/example/src/examples/rule/schema.json
+++ b/example/src/examples/rule/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "name": {
@@ -9,22 +10,14 @@
     },
     "kindOfDead": {
       "type": "string",
-      "enum": [
-        "Zombie",
-        "Vampire",
-        "Ghoul"
-      ]
+      "enum": ["Zombie", "Vampire", "Ghoul"]
     },
     "vegetables": {
       "type": "boolean"
     },
     "kindOfVegetables": {
       "type": "string",
-      "enum": [
-        "All",
-        "Some",
-        "Only potatoes"
-      ]
+      "enum": ["All", "Some", "Only potatoes"]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/time/schema.json b/example/src/examples/time/schema.json
index e80ec773..a20befc5 100644
--- a/example/src/examples/time/schema.json
+++ b/example/src/examples/time/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "time": {
diff --git a/example/src/examples/vertical-layout/schema.json b/example/src/examples/vertical-layout/schema.json
index 215f8fd8..963d4bf6 100644
--- a/example/src/examples/vertical-layout/schema.json
+++ b/example/src/examples/vertical-layout/schema.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
     "name": {
@@ -15,14 +16,7 @@
     },
     "nationality": {
       "type": "string",
-      "enum": [
-        "DE",
-        "IT",
-        "JP",
-        "US",
-        "RU",
-        "Other"
-      ]
+      "enum": ["DE", "IT", "JP", "US", "RU", "Other"]
     },
     "personalData": {
       "type": "object",
@@ -41,10 +35,7 @@
           "default": 7
         }
       },
-      "required": [
-        "age",
-        "height"
-      ]
+      "required": ["age", "height"]
     },
     "occupation": {
       "type": "string"
@@ -54,8 +45,5 @@
       "maxLength": 5
     }
   },
-  "required": [
-    "occupation",
-    "nationality"
-  ]
-}
\ No newline at end of file
+  "required": ["occupation", "nationality"]
+}

From e6f51bed5f31cafce457f2d93e61435cc351e3b9 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sat, 29 Oct 2022 13:10:43 -0400
Subject: [PATCH 8/9] provide the original limit parameter as well as formatted
 version

---
 example/src/examples/file/i18n.json        | 2 +-
 vue2-vuetify/src/controls/FileRenderer.vue | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/example/src/examples/file/i18n.json b/example/src/examples/file/i18n.json
index 331a48b4..7797d59b 100644
--- a/example/src/examples/file/i18n.json
+++ b/example/src/examples/file/i18n.json
@@ -3,7 +3,7 @@
     "imageDataUri": {
       "label": "Image File",
       "error": {
-        "formatMaximum": "size should be less than ${limit}"
+        "formatMaximum": "size should be less than ${limitText}"
       }
     },
     "fileDataUriWithFileName": {
diff --git a/vue2-vuetify/src/controls/FileRenderer.vue b/vue2-vuetify/src/controls/FileRenderer.vue
index 275bb4e6..13c1f1fc 100644
--- a/vue2-vuetify/src/controls/FileRenderer.vue
+++ b/vue2-vuetify/src/controls/FileRenderer.vue
@@ -329,7 +329,8 @@ const fileRenderer = defineComponent({
               key!,
               `size should be less than ${formatSize}`,
               {
-                limit: `${formatSize}`,
+                limitText: `${formatSize}`,
+                limit: `${this.maxFileSize}`,
               }
             );
           }
@@ -354,7 +355,8 @@ const fileRenderer = defineComponent({
               key!,
               `size should be greater than ${formatSize}`,
               {
-                limit: `${formatSize}`,
+                limitText: `${formatSize}`,
+                limit: `${this.maxFileSize}`,
               }
             );
           }

From 829fd83d896072bcd833830a8e3d0dcf3d7c8f70 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sat, 29 Oct 2022 13:12:03 -0400
Subject: [PATCH 9/9] fix the key variable access

---
 vue2-vuetify/src/controls/FileRenderer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/vue2-vuetify/src/controls/FileRenderer.vue b/vue2-vuetify/src/controls/FileRenderer.vue
index 13c1f1fc..3bda6871 100644
--- a/vue2-vuetify/src/controls/FileRenderer.vue
+++ b/vue2-vuetify/src/controls/FileRenderer.vue
@@ -326,7 +326,7 @@ const fileRenderer = defineComponent({
 
             const formatSize = formatBytes(this.maxFileSize);
             this.currentFileValidationErrors = this.t(
-              key!,
+              key,
               `size should be less than ${formatSize}`,
               {
                 limitText: `${formatSize}`,
@@ -352,7 +352,7 @@ const fileRenderer = defineComponent({
 
             const formatSize = formatBytes(this.minFileSize);
             this.currentFileValidationErrors = this.t(
-              key!,
+              key,
               `size should be greater than ${formatSize}`,
               {
                 limitText: `${formatSize}`,