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