feat: Add QFileControlRenderer component for handling file inputs

Author: tacxou

src/components/quasar-jsonform/controls/QFileControlRenderer.vue

@@ -0,0 +1,100 @@
+<template lang="pug">
+//control-wrapper(v-bind="controlWrapper" :styles="styles" :isFocused="isFocused" :appliedOptions="appliedOptions")
+div(style="cursor: pointer")
+  q-input(
+    :id="control.id + '-input'"
+    :disable="!control.enabled"
+    :placeholder="appliedOptions.placeholder"
+    :label="computedLabel"
+    :model-value="control.data"
+    :clearable="true"
+    readonly
+    @click="open"
+    @update:model-value="onChangeControl"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+    :style="{paddingBottom: control.errors !== '' ? 'revert-layer' : 0}"
+    filled
+  )
+    template(v-slot:prepend)
+      q-icon(name="mdi-paperclip")
+  q-card(style="border-radius: 0")
+    img(:src="baseUrl + '/management/identities/photo/raw?' + photoUrlQuery.params")
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useFileDialog } from '@vueuse/core'
+import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
+import { isArray, isObject, isString, iterate } from 'radash';
+import type { RendererProps } from '@jsonforms/vue';
+import type { ControlElement } from '@jsonforms/core';
+import { useQuasarControl } from '../util';
+import { ControlWrapper } from '@jsonforms/vue-vanilla';
+
+const QStringControlRenderer = defineComponent({
+  name: 'q-string-control-renderer',
+  components: {
+    ControlWrapper,
+  },
+  props: {
+    ...rendererProps<ControlElement>(),
+  },
+  inject: ['jsonforms'],
+  setup(props: RendererProps<ControlElement>) {
+    const { files, open, reset, onChange: onChangeFile } = useFileDialog({
+      accept: 'image/*',
+      multiple: false,
+      directory: false,
+    })
+    const config = useAppConfig();
+
+    return {
+      open,
+      onChangeFile,
+      photo: null,
+      baseUrl: config.baseUrl,
+      ...useQuasarControl(
+        useJsonFormsControl(props),
+        (value) => isObject(value) ? (value as any).value : value || undefined,
+      )
+    }
+  },
+  methods: {
+    onChangeControl(val) {
+      console.log('val', val)
+      debugger
+      this.onChange([
+        this.control?.uischema.options?.storage || 'data',
+        val.name,
+      ].join(':'));
+    },
+  },
+  async mounted() {
+    this.onChangeFile((files) => {
+      this.onChangeControl(files?.length ? files[0] : null);
+    });
+  },
+  computed: {
+    computedLabel() {
+      return this.control.label === undefined ? this.control.schema.title : this.control.label;
+    },
+    photoUrlQuery() {
+      const query = new URLSearchParams();
+      const employeeNumber = (this.jsonforms as any)?.core?.data?.employeeNumber;
+      const employeeType = (this.jsonforms as any)?.core?.data?.employeeType;
+
+      query.append('filters[:inetOrgPerson.employeeNumber]', employeeNumber);
+      query.append('filters[:inetOrgPerson.employeeType]', employeeType);
+
+      return {
+        params: query.toString(),
+        employeeNumber,
+        employeeType,
+      };
+    },
+  },
+});
+export default QStringControlRenderer;
+
+</script>

src/components/quasar-jsonform/controls/index.ts

@@ -3,7 +3,8 @@ import QArrayControlRenderer from "./QArrayControlRenderer.vue";
 import QDateControlRenderer from "./QDateControlRenderer.vue";
 import QNumberControlRenderer from "./QNumberControlRenderer.vue";
 import QPasswordControlRenderer from "./QPasswordControlRenderer.vue";
-import { and, formatIs, isControl, isDateControl, isNumberControl, isPrimitiveArrayControl, or, rankWith, scopeEndsWith, type JsonFormsRendererRegistryEntry } from "@jsonforms/core";
+import QFileControlRenderer from "./QFileControlRenderer.vue";
+import { and, formatIs, isControl, isDateControl, isNumberControl, isPrimitiveArrayControl, optionIs, or, rankWith, scopeEndsWith, uiTypeIs, type JsonFormsRendererRegistryEntry } from "@jsonforms/core";
 
 const QDateControlRendererEntry: JsonFormsRendererRegistryEntry = {
   renderer: QDateControlRenderer,
@@ -30,10 +31,20 @@ export const QPasswordControlRendererEntry: JsonFormsRendererRegistryEntry = {
   tester: rankWith(2, or(and(isControl, formatIs('password')), scopeEndsWith('password'))),
 };
 
+
+export const QFileControlRendererEntry: JsonFormsRendererRegistryEntry = {
+  renderer: QFileControlRenderer,
+  tester: rankWith(2, or(
+    and(isControl, optionIs('format', 'file')),
+    and(scopeEndsWith('file')),
+  )),
+};
+
 export const ControlsRenderer = [
   QDateControlRendererEntry,
   QNumberControlRendererEntry,
   QStringControlRendererEntry,
   QArrayControlRendererEntry,
   QPasswordControlRendererEntry,
+  QFileControlRendererEntry,
 ];