upload functionality

package.json

@@ -4,32 +4,36 @@
   "private": true,
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsc -b && vite build",
     "serve": "vite preview"
   },
   "dependencies": {
     "@apidevtools/swagger-parser": "^12.1.0",
-    "@emotion/react": "latest",
-    "@emotion/styled": "latest",
-    "@mui/icons-material": "latest",
-    "@mui/material": "latest",
-    "@mui/x-data-grid": "^8.28.2",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
+    "@mui/x-data-grid": "^7.22.0",
     "@tanstack/react-query": "^5.96.1",
-    "axios": "latest",
+    "axios": "^1.7.7",
     "buffer": "^6.0.3",
+    "js-yaml": "^4.1.0",
     "markdown-to-jsx": "latest",
     "marked": "latest",
     "process": "^0.11.10",
-    "react": "latest",
-    "react-dom": "latest",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-markdown": "latest",
-    "react-router-dom": "^7.13.2",
+    "react-router-dom": "^6.28.0",
     "remark-gfm": "latest"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",
-    "@vitejs/plugin-react": "latest",
-    "typescript": "^6.0.3",
-    "vite": "latest"
+    "@types/node": "^25.9.3",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.1"
   }
 }

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/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "react-openapi",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "main": "index.ts",
+  "types": "index.ts",
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0",
+    "@mui/material": "^5.16.7",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/x-data-grid": "^7.22.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "axios": "^1.7.7",
+    "js-yaml": "^4.1.0"
+  }
+}

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;

react-openapi/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "index.ts"]
+}

src/Home.tsx

@@ -236,7 +236,7 @@ export default function Home() {
 
         <Grid container spacing={3}>
           {features.map((f) => (
-            <Grid key={f.title} size={{ xs: 12, sm: 6, md: 3 }}>
+            <Grid key={f.title} item xs={12} sm={6} md={3}>
               <FeatureCard {...f} />
             </Grid>
           ))}

src/shared-theme/AppTheme.tsx

@@ -63,8 +63,8 @@ export default function AppTheme({
   );
 
   const theme = React.useMemo(
-    () =>
-      createTheme({
+    () => {
+      const base = createTheme({
         ...getDesignTokens(mode),
         semantic,
 
@@ -75,7 +75,11 @@ export default function AppTheme({
           ...navigationCustomizations,
           ...surfacesCustomizations,
         },
-      }),
+      });
+      (base as any).applyStyles = (m: "light" | "dark", styles: any) =>
+        base.palette.mode === m ? styles : {};
+      return base;
+    },
     [mode, semantic]
   );
 

src/shared-theme/customizations/navigation.tsx

@@ -4,7 +4,6 @@ import { SvgIconProps } from '@mui/material/SvgIcon';
 import { buttonBaseClasses } from '@mui/material/ButtonBase';
 import { dividerClasses } from '@mui/material/Divider';
 import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
 import { tabClasses } from '@mui/material/Tab';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 import { gray, brand } from '../themePrimitives';
@@ -73,7 +72,7 @@ export const navigationCustomizations: Components<Theme> = {
           backgroundColor: (theme.vars || theme).palette.background.paper,
           boxShadow: 'none',
         },
-        [`&.${selectClasses.focused}`]: {
+        '&.Mui-focused': {
           outlineOffset: 0,
           borderColor: gray[400],
         },
@@ -91,7 +90,7 @@ export const navigationCustomizations: Components<Theme> = {
             backgroundColor: (theme.vars || theme).palette.background.paper,
             boxShadow: 'none',
           },
-          [`&.${selectClasses.focused}`]: {
+          '&.Mui-focused': {
             outlineOffset: 0,
             borderColor: 'hsl(210, 55%, 55%)',
           },

src/shared-theme/theme-augment.d.ts

@@ -0,0 +1,11 @@
+import "@mui/material/styles";
+
+declare module "@mui/material/styles" {
+  interface Theme {
+    vars?: Record<string, any>;
+    applyStyles<T>(mode: "light" | "dark", styles: T): T | {};
+  }
+  interface ThemeOptions {
+    vars?: Record<string, any>;
+  }
+}

src/shared-theme/themePrimitives.ts

@@ -1,4 +1,5 @@
-import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles';
+import { createTheme, alpha, Shadows } from '@mui/material/styles';
+import type { PaletteMode } from '@mui/material';
 
 declare module '@mui/material/Paper' {
   interface PaperPropsVariantOverrides {