diff --git a/react-openapi/README.md b/react-openapi/README.md index 9c5a752..10e6055 100644 --- a/react-openapi/README.md +++ b/react-openapi/README.md @@ -590,6 +590,28 @@ x-upload-url: /pets/{id}/photo POST endpoint for file upload. The `{id}` placeholder is replaced with the current record ID. +#### `x-upload` (optional) + +```yaml +path: + type: string + x-upload: + type: file # one of: image, pdf, html, csv, file + url: /uploads # POST endpoint that accepts raw binary + Content-Disposition header +``` + +Changes the form field to a file upload component. The file is POSTed as raw binary (`application/octet-stream`) to the specified `url` with a `Content-Disposition: attachment; filename="..."` header. The response must contain a `saved_as` field, which is stored as the field value. + +| `type` | Display | +|------------|--------------------------------------------------| +| `image` | `` | +| `pdf` | Clickable chip linking to `/uploads/{value}` | +| `html` | Clickable chip linking to `/uploads/{value}` | +| `csv` | Clickable chip linking to `/uploads/{value}` | +| `file` | Clickable chip linking to `/uploads/{value}` | + +The chip includes a delete (X) button to replace the file. + ### Property Types That Trigger Special Renderers | Condition | Form Renderer | List/Detail Renderer | @@ -602,6 +624,7 @@ POST endpoint for file upload. The `{id}` placeholder is replaced with the curre | `format: date` | `DateField` (date picker) | Typography | | `format: date-time` | `DateField` (datetime-local picker) | Typography | | `x-ui-type: image` | `ImageField` (upload button + preview) | `Avatar` | +| `x-upload` exists | `FileUploadField` (upload button + chip/Avatar) | Chip or Avatar | | `$ref` without `x-fk` | Disabled TextField with JSON | `InlineRefField` (chips or displayFormat) | | None of the above (default) | `StringField` (text input) | Typography | diff --git a/react-openapi/src/components/fields/FormFieldRenderer.tsx b/react-openapi/src/components/fields/FormFieldRenderer.tsx index a3f476f..425c3f9 100644 --- a/react-openapi/src/components/fields/FormFieldRenderer.tsx +++ b/react-openapi/src/components/fields/FormFieldRenderer.tsx @@ -8,6 +8,7 @@ import { BooleanField } from "./renderers/BooleanField"; import { EnumField } from "./renderers/EnumField"; import { FkSelectField } from "./renderers/FkSelectField"; import { FkMultiSelectField } from "./renderers/FkMultiSelectField"; +import { FileUploadField } from "./renderers/FileUploadField"; import { ImageField } from "./renderers/ImageField"; import { JsonField } from "./renderers/JsonField"; import { DiscriminatorField } from "./renderers/DiscriminatorField"; @@ -26,6 +27,16 @@ interface FormFieldProps { export function FormFieldRenderer({ field, value, onChange, error, fkOptions, fkLoading, recordId, onFkOpen }: FormFieldProps) { if (field.hidden?.form) return null; + if (field.upload) { + return ( + + ); + } + if (field.readOnly && field.uiType !== "image") { return ( diff --git a/react-openapi/src/components/fields/renderers/FileUploadField.tsx b/react-openapi/src/components/fields/renderers/FileUploadField.tsx new file mode 100644 index 0000000..1bfc338 --- /dev/null +++ b/react-openapi/src/components/fields/renderers/FileUploadField.tsx @@ -0,0 +1,73 @@ +import React from "react"; +import { Box, Typography, Avatar, Chip, Button, FormHelperText } from "@mui/material"; +import type { FieldConfig } from "../../../types"; +import { getApi } from "../../../hooks/useApi"; + +interface Props { + field: FieldConfig; + value: any; + onChange: (value: any) => void; +} + +const acceptMap: Record = { + image: "image/*", + pdf: ".pdf", + csv: ".csv", + html: ".html,.htm", +}; + +export function FileUploadField({ field, value, onChange }: Props) { + const uploadConfig = field.upload!; + const inputRef = React.useRef(null); + + const handleUpload = async (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (!file) return; + + const arrayBuffer = await file.arrayBuffer(); + const binary = new Uint8Array(arrayBuffer); + const api = getApi(); + const res = await api.post(uploadConfig.url, binary, { + headers: { + "Content-Type": file.type, + "Content-Disposition": `attachment; filename="${file.name}"`, + }, + }); + onChange(res.data.saved_as); + if (inputRef.current) inputRef.current.value = ""; + }; + + const handleReplace = () => { + onChange(null); + setTimeout(() => inputRef.current?.click(), 0); + }; + + const accept = acceptMap[uploadConfig.type] ?? undefined; + + return ( + + + {field.label} + + {value ? ( + uploadConfig.type === "image" ? ( + + ) : ( + + ) + ) : ( + + )} + {field.description && {field.description}} + + ); +} diff --git a/react-openapi/src/transformers/field-config.ts b/react-openapi/src/transformers/field-config.ts index 21f5012..87a0e14 100644 --- a/react-openapi/src/transformers/field-config.ts +++ b/react-openapi/src/transformers/field-config.ts @@ -74,6 +74,7 @@ function extractOneOfOptions(schema: any, schemas: Record, discrimi fk: prop["x-fk"], uiType: prop["x-ui-type"], uploadUrl: prop["x-upload-url"], + upload: prop["x-upload"], isArray: prop.type === "array", autocomplete, }; @@ -139,6 +140,7 @@ export function extractFields(schemaName: string, schema: any, schemas: Record