upload functionality

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`    | `<Avatar src="/uploads/{value}" />`              |
+| `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                                   |
 

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 (
+      <FileUploadField
+        field={field}
+        value={value}
+        onChange={onChange}
+      />
+    );
+  }
+
   if (field.readOnly && field.uiType !== "image") {
     return (
       <StringField field={field} value={value} onChange={onChange} error={error} />

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<string, string> = {
+  image: "image/*",
+  pdf: ".pdf",
+  csv: ".csv",
+  html: ".html,.htm",
+};
+
+export function FileUploadField({ field, value, onChange }: Props) {
+  const uploadConfig = field.upload!;
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    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 (
+    <Box>
+      <Typography variant="body2" fontWeight={600} sx={{ mb: 0.5 }}>
+        {field.label}
+      </Typography>
+      {value ? (
+        uploadConfig.type === "image" ? (
+          <Avatar src={`/uploads/${value}`} variant="rounded" sx={{ width: 120, height: 120 }} />
+        ) : (
+          <Chip
+            label={value}
+            component="a"
+            href={`/uploads/${value}`}
+            clickable
+            onDelete={handleReplace}
+          />
+        )
+      ) : (
+        <Button variant="outlined" component="label" size="small">
+          Upload {field.label}
+          <input type="file" hidden accept={accept} onChange={handleUpload} ref={inputRef} />
+        </Button>
+      )}
+      {field.description && <FormHelperText>{field.description}</FormHelperText>}
+    </Box>
+  );
+}

react-openapi/src/transformers/field-config.ts

@@ -74,6 +74,7 @@ function extractOneOfOptions(schema: any, schemas: Record<string, any>, 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<s
         fk: prop["x-fk"],
         uiType: prop["x-ui-type"],
         uploadUrl: prop["x-upload-url"],
+        upload: prop["x-upload"],
         refSchema: refSchemaName,
         inlineDisplayFormat,
         isArray: prop.type === "array",

react-openapi/src/types.ts

@@ -81,6 +81,7 @@ export interface FieldConfig {
   fk?: FKFieldConfig;
   uiType?: string;
   uploadUrl?: string;
+  upload?: { type: string; url: string };
   refSchema?: string;
   inlineDisplayFormat?: string;
   isArray: boolean;