components/upload/index.tsx

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>
  );
};