Vishesh 'ironeagle' Bangotra
537aef94ff
- add resolveMediaUrl() in fields/utils.ts: prefixes /uploads/... and other relative paths with the configured baseApiUrl, leaves absolute http/data/blob URLs untouched - use it for every image render: ListCellRenderer, DetailFieldRenderer, ImageField form preview, and FileUploadField preview/href (which hardcoded /uploads/<value>) - drop the Expense-side resolveLogoUrl hack and logo pre-normalization; the Expenses page now renders logos through the same react-openapi path as the admin entity list
64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
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";
|
|
import { useAppContext } from "../../../context/AppContext";
|
|
import { resolveMediaUrl } from "../utils";
|
|
|
|
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 { config } = useAppContext();
|
|
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={resolveMediaUrl(value, config.baseApiUrl)} 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>
|
|
)}
|
|
{field.description && <FormHelperText>{field.description}</FormHelperText>}
|
|
</Box>
|
|
);
|
|
}
|