@btst/plugin-form-builder 1.0.0-beta.0 → 1.2.0-beta.1

package/dist/api/index.cjs

@@ -11,6 +11,7 @@ const queryKeyDefs = require('./query-key-defs.cjs');
 
 exports.formBuilderBackendPlugin = plugin.formBuilderBackendPlugin;
 exports.FORM_BUILDER_LIFECYCLE_HOOK_MIGRATIONS = lifecycleMigrations.FORM_BUILDER_LIFECYCLE_HOOK_MIGRATIONS;
+exports.ExportSubmissionsOperationInputSchema = operations.ExportSubmissionsOperationInputSchema;
 exports.FormBuilderOperationError = operations.FormBuilderOperationError;
 exports.createFormBuilderOperations = operations.createFormBuilderOperations;
 exports.formBuilderPermissions = permissions.formBuilderPermissions;

package/dist/api/index.d.cts

@@ -1,4 +1,4 @@
-export { F as FORM_QUERY_KEYS, a as FormBuilderApiRouter, b as FormBuilderOperationError, c as FormBuilderOperations, d as FormBuilderRouteKey, e as FormListOperationResult, S as SubmissionDetailOperationResult, f as SubmissionListOperationResult, g as SubmitOperationResult, h as createFormBuilderOperations, i as formBuilderBackendPlugin } from '../shared/plugin-form-builder.Bbl9NufB.cjs';
+export { E as ExportSubmissionsOperationInputSchema, F as FORM_QUERY_KEYS, a as FormBuilderApiRouter, b as FormBuilderOperationError, c as FormBuilderOperations, d as FormBuilderRouteKey, e as FormListOperationResult, S as SubmissionDetailOperationResult, f as SubmissionListOperationResult, g as SubmitOperationResult, h as createFormBuilderOperations, i as formBuilderBackendPlugin } from '../shared/plugin-form-builder.DXdOj9vM.cjs';
 export { formBuilderPermissions } from '../permissions.cjs';
 import { d as SerializedFormSubmissionSummary } from '../shared/plugin-form-builder.Cmk083dA.cjs';
 import { SerializedForm, SerializedFormSubmissionWithData, Form, FormSubmission, SerializedFormSubmission, FormSubmissionWithForm } from '../types.cjs';

package/dist/api/index.d.mts

@@ -1,4 +1,4 @@
-export { F as FORM_QUERY_KEYS, a as FormBuilderApiRouter, b as FormBuilderOperationError, c as FormBuilderOperations, d as FormBuilderRouteKey, e as FormListOperationResult, S as SubmissionDetailOperationResult, f as SubmissionListOperationResult, g as SubmitOperationResult, h as createFormBuilderOperations, i as formBuilderBackendPlugin } from '../shared/plugin-form-builder.lp98rFNl.mjs';
+export { E as ExportSubmissionsOperationInputSchema, F as FORM_QUERY_KEYS, a as FormBuilderApiRouter, b as FormBuilderOperationError, c as FormBuilderOperations, d as FormBuilderRouteKey, e as FormListOperationResult, S as SubmissionDetailOperationResult, f as SubmissionListOperationResult, g as SubmitOperationResult, h as createFormBuilderOperations, i as formBuilderBackendPlugin } from '../shared/plugin-form-builder.PWs25HN1.mjs';
 export { formBuilderPermissions } from '../permissions.mjs';
 import { d as SerializedFormSubmissionSummary } from '../shared/plugin-form-builder.BZYGyFgT.mjs';
 import { SerializedForm, SerializedFormSubmissionWithData, Form, FormSubmission, SerializedFormSubmission, FormSubmissionWithForm } from '../types.mjs';

package/dist/api/index.d.ts

