updated react-openapi

react-openapi/src/components/fields/renderers/ImageField.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { Box, Typography, Avatar, FormHelperText } from "@mui/material";
+import Button from "@mui/material/Button";
+import type { FieldConfig } from "../../../types";
+import { getApi } from "../../../hooks/useApi";
+
+interface Props {
+  field: FieldConfig;
+  value: any;
+  onChange: (value: any) => void;
+  id?: string | number;
+  uploadUrl?: string;
+}
+
+export function ImageField({ field, value, onChange, id, uploadUrl }: Props) {
+  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!id || !uploadUrl) {
+      const reader = new FileReader();
+      reader.onload = () => onChange(reader.result);
+      reader.readAsDataURL(file);
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("file", file);
+
+    try {
+      const api = getApi();
+      const url = uploadUrl.replace("{id}", String(id));
+      const res = await api.post(url, formData, {
+        headers: { "Content-Type": "multipart/form-data" },
+      });
+      onChange(res.data.url ?? res.data);
+    } catch {
+      const reader = new FileReader();
+      reader.onload = () => onChange(reader.result);
+      reader.readAsDataURL(file);
+    }
+  };
+
+  return (
+    <Box>
+      <Typography variant="body2" fontWeight={600} sx={{ mb: 0.5 }}>
+        {field.label}
+      </Typography>
+      {value ? (
+        <Avatar src={value} variant="rounded" sx={{ width: 120, height: 120 }} />
+      ) : (
+        <Button variant="outlined" component="label" size="small">
+          Upload {field.label}
+          <input type="file" hidden accept="image/*" onChange={handleUpload} />
+        </Button>
+      )}
+      <FormHelperText>{field.description}</FormHelperText>
+    </Box>
+  );
+}