Moduletrace/tailwind-ui-library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
tben
2026-10-01 08:02:47 +01:00
parent 6392457ffb
commit 3dc9f12ad4
104 changed files with 6536 additions and 1037 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/form/ImageUpload.tsx
+53 -40
View File
@@ -1,12 +1,12 @@
import Button from "../layout/Button";
import Stack from "../layout/Stack";
import { ImagePlus, X } from "lucide-react";
import React, { DetailedHTMLProps } from "react";
import React, { type DetailedHTMLProps } from "react";
import Card from "../elements/Card";
import Span from "../layout/Span";
import Center from "../layout/Center";
import imageInputToBase64, {
ImageInputToBase64FunctionReturn,
type ImageInputToBase64FunctionReturn,
} from "../utils/form/imageInputToBase64";
import { twMerge } from "tailwind-merge";
import Tag from "../elements/Tag";
@@ -20,6 +20,9 @@ type ImageUploadProps = DetailedHTMLProps<
onChangeHandler?: (
imgData: ImageInputToBase64FunctionReturn | undefined,
) => any;
multipleOnChangeHandler?: (
imgData: ImageInputToBase64FunctionReturn[] | undefined,
) => any;
fileInputProps?: DetailedHTMLProps<
React.InputHTMLAttributes<HTMLInputElement>,
HTMLInputElement
@@ -50,6 +53,7 @@ type ImageUploadProps = DetailedHTMLProps<
setImgURL?: React.Dispatch<React.SetStateAction<string | undefined>>;
externalImage?: ImageInputToBase64FunctionReturn;
restoreImageFn?: () => void;
upload_only?: boolean;
};
/**
@@ -71,6 +75,8 @@ export default function ImageUpload({
restoreImageFn,
setLoading,
setImgURL,
multipleOnChangeHandler,
upload_only,
...props
}: ImageUploadProps) {
const [imageObject, setImageObject] = React.useState<
@@ -119,7 +125,7 @@ export default function ImageUpload({
});
imgArr.push(fileObj);
}
multipleOnChangeHandler?.(imgArr);
externalSetImages?.(imgArr);
setLoading?.(false);
})();
@@ -208,43 +214,50 @@ export default function ImageUpload({
<Span size="smaller" variant="faded">
{label || "Click to Upload Image"}
</Span>
<Stack className="cancel-upload w-full items-stretch gap-1">
<Input
placeholder="Eg. https://example.com/img.png"
className="text-sm twui-image-url-input"
title="Enter Image URL"
wrapperWrapperProps={{ className: "mt-2" }}
changeHandler={(value) => {
imageUrlRef.current = value;
}}
showLabel
/>
<Button
title="Restore Image Button"
size="smaller"
variant="outlined"
color="gray"
onClick={() => {
if (!imageUrlRef.current) return;
setSrc(imageUrlRef.current);
}}
>
Set Image URL
</Button>
</Stack>
{existingImageUrl && (
<Button
title="Restore Image Button"
size="smaller"
variant="ghost"
onClick={() => {
restoreImageFn?.() ||
setSrc(existingImageUrl);
}}
className="cancel-upload"
>
Restore Original Image
</Button>
{upload_only ? null : (
<>
<Stack className="cancel-upload w-full items-stretch gap-1">
<Input
placeholder="URL Eg. https://example.com/img.png"
className="text-sm twui-image-url-input"
title="Enter Image URL"
wrapperWrapperProps={{
className: "mt-2",
}}
changeHandler={(value) => {
imageUrlRef.current = value;
}}
/>
<Button
title="Restore Image Button"
size="smaller"
variant="outlined"
color="gray"
onClick={() => {
if (!imageUrlRef.current)
return;
setSrc(imageUrlRef.current);
}}
className="opacity-70"
>
Set Image URL
</Button>
</Stack>
{existingImageUrl && (
<Button
title="Restore Image Button"
size="smaller"
variant="ghost"
onClick={() => {
restoreImageFn?.() ||
setSrc(existingImageUrl);
}}
className="cancel-upload"
>
Restore Original Image
</Button>
)}
</>
)}
</Stack>
</Center>