khata-ui/react-openapi/src/components/fields/renderers/FileUploadField.tsx

import React from "react";
import { Box, Typography, Avatar, Chip, Button, FormHelperText } from "@mui/material";
import type { FieldConfig } from "../../../types";
import { getApi } from "../../../hooks/useApi";
import { useAppContext } from "../../../context/AppContext";
import { resolveMediaUrl } from "../utils";

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 { config } = useAppContext();

  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={resolveMediaUrl(`/uploads/${value}`, config.baseApiUrl)} variant="rounded" sx={{ width: 120, height: 120 }} />
        ) : (
          <Chip
            label={value}
            component="a"
            href={resolveMediaUrl(`/uploads/${value}`, config.baseApiUrl)}
            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>
  );
}