@@ -1,4 +1,4 @@
-export { F as FORM_QUERY_KEYS, a as FormBuilderApiRouter, b as FormBuilderOperationError, c as FormBuilderOperations, d as FormBuilderRouteKey, e as FormListOperationResult, S as SubmissionDetailOperationResult, f as SubmissionListOperationResult, g as SubmitOperationResult, h as createFormBuilderOperations, i as formBuilderBackendPlugin } from '../shared/plugin-form-builder.CSP5HR2O.js';
+export { E as ExportSubmissionsOperationInputSchema, F as FORM_QUERY_KEYS, a as FormBuilderApiRouter, b as FormBuilderOperationError, c as FormBuilderOperations, d as FormBuilderRouteKey, e as FormListOperationResult, S as SubmissionDetailOperationResult, f as SubmissionListOperationResult, g as SubmitOperationResult, h as createFormBuilderOperations, i as formBuilderBackendPlugin } from '../shared/plugin-form-builder.65tLgfcd.js';
 export { formBuilderPermissions } from '../permissions.js';
 import { d as SerializedFormSubmissionSummary } from '../shared/plugin-form-builder.D258Qpb8.js';
 import { SerializedForm, SerializedFormSubmissionWithData, Form, FormSubmission, SerializedFormSubmission, FormSubmissionWithForm } from '../types.js';

package/dist/api/index.mjs

@@ -1,6 +1,6 @@
 export { formBuilderBackendPlugin } from './plugin.mjs';
 export { FORM_BUILDER_LIFECYCLE_HOOK_MIGRATIONS } from './lifecycle-migrations.mjs';
-export { FormBuilderOperationError, createFormBuilderOperations } from './operations.mjs';
+export { ExportSubmissionsOperationInputSchema, FormBuilderOperationError, createFormBuilderOperations } from './operations.mjs';
 export { formBuilderPermissions } from '../permissions.mjs';
 export { getAllForms, getFormById, getFormBySlug, getFormSubmissions, serializeForm, serializeFormSubmission, serializeFormSubmissionSummary, serializeFormSubmissionWithData } from './getters.mjs';
 export { FORM_QUERY_KEYS } from './query-key-defs.mjs';

package/dist/api/operations.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+const submissionsCsv = require('./submissions-csv.cjs');
 const api = require('@btst/stack/plugins/api');
 const schemaConverter = require('../ui/src/lib/schema-converter.cjs');
 const z = require('zod');
@@ -30,6 +31,9 @@ const ListSubmissionsOperationInputSchema = z.z.object({
   formId: z.z.string(),
   query: schemas.listSubmissionsQuerySchema
 });
