Spaces:
Running
Running
File size: 4,028 Bytes
9cd6ddb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
import { useRef } from "react";
import { PlusIcon, EyeIcon } from "@heroicons/react/solid";
import { TrashIcon } from "@heroicons/react/solid";
import { FormattedMessage } from "react-intl";
export const toBase64 = (file: File) =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
export const getBase64FromUrl = async (url: string) => {
const data = await fetch(url);
const blob = await data.blob();
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
const base64data = reader.result;
resolve(base64data);
};
});
};
export const UploadImage = ({ values, onChange }: any) => {
const uploadRef = useRef<HTMLInputElement>(null);
const handleCustomUpload = (e: any) => {
const file = e.target.files[0];
if (file) {
toBase64(file).then((res: any) => {
onChange([res, ...(values || [])]);
});
}
};
const addImage = (image: any) => {
const images = values.filter((i: any) => i !== image);
onChange([image, ...images]);
};
const removeImage = (image: any) => {
const images = values.filter((i: any) => i !== image);
onChange(images);
};
return (
<div>
{values?.length > 0 && (
<div className="mb-4">
<p className="font-semibold uppercase text-[11px] tracking-widest text-dark-100 mb-2">
<FormattedMessage id="iconsEditor.editor.customisation.backgroundImage.upload.lastImages" />
</p>
<div className="grid grid-cols-4 gap-4">
{values?.map((image: any, i: number) => (
<div
key={i}
className="w-full h-16 rounded-lg relative group cursor-pointer overflow-hidden"
>
<img src={image} className="w-full h-full object-cover" />
<div className="w-full h-full absolute top-0 left-0 opacity-0 hover:opacity-100 backdrop-blur-sm transition-all duration-200 bg-white bg-opacity-40 flex items-center justify-center gap-3">
<div
className="bg-blue bg-opacity-30 hover:bg-opacity-80 group rounded-lg p-2"
onClick={() => addImage(image)}
>
<EyeIcon className="text-blue w-6 group-hover:text-white" />
</div>
<div
className="bg-[#BA3A49] bg-opacity-30 hover:bg-opacity-80 group rounded-lg p-2"
onClick={() => removeImage(image)}
>
<TrashIcon className="text-[#BA3A49] w-6 group-hover:text-white" />
</div>
{/* <div
className="bg-red h-full flex items-center justify-center group-hover:opacity-100 opacity-0 w-1/2 bg-opacity-60 backdrop-blur-sm transition-all duration-200"
onClick={() => addImage(image)}
>
<TrashIcon className="text-white w-10" />
</div> */}
</div>
</div>
))}
</div>
</div>
)}
<div
className="flex uppercase items-center justify-center gap-2 w-full px-4 py-3 font-semibold tracking-wider cursor-pointer border-dark-200 group hover:border-green hover:text-green text-dark-200 transition-all duration-200 text-xs border-dashed border-opacity-50 hover:border-opacity-100 border-2 rounded-lg group"
onClick={() => uploadRef?.current?.click()}
>
<PlusIcon className="group-hover:text-green text-dark-200 w-5 transition-all duration-200" />
<FormattedMessage id="iconsEditor.editor.customisation.backgroundImage.upload" />
</div>
<input
ref={uploadRef}
type="file"
className="hidden"
onChange={handleCustomUpload}
/>
</div>
);
};
|