106 lines
2.7 KiB
TypeScript
106 lines
2.7 KiB
TypeScript
import LinkIcon from "@mui/icons-material/Link";
|
|
import UploadIcon from "@mui/icons-material/Upload";
|
|
import { Button } from "@mui/material";
|
|
import React from "react";
|
|
import { Area } from "react-easy-crop";
|
|
import { ServerApi } from "../../api/ServerApi";
|
|
import { ImageCropperDialog } from "../../dialogs/ImageCropperDialog";
|
|
import { useAlert } from "../../hooks/context_providers/AlertDialogProvider";
|
|
import getCroppedImg from "../../utils/crop_image";
|
|
import { isDebug } from "../../utils/debug_utils";
|
|
import { selectFileToUpload } from "../../utils/files_utils";
|
|
|
|
export function UploadPhotoButton(p: {
|
|
label: string;
|
|
onPhotoSelected: (b: Blob) => Promise<void>;
|
|
aspect?: number;
|
|
}): React.ReactElement {
|
|
const [processing, setProcessing] = React.useState(false);
|
|
const [imageBlob, setImageBlob] = React.useState<Blob>();
|
|
const [imageURL, setImageURL] = React.useState<string>();
|
|
const alert = useAlert();
|
|
|
|
const uploadPhoto = async () => {
|
|
try {
|
|
const file = await selectFileToUpload({
|
|
allowedTypes: ServerApi.Config.constraints.photo_allowed_types,
|
|
maxSize: ServerApi.Config.constraints.photo_max_size,
|
|
});
|
|
|
|
if (file === null) return;
|
|
|
|
const tempURL = URL.createObjectURL(file);
|
|
|
|
setImageBlob(file);
|
|
setImageURL(tempURL);
|
|
} catch (e) {
|
|
console.error(e);
|
|
alert(`Échec de l'envoi de l'image ! (${e})`);
|
|
}
|
|
};
|
|
|
|
const uploadPhotoFromURL = async () => {
|
|
const URL = prompt("Image URL ?");
|
|
if (URL === null || URL.length === 0) return;
|
|
setImageURL(URL);
|
|
};
|
|
|
|
const cancelCrop = () => {
|
|
setImageURL(undefined);
|
|
};
|
|
|
|
const submitCrop = async (a: Area | undefined) => {
|
|
setProcessing(true);
|
|
try {
|
|
let blob = imageBlob!;
|
|
|
|
if (a) {
|
|
blob = await getCroppedImg(imageURL!, a!);
|
|
}
|
|
|
|
await p.onPhotoSelected(blob);
|
|
|
|
setImageBlob(undefined);
|
|
setImageURL(undefined);
|
|
} catch (e) {
|
|
console.error(e);
|
|
alert("Echec du traitement de la photo !");
|
|
}
|
|
|
|
setProcessing(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* Upload button */}
|
|
<Button
|
|
onClick={uploadPhoto}
|
|
variant="outlined"
|
|
startIcon={<UploadIcon />}
|
|
>
|
|
{p.label}
|
|
</Button>
|
|
{/* Upload button (from URL) */}{" "}
|
|
{isDebug() && (
|
|
<Button
|
|
onClick={uploadPhotoFromURL}
|
|
variant="outlined"
|
|
startIcon={<LinkIcon />}
|
|
>
|
|
{p.label} from URL
|
|
</Button>
|
|
)}{" "}
|
|
{/* Crop image dialog */}
|
|
{imageURL && (
|
|
<ImageCropperDialog
|
|
processing={processing}
|
|
src={imageURL!}
|
|
onCancel={cancelCrop}
|
|
onSubmit={submitCrop}
|
|
aspect={p.aspect}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|