@kittlekit/schema-form-upload-next

Next.js upload addon for Kittlekit schema forms. This package keeps file upload UI and Next runtime behavior separate from the form core.

What This Package Is

Use this package when you want:

• a file upload field for Kittlekit schema forms
• Next.js Image support for previews
• host-controlled upload transport instead of hardcoded API coupling

Install

npm install @kittlekit/schema-form-upload-next next react react-dom react-dropzone

Design

This package is transport-driven.

You provide:

• fetchUploadMeta
• uploadFile
• optional detachFile

That means auth, API routes, headers, and platform-specific upload behavior remain in your app.

Quick Start

import { FileUploadField } from "@kittlekit/schema-form-upload-next"

<FileUploadField
  value={value}
  onChange={setValue}
  transport={{
    fetchUploadMeta,
    uploadFile,
    detachFile,
  }}
/>

Main Props

• value
• onChange
• accept
• maxSizeBytes
• maxFiles
• maxTotalSizeBytes
• uploadMode
• apiBaseUrl
• transport
• components
• onErrorMessage

Behavior Notes

• previews images when metadata includes image content type and URL
• can show removed files temporarily and support undo behavior
• supports auth and public upload modes through your transport implementation

Relationship to Other Packages

Works alongside:

• @kittlekit/schema-form-core
• @kittlekit/schema-form-react
• @kittlekit/schema-form-tailwind

Out of Scope

• server-side upload APIs
• auth/session strategy
• backend attachment semantics

Publish

npm run build --workspace @kittlekit/schema-form-upload-next
npm publish --workspace @kittlekit/schema-form-upload-next --access public

Examples

• app wrapper reference: web/src/components/form/FileUploadField.tsx

Release Notes

0.1.1

• separated upload UI from core form packages
• made transport/auth behavior host-injected