+const ExportSubmissionsOperationInputSchema = z.z.object({
+  formId: z.z.string()
+});
 const GetSubmissionOperationInputSchema = z.z.object({
   formId: z.z.string(),
   submissionId: z.z.string()
@@ -749,6 +753,7 @@ function createFormBuilderOperations(adapter, hooks) {
           "FORM_NOT_ACTIVE"
         );
       }
+      let validatedData;
       try {
         const jsonSchema = JSON.parse(form.schema);
         const validation = schemaConverter.formSchemaToZod(jsonSchema).safeParse(
@@ -762,6 +767,7 @@ function createFormBuilderOperations(adapter, hooks) {
             validation.error.issues
           );
         }
+        validatedData = validation.data;
       } catch (error) {
         if (error instanceof FormBuilderOperationError) throw error;
         throw new FormBuilderOperationError(
@@ -775,9 +781,7 @@ function createFormBuilderOperations(adapter, hooks) {
         form.slug,
         form.id
       );
-      const submittedData = JSON.parse(
-        JSON.stringify(context.input.data)
-      );
+      const submittedData = JSON.parse(JSON.stringify(validatedData));
       return adapter.transaction(async (tx) => {
         const current = await findFormBySlug(tx, context.input.slug);
         if (!sameFormSnapshot(current, authorized)) throw staleFormError();
@@ -796,7 +800,17 @@ function createFormBuilderOperations(adapter, hooks) {
           400,
           "SUBMISSION_REJECTED"
         );
-        const finalData = hookResult ?? submittedData;
+        const finalValidation = schemaConverter.formSchemaToZod(
+          JSON.parse(form.schema)
+        ).safeParse(hookResult ?? submittedData);
+        if (!finalValidation.success)
+          throw new FormBuilderOperationError(
+            400,
+            "Validation failed",
+            "SUBMISSION_VALIDATION_FAILED",
+            finalValidation.error.issues
+          );
+        const finalData = finalValidation.data;
         const claimed = await findFormById(tx, authorized.id);
         if (!sameFormSnapshot(claimed, { ...authorized, updatedAt: claimedAt }) || claimed?.status !== "active") {
           throw staleFormError();
@@ -856,6 +870,50 @@ function createFormBuilderOperations(adapter, hooks) {
       await notifyError(hooks, error, "submit", lifecycleContext);
     }
   });
+  const exportSubmissions = api.defineOperation({
+    input: ExportSubmissionsOperationInputSchema,
+    permission: permissions.formBuilderPermissions.submission.export,
+    facts: async ({ input }) => {
+      const form = await findFormById(adapter, input.formId);
+      formSnapshots.set(input, form ? snapshotForm(form) : null);
+      return {
+        formId: input.formId,
+        formExists: form !== null,
+        ...form?.createdBy ? { ownerId: form.createdBy } : {}
+      };
+    },
+    execute: async ({ input }) => adapter.transaction(async (tx) => {
+      const expected = formSnapshots.get(input) ?? null;
+      const form = await findFormById(tx, input.formId);
+      if (!sameFormSnapshot(form, expected)) throw staleFormError();
+      if (!form) throw formNotFoundError();
+      const items = [];
+      let sourceCharacters = 0;
+      for (; ; ) {
+        const page = await getters.getFormSubmissions(tx, input.formId, {
+          limit: 100,
+          offset: items.length
+        });
+        if (page.total > submissionsCsv.CSV_EXPORT_MAX_ROWS) throw submissionsCsv.csvExportLimitError();
+        for (const item of page.items) {
+          sourceCharacters += item.data.length;
+          if (sourceCharacters > submissionsCsv.CSV_EXPORT_MAX_BYTES)
+            throw submissionsCsv.csvExportLimitError();
+          items.push(item);
+        }
+        if (!page.items.length || items.length >= page.total) break;
+      }
+      const current = await findFormById(tx, input.formId);
+      if (!sameFormSnapshot(current, expected)) throw staleFormError();
+      return {
+        csv: submissionsCsv.submissionsToCsv(
+          items,
+          Object.keys(JSON.parse(form.schema).properties ?? {})
+        ),
+        filename: `${form.slug}-submissions.csv`
+      };
+    })
+  });
   const listSubmissions = api.defineOperation({
     input: ListSubmissionsOperationInputSchema,
     permission: permissions.formBuilderPermissions.submission.read,
@@ -1067,6 +1125,7 @@ function createFormBuilderOperations(adapter, hooks) {
     onError: ({ error, ...context }) => notifyError(hooks, error, "deleteSubmission", hookContext(context))
   });
   return {
+    exportSubmissions,
     listForms,
     getFormBySlug,
     getFormById,
@@ -1082,6 +1141,7 @@ function createFormBuilderOperations(adapter, hooks) {
 }
 
 exports.DeleteFormOperationInputSchema = DeleteFormOperationInputSchema;
+exports.ExportSubmissionsOperationInputSchema = ExportSubmissionsOperationInputSchema;
 exports.FormBuilderOperationError = FormBuilderOperationError;
 exports.GetFormByIdOperationInputSchema = GetFormByIdOperationInputSchema;
 exports.GetFormBySlugOperationInputSchema = GetFormBySlugOperationInputSchema;

package/dist/api/operations.mjs

@@ -1,3 +1,4 @@
+import { CSV_EXPORT_MAX_ROWS, csvExportLimitError, CSV_EXPORT_MAX_BYTES, submissionsToCsv } from './submissions-csv.mjs';
 import { OperationHttpError, defineOperation } from '@btst/stack/plugins/api';
 import { formSchemaToZod } from '../ui/src/lib/schema-converter.mjs';
 import { z } from 'zod';
@@ -28,6 +29,9 @@ const ListSubmissionsOperationInputSchema = z.object({
   formId: z.string(),
   query: listSubmissionsQuerySchema
 });
+const ExportSubmissionsOperationInputSchema = z.object({
+  formId: z.string()
+});
 const GetSubmissionOperationInputSchema = z.object({
   formId: z.string(),
   submissionId: z.string()
@@ -747,6 +751,7 @@ function createFormBuilderOperations(adapter, hooks) {
           "FORM_NOT_ACTIVE"
         );
       }
+      let validatedData;
       try {
         const jsonSchema = JSON.parse(form.schema);
         const validation = formSchemaToZod(jsonSchema).safeParse(
@@ -760,6 +765,7 @@ function createFormBuilderOperations(adapter, hooks) {
             validation.error.issues
           );
         }
+        validatedData = validation.data;
       } catch (error) {
         if (error instanceof FormBuilderOperationError) throw error;
         throw new FormBuilderOperationError(
@@ -773,9 +779,7 @@ function createFormBuilderOperations(adapter, hooks) {
         form.slug,
         form.id
       );
-      const submittedData = JSON.parse(
-        JSON.stringify(context.input.data)
-      );
+      const submittedData = JSON.parse(JSON.stringify(validatedData));
       return adapter.transaction(async (tx) => {
         const current = await findFormBySlug(tx, context.input.slug);
         if (!sameFormSnapshot(current, authorized)) throw staleFormError();
@@ -794,7 +798,17 @@ function createFormBuilderOperations(adapter, hooks) {
           400,
           "SUBMISSION_REJECTED"
         );
-        const finalData = hookResult ?? submittedData;
+        const finalValidation = formSchemaToZod(
+          JSON.parse(form.schema)
+        ).safeParse(hookResult ?? submittedData);
+        if (!finalValidation.success)
+          throw new FormBuilderOperationError(
+            400,
+            "Validation failed",
+            "SUBMISSION_VALIDATION_FAILED",
+            finalValidation.error.issues
+          );
+        const finalData = finalValidation.data;
         const claimed = await findFormById(tx, authorized.id);
         if (!sameFormSnapshot(claimed, { ...authorized, updatedAt: claimedAt }) || claimed?.status !== "active") {
           throw staleFormError();
@@ -854,6 +868,50 @@ function createFormBuilderOperations(adapter, hooks) {
       await notifyError(hooks, error, "submit", lifecycleContext);
     }
   });
+  const exportSubmissions = defineOperation({
+    input: ExportSubmissionsOperationInputSchema,
+    permission: formBuilderPermissions.submission.export,
+    facts: async ({ input }) => {
+      const form = await findFormById(adapter, input.formId);
+      formSnapshots.set(input, form ? snapshotForm(form) : null);
+      return {
+        formId: input.formId,
+        formExists: form !== null,
+        ...form?.createdBy ? { ownerId: form.createdBy } : {}
+      };
+    },
+    execute: async ({ input }) => adapter.transaction(async (tx) => {
+      const expected = formSnapshots.get(input) ?? null;
+      const form = await findFormById(tx, input.formId);
+      if (!sameFormSnapshot(form, expected)) throw staleFormError();
+      if (!form) throw formNotFoundError();
+      const items = [];
+      let sourceCharacters = 0;
+      for (; ; ) {
+        const page = await getFormSubmissions(tx, input.formId, {
+          limit: 100,
+          offset: items.length
+        });
+        if (page.total > CSV_EXPORT_MAX_ROWS) throw csvExportLimitError();
+        for (const item of page.items) {
+          sourceCharacters += item.data.length;
+          if (sourceCharacters > CSV_EXPORT_MAX_BYTES)
+            throw csvExportLimitError();
+          items.push(item);
+        }
+        if (!page.items.length || items.length >= page.total) break;
+      }
+      const current = await findFormById(tx, input.formId);
+      if (!sameFormSnapshot(current, expected)) throw staleFormError();
+      return {
+        csv: submissionsToCsv(
+          items,
+          Object.keys(JSON.parse(form.schema).properties ?? {})
+        ),
+        filename: `${form.slug}-submissions.csv`
+      };
+    })
+  });
   const listSubmissions = defineOperation({
     input: ListSubmissionsOperationInputSchema,
     permission: formBuilderPermissions.submission.read,
@@ -1065,6 +1123,7 @@ function createFormBuilderOperations(adapter, hooks) {
     onError: ({ error, ...context }) => notifyError(hooks, error, "deleteSubmission", hookContext(context))
   });
   return {
+    exportSubmissions,
     listForms,
     getFormBySlug,
     getFormById,
@@ -1079,4 +1138,4 @@ function createFormBuilderOperations(adapter, hooks) {
   };
 }
 
-export { DeleteFormOperationInputSchema, FormBuilderOperationError, GetFormByIdOperationInputSchema, GetFormBySlugOperationInputSchema, GetFormForUpdateOperationInputSchema, GetSubmissionOperationInputSchema, ListSubmissionsOperationInputSchema, SubmitFormOperationInputSchema, UpdateFormOperationInputSchema, createFormBuilderOperations };
+export { DeleteFormOperationInputSchema, ExportSubmissionsOperationInputSchema, FormBuilderOperationError, GetFormByIdOperationInputSchema, GetFormBySlugOperationInputSchema, GetFormForUpdateOperationInputSchema, GetSubmissionOperationInputSchema, ListSubmissionsOperationInputSchema, SubmitFormOperationInputSchema, UpdateFormOperationInputSchema, createFormBuilderOperations };

package/dist/api/plugin.cjs

@@ -158,6 +158,13 @@ const formBuilderBackendPlugin = (config = {}) => api.defineBackendPlugin({
         query: ctx.query
       }))
     );
+    const exportSubmissions = api.createEndpoint(
+      "/forms/:formId/submissions/export",
+      { method: "POST", requireRequest: true },
+      operations$1.exportSubmissions.route((ctx) => ({
+        formId: ctx.params.formId
+      }))
+    );
     const getSubmission = api.createEndpoint(
       "/forms/:formId/submissions/:subId",
       { method: "GET", requireRequest: true },
@@ -175,6 +182,7 @@ const formBuilderBackendPlugin = (config = {}) => api.defineBackendPlugin({
       }))
     );
     return {
+      exportSubmissions,
       listForms,
       getFormBySlug: getFormBySlugEndpoint,
       getFormById: getFormByIdEndpoint,

package/dist/api/plugin.mjs

@@ -157,6 +157,13 @@ const formBuilderBackendPlugin = (config = {}) => defineBackendPlugin({
         query: ctx.query
       }))
     );
+    const exportSubmissions = createEndpoint(
+      "/forms/:formId/submissions/export",
+      { method: "POST", requireRequest: true },
+      operations.exportSubmissions.route((ctx) => ({
+        formId: ctx.params.formId
+      }))
+    );
     const getSubmission = createEndpoint(
       "/forms/:formId/submissions/:subId",
       { method: "GET", requireRequest: true },
@@ -174,6 +181,7 @@ const formBuilderBackendPlugin = (config = {}) => defineBackendPlugin({
       }))
     );
     return {
+      exportSubmissions,
       listForms,
       getFormBySlug: getFormBySlugEndpoint,
       getFormById: getFormByIdEndpoint,

package/dist/api/submissions-csv.cjs

@@ -0,0 +1,69 @@
+'use strict';
+
+const api = require('@btst/stack/plugins/api');
+
+const CSV_EXPORT_MAX_ROWS = 1e4;
+const CSV_EXPORT_MAX_BYTES = 10 * 1024 * 1024;
+const CSV_EXPORT_MAX_COLUMNS = 1e3;
+const CSV_EXPORT_MAX_CELLS = 1e6;
+function csvExportLimitError() {
+  return new api.OperationHttpError(
+    413,
+    "CSV export exceeds the supported row, column, cell or 10 MiB size limit.",
+    "FORM_EXPORT_TOO_LARGE"
+  );
+}
+function csvCell(value) {
+  let text = value == null ? "" : typeof value === "object" ? JSON.stringify(value) : String(value);
+  if (/^[\s]*[=+\-@]/.test(text) || /^[\t\r\n]/.test(text)) text = `'${text}`;
+  return `"${text.replaceAll('"', '""')}"`;
+}
+function submissionsToCsv(submissions, fieldNames) {
+  const encoder = new TextEncoder();
+  const columns = new Set(fieldNames);
+  const rows = [];
+  let sourceBytes = 0;
+  if (submissions.length > CSV_EXPORT_MAX_ROWS || columns.size > CSV_EXPORT_MAX_COLUMNS || columns.size * submissions.length > CSV_EXPORT_MAX_CELLS)
+    throw csvExportLimitError();
+  for (const submission of submissions) {
+    sourceBytes += encoder.encode(submission.data).byteLength;
+    if (sourceBytes > CSV_EXPORT_MAX_BYTES) throw csvExportLimitError();
+    const data = JSON.parse(submission.data);
+    for (const key of Object.keys(data)) {
+      columns.add(key);
+      if (columns.size > CSV_EXPORT_MAX_COLUMNS || columns.size * submissions.length > CSV_EXPORT_MAX_CELLS)
+        throw csvExportLimitError();
+    }
+    rows.push({ submission, data });
+  }
+  const fields = [...columns];
+  const lines = [];
+  let outputBytes = 0;
+  const appendRow = (values) => {
+    const line = values.map(csvCell).join(",") + "\r\n";
+    outputBytes += encoder.encode(line).byteLength;
+    if (outputBytes > CSV_EXPORT_MAX_BYTES) throw csvExportLimitError();
+    lines.push(line);
+  };
+  const header = [
+    "id",
+    "submittedAt",
+    ...fields.map((field) => `data.${field}`)
+  ];
+  appendRow(header);
+  for (const { submission, data } of rows) {
+    appendRow([
+      submission.id,
+      new Date(submission.submittedAt).toISOString(),
+      ...fields.map(
+        (field) => Object.hasOwn(data, field) ? data[field] : void 0
+      )
+    ]);
+  }
+  return lines.join("");
+}
+
+exports.CSV_EXPORT_MAX_BYTES = CSV_EXPORT_MAX_BYTES;
+exports.CSV_EXPORT_MAX_ROWS = CSV_EXPORT_MAX_ROWS;
+exports.csvExportLimitError = csvExportLimitError;
+exports.submissionsToCsv = submissionsToCsv;

package/dist/api/submissions-csv.mjs

@@ -0,0 +1,64 @@
+import { OperationHttpError } from '@btst/stack/plugins/api';
+
+const CSV_EXPORT_MAX_ROWS = 1e4;
+const CSV_EXPORT_MAX_BYTES = 10 * 1024 * 1024;
+const CSV_EXPORT_MAX_COLUMNS = 1e3;
+const CSV_EXPORT_MAX_CELLS = 1e6;
+function csvExportLimitError() {
+  return new OperationHttpError(
+    413,
+    "CSV export exceeds the supported row, column, cell or 10 MiB size limit.",
+    "FORM_EXPORT_TOO_LARGE"
+  );
+}
+function csvCell(value) {
+  let text = value == null ? "" : typeof value === "object" ? JSON.stringify(value) : String(value);
+  if (/^[\s]*[=+\-@]/.test(text) || /^[\t\r\n]/.test(text)) text = `'${text}`;
+  return `"${text.replaceAll('"', '""')}"`;
+}
+function submissionsToCsv(submissions, fieldNames) {
+  const encoder = new TextEncoder();
+  const columns = new Set(fieldNames);
+  const rows = [];
+  let sourceBytes = 0;
+  if (submissions.length > CSV_EXPORT_MAX_ROWS || columns.size > CSV_EXPORT_MAX_COLUMNS || columns.size * submissions.length > CSV_EXPORT_MAX_CELLS)
+    throw csvExportLimitError();
+  for (const submission of submissions) {
+    sourceBytes += encoder.encode(submission.data).byteLength;
+    if (sourceBytes > CSV_EXPORT_MAX_BYTES) throw csvExportLimitError();
+    const data = JSON.parse(submission.data);
+    for (const key of Object.keys(data)) {
+      columns.add(key);
+      if (columns.size > CSV_EXPORT_MAX_COLUMNS || columns.size * submissions.length > CSV_EXPORT_MAX_CELLS)
+        throw csvExportLimitError();
+    }
+    rows.push({ submission, data });
+  }
+  const fields = [...columns];
+  const lines = [];
+  let outputBytes = 0;
+  const appendRow = (values) => {
+    const line = values.map(csvCell).join(",") + "\r\n";
+    outputBytes += encoder.encode(line).byteLength;
+    if (outputBytes > CSV_EXPORT_MAX_BYTES) throw csvExportLimitError();
+    lines.push(line);
+  };
+  const header = [
+    "id",
+    "submittedAt",
+    ...fields.map((field) => `data.${field}`)
+  ];
+  appendRow(header);
+  for (const { submission, data } of rows) {
+    appendRow([
+      submission.id,
+      new Date(submission.submittedAt).toISOString(),
+      ...fields.map(
+        (field) => Object.hasOwn(data, field) ? data[field] : void 0
+      )
+    ]);
+  }
+  return lines.join("");
+}
+
+export { CSV_EXPORT_MAX_BYTES, CSV_EXPORT_MAX_ROWS, csvExportLimitError, submissionsToCsv };

package/dist/client/components/forms/form-renderer.cjs

@@ -13,6 +13,7 @@ const formBuilderHooks = require('../../hooks/form-builder-hooks.cjs');
 const permissions = require('../../../permissions.cjs');
 const constants = require('../../constants.cjs');
 const utils = require('../../../utils.cjs');
+const mediaFileField = require('./media-file-field.cjs');
 
 function DefaultLoadingComponent() {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
@@ -49,6 +50,7 @@ function DefaultSuccessComponent({ message }) {
 }
 function FormRenderer({
   slug,
+  onUpload: propOnUpload,
   onSuccess,
   onError,
   fieldComponents: propFieldComponents,
@@ -61,6 +63,10 @@ function FormRenderer({
   const t = context.useTranslate();
   const {
     fieldComponents: overrideFieldComponents,
+    onUpload: overrideOnUpload,
+    uploadFile,
+    imagePicker,
+    imageInputField,
     localization,
     classNames
   } = context.usePluginOverrides(constants.FORM_BUILDER_PLUGIN_ID);
@@ -73,10 +79,17 @@ function FormRenderer({
   );
   const mergedFieldComponents = React.useMemo(
     () => ({
+      ...!propOnUpload && (imagePicker || imageInputField) ? { file: mediaFileField.MediaFileField } : {},
       ...overrideFieldComponents,
       ...propFieldComponents
     }),
-    [overrideFieldComponents, propFieldComponents]
+    [
+      imagePicker,
+      imageInputField,
+      overrideFieldComponents,
+      propFieldComponents,
+      propOnUpload
+    ]
   );
   const { zodSchema, fieldConfig } = React.useMemo(() => {
     if (!form?.schema) {
@@ -89,11 +102,27 @@ function FormRenderer({
         parsedSchema,
         mergedFieldComponents
       );
+      const applyUpload = (fields) => {
+        for (const field of Object.values(fields)) {
+          if (field.fieldType === "file")
+            field.onUpload = propOnUpload ?? uploadFile ?? overrideOnUpload;
+          for (const value of Object.values(field))
+            if (value && typeof value === "object" && !Array.isArray(value))
+              applyUpload({ child: value });
+        }
+      };
+      applyUpload(config);
       return { zodSchema: zod, fieldConfig: config };
     } catch {
       return { zodSchema: null, fieldConfig: {} };
     }
-  }, [form?.schema, mergedFieldComponents]);
+  }, [
+    form?.schema,
+    mergedFieldComponents,
+    propOnUpload,
+    uploadFile,
+    overrideOnUpload
+  ]);
   const handleSubmit = async (data) => {
     try {
       const result = await submitMutation.mutateAsync({ data });

package/dist/client/components/forms/form-renderer.mjs

@@ -11,6 +11,7 @@ import { useFormBySlug, useSubmitForm } from '../../hooks/form-builder-hooks.mjs
 import { formBuilderPermissions } from '../../../permissions.mjs';
 import { FORM_BUILDER_PLUGIN_ID } from '../../constants.mjs';
 import { cn } from '../../../utils.mjs';
+import { MediaFileField } from './media-file-field.mjs';
 
 function DefaultLoadingComponent() {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
@@ -47,6 +48,7 @@ function DefaultSuccessComponent({ message }) {
 }
 function FormRenderer({
   slug,
+  onUpload: propOnUpload,
   onSuccess,
   onError,
   fieldComponents: propFieldComponents,
@@ -59,6 +61,10 @@ function FormRenderer({
   const t = useTranslate();
   const {
     fieldComponents: overrideFieldComponents,
+    onUpload: overrideOnUpload,
+    uploadFile,
+    imagePicker,
+    imageInputField,
     localization,
     classNames
   } = usePluginOverrides(FORM_BUILDER_PLUGIN_ID);
@@ -71,10 +77,17 @@ function FormRenderer({
   );
   const mergedFieldComponents = useMemo(
     () => ({
+      ...!propOnUpload && (imagePicker || imageInputField) ? { file: MediaFileField } : {},
       ...overrideFieldComponents,
       ...propFieldComponents
     }),
-    [overrideFieldComponents, propFieldComponents]
+    [
+      imagePicker,
+      imageInputField,
+      overrideFieldComponents,
+      propFieldComponents,
+      propOnUpload
+    ]
   );
   const { zodSchema, fieldConfig } = useMemo(() => {
     if (!form?.schema) {
@@ -87,11 +100,27 @@ function FormRenderer({
         parsedSchema,
         mergedFieldComponents
       );
+      const applyUpload = (fields) => {
+        for (const field of Object.values(fields)) {
+          if (field.fieldType === "file")
+            field.onUpload = propOnUpload ?? uploadFile ?? overrideOnUpload;
+          for (const value of Object.values(field))
+            if (value && typeof value === "object" && !Array.isArray(value))
+              applyUpload({ child: value });
+        }
+      };
+      applyUpload(config);
       return { zodSchema: zod, fieldConfig: config };
     } catch {
       return { zodSchema: null, fieldConfig: {} };
     }
-  }, [form?.schema, mergedFieldComponents]);
+  }, [
+    form?.schema,
+    mergedFieldComponents,
+    propOnUpload,
+    uploadFile,
+    overrideOnUpload
+  ]);
   const handleSubmit = async (data) => {
     try {
       const result = await submitMutation.mutateAsync({ data });

package/dist/client/components/forms/media-file-field.cjs

@@ -0,0 +1,48 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHookForm = require('react-hook-form');
+const context = require('@btst/stack/context');
+const form = require('../../../ui/src/components/form.cjs');
+const label = require('../../../ui/src/components/auto-form/common/label.cjs');
+const tooltip = require('../../../ui/src/components/auto-form/common/tooltip.cjs');
+const constants = require('../../constants.cjs');
+
+function MediaFileField({
+  field,
+  fieldProps,
+  fieldConfigItem,
+  label: label$1,
+  isRequired
+}) {
+  const form$1 = reactHookForm.useFormContext();
+  const { imageInputField: ImageInput, imagePicker: ImagePicker } = context.usePluginOverrides(constants.FORM_BUILDER_PLUGIN_ID);
+  const select = (url) => {
+    if (fieldProps.disabled || form$1.formState.isSubmitting) return;
+    field.onChange(url);
+    void form$1.trigger(field.name);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      label,
+      {
+        label: fieldConfigItem.label || label$1,
+        isRequired
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "group",
+        "aria-label": fieldConfigItem.label || label$1,
+        inert: fieldProps.disabled || form$1.formState.isSubmitting,
+        children: ImageInput ? /* @__PURE__ */ jsxRuntime.jsx(ImageInput, { value: field.value ?? "", onChange: select }) : ImagePicker ? /* @__PURE__ */ jsxRuntime.jsx(ImagePicker, { onSelect: select }) : null
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
+  ] });
+}
+
+exports.MediaFileField = MediaFileField;