122 lines
4.1 KiB
TypeScript
122 lines
4.1 KiB
TypeScript
import Button from "../layout/Button";
|
|
import Stack from "../layout/Stack";
|
|
import { ImagePlus, X } from "lucide-react";
|
|
import React, { DetailedHTMLProps } from "react";
|
|
import Card from "../elements/Card";
|
|
import Span from "../layout/Span";
|
|
import Center from "../layout/Center";
|
|
import imageInputToBase64, {
|
|
ImageInputToBase64FunctionReturn,
|
|
} from "../utils/form/imageInputToBase64";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
type ImageUploadProps = DetailedHTMLProps<
|
|
React.HTMLAttributes<HTMLDivElement>,
|
|
HTMLDivElement
|
|
> & {
|
|
onChange?: (imgData: ImageInputToBase64FunctionReturn | undefined) => any;
|
|
fileInputProps?: DetailedHTMLProps<
|
|
React.InputHTMLAttributes<HTMLInputElement>,
|
|
HTMLInputElement
|
|
>;
|
|
placeHolderWrapper?: DetailedHTMLProps<
|
|
React.HTMLAttributes<HTMLDivElement>,
|
|
HTMLDivElement
|
|
>;
|
|
previewImageWrapperProps?: DetailedHTMLProps<
|
|
React.HTMLAttributes<HTMLDivElement>,
|
|
HTMLDivElement
|
|
>;
|
|
previewImageProps?: DetailedHTMLProps<
|
|
React.ImgHTMLAttributes<HTMLImageElement>,
|
|
HTMLImageElement
|
|
>;
|
|
label?: string;
|
|
disablePreview?: boolean;
|
|
};
|
|
|
|
export default function ImageUpload({
|
|
onChange,
|
|
fileInputProps,
|
|
placeHolderWrapper,
|
|
previewImageWrapperProps,
|
|
previewImageProps,
|
|
label,
|
|
disablePreview,
|
|
...props
|
|
}: ImageUploadProps) {
|
|
const [src, setSrc] = React.useState<string | undefined>(undefined);
|
|
const inputRef = React.useRef<HTMLInputElement>();
|
|
|
|
return (
|
|
<Stack
|
|
{...props}
|
|
className={twMerge("w-full h-[300px]", props?.className)}
|
|
>
|
|
<input
|
|
type="file"
|
|
className={twMerge("hidden", fileInputProps?.className)}
|
|
{...fileInputProps}
|
|
onChange={(e) => {
|
|
imageInputToBase64({ imageInput: e.target }).then((res) => {
|
|
setSrc(res.imageBase64Full);
|
|
onChange?.(res);
|
|
fileInputProps?.onChange?.(e);
|
|
});
|
|
}}
|
|
ref={inputRef as any}
|
|
/>
|
|
|
|
{src ? (
|
|
<Card
|
|
className="w-full relative h-full items-center justify-center"
|
|
{...previewImageWrapperProps}
|
|
>
|
|
{disablePreview ? (
|
|
<Span className="opacity-50" size="small">
|
|
Image Uploaded!
|
|
</Span>
|
|
) : (
|
|
<img
|
|
src={src}
|
|
className="w-full object-contain"
|
|
{...previewImageProps}
|
|
/>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
className="absolute p-2 top-2 right-2 z-20"
|
|
onClick={(e) => {
|
|
setSrc(undefined);
|
|
onChange?.(undefined);
|
|
}}
|
|
>
|
|
<X className="text-slate-950 dark:text-white" />
|
|
</Button>
|
|
</Card>
|
|
) : (
|
|
<Card
|
|
className={twMerge(
|
|
"w-full h-full cursor-pointer hover:bg-slate-100 dark:hover:bg-white/20",
|
|
placeHolderWrapper?.className
|
|
)}
|
|
onClick={(e) => {
|
|
inputRef.current?.click();
|
|
placeHolderWrapper?.onClick?.(e);
|
|
}}
|
|
{...placeHolderWrapper}
|
|
>
|
|
<Center>
|
|
<Stack className="items-center gap-2">
|
|
<ImagePlus className="text-slate-400" />
|
|
<Span size="smaller" variant="faded">
|
|
{label || "Click to Upload Image"}
|
|
</Span>
|
|
</Stack>
|
|
</Center>
|
|
</Card>
|
|
)}
|
|
</Stack>
|
|
);
|
|
}
|