admin/src/views/Products/Productcomponents/ProductImages.js

import axios from "axios";
import React, { useEffect, useState } from "react";
import swal from "sweetalert";
import { isAutheticated } from "src/auth";

const ProductsImages = (props) => {
  const token = isAutheticated();
  const productId = props.productId;
  const { images, setImages } = props.data;
  const { loading, setLoading } = props.loading;
  const [deleting, setDeleting] = useState(false);
  const [imagePreview, setImagePreview] = useState({ preview: "", image: "" });
  const [imagesPreview, setImagesPreview] = useState([]);
  const [allimage, setAllImage] = useState([]);
  //

  const [data, setData] = useState({
    image: [],
    imageURL: [],
  });

  useEffect(() => {
    if (images?.length > 0) {
      setData((prev) => ({
        ...prev,
        imageURL: images?.url,
      }));
      setImagesPreview(images);
    }
  }, []);

  const handleChange = (e) => {
    if (e.target.id === "image") {
      if (
        e.target.files[0]?.type === "image/jpeg" ||
        e.target.files[0]?.type === "image/png" ||
        e.target.files[0]?.type === "image/jpg"
      ) {
        if (imagesPreview.length > 3) {
          swal({
            title: "Warning",
            text: "maximum Four image Upload ",
            icon: "error",
            button: "Close",
            dangerMode: true,
          });
          return;
        }
        // only for file preview------------------------------------
        const files = Array.from(e.target.files);
        files.forEach((file) => {
          const reader = new FileReader();

          reader.onload = () => {
            if (reader.readyState === 2) {
              setImagesPreview((old) => [...old, reader.result]);
            }
          };

          reader.readAsDataURL(file);
        });
        // -----------------------------------------------------------------------------

        setData((prev) => ({
          ...prev,

          image: [...data.image, ...e.target.files],
        }));
        return;
      } else {
        swal({
          title: "Warning",
          text: "Upload jpg, jpeg, png only.",
          icon: "error",
          button: "Close",
          dangerMode: true,
        });
        setData((prev) => ({
          ...prev,
          imageURL: "",
          image: "",
        }));
        e.target.value = null;
        return;
      }
    }
    setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
  };

  //
  //   const handleChange = (e) => {
  //     if (
  //       e.target.files[0]?.type === "image/jpeg" ||
  //       e.target.files[0]?.type === "image/png" ||
  //       e.target.files[0]?.type === "image/jpg"
  //     ) {
  //       setImagePreview((prev) => ({
  //         ...prev,
  //         preview: URL.createObjectURL(e.target.files[0]),
  //         image: e.target.files[0],
  //       }));
  //       return;
  //     } else {
  //       swal({
  //         title: "Warning",
  //         text: "Upload jpg, jpeg, png only.",
  //         icon: "error",
  //         button: "Close",
  //         dangerMode: true,
  //       });
  //       setImagePreview((prev) => ({
  //         ...prev,
  //         preview: "",
  //         image: "",
  //       }));
  //       e.target.value = null;
  //       return;
  //     }
  //   };

  const handleDelete = (id) => {
    swal({
      title: "Are you sure?",
      icon: "error",
      buttons: {
        Yes: { text: "Yes", value: true },
        Cancel: { text: "Cancel", value: "cancel" },
      },
    }).then((value) => {
      if (value === true) {
        setDeleting(true);
        axios
          .delete(`/api/product/image/${productId}/${id}`, {
            headers: {
              "Access-Control-Allow-Origin": "*",
              Authorization: `Bearer ${token}`,
            },
          })
          .then((res) => {
            setDeleting(false);
            const filteredImages = images.filter((e) => e._id !== id);
            setImages(filteredImages);
          })
          .catch((err) => {
            setDeleting(false);
            swal({
              title: "Warning",
              text: "Something went wrong!",
              icon: "error",
              button: "Retry",
              dangerMode: true,
            });
          });
      }
    });
  };

  const handleSubmit = () => {
    // if (!imagePreview.image) return;
    if (data.image?.length < 1) {
      swal({
        title: "Warning",
        text: "PLease select Product Image",
        icon: "warning",
        button: "ok",
        dangerMode: true,
      });
      return;
    }
    setLoading(true);
    const formData = new FormData();
    data.image.forEach((Singleimage) => {
      // console.log(Singleimage)
      formData.append("image", Singleimage);
    });
    axios
      .patch(`/api/product/update/${productId}`, formData, {
        headers: {
          "Content-Type": "multipart/form-data",
          Authorization: `Bearer ${token}`,
          "Access-Control-Allow-Origin": "*",
        },
      })
      .then((res) => {
        swal({
          title: "Saved",
          text: "Product image saved successfully!",
          icon: "success",
          button: "Close",
        });
        setImages((prev) => [...prev, res.data?.image]);
        setImagePreview({ preview: "", image: "" });
        setLoading(false);
      })
      .catch((err) => {
        // console.log(err);
        const msg = err?.response?.data?.message || "Something went wrong!";
        swal({
          title: "Warning",
          text: msg,
          icon: "warning",
          button: "Close",
        });
        setLoading(false);
      });
  };

  return (
    <>
      <div className="d-flex justify-content-between">
        <h5>Product Images</h5>
      </div>
      <div className="my-3">
        <div className="row">
          <div className="col-lg-9">
            <input
              type="file"
              className="form-control"
              id="image"
              accept="image/*"
              multiple
              onChange={(e) => handleChange(e)}
            />
          </div>
          <div className="col-lg-3">
            <button
              className="btn btn-primary"
              onClick={() => handleSubmit()}
              disabled={!productId || loading}
            >
              {productId
                ? loading
                  ? "Loading"
                  : "Upload"
                : "Product Details not saved"}
            </button>
          </div>
        </div>
        <p className="pt-1 pl-2 text-secondary">
          Upload jpg, jpeg and png only*
        </p>
        <div>
          <strong className="fs-6 fst-italic">
            *Please Upload maximum four images
          </strong>
        </div>
        <div className="mb-3" style={{ height: "100px", maxWdth: "100%" }}>
          {/* <img
            src={imagePreview.preview}
            alt="Uploaded Image will be shown here"
            style={{ maxHeight: "100px", maxWidth: "100%" }}
          /> */}
          {imagesPreview.map((image, index) => (
            <img
              className="p-1"
              key={index}
              src={image?.url ? image?.url : image}
              alt="Uploaded Image will be shown here"
              style={{ maxHeight: "100px", maxWidth: "100%" }}
            />
          ))}
        </div>
      </div>
      {/* <table className="table">
        <thead>
          <tr>
            <th scope="col">Preview</th>
            <th scope="col">Actions</th>
          </tr>
        </thead>
        <tbody>
          {images.length !== 0 ? (
            images.map((r, idx) => (
              <tr key={idx}>
                <td>
                  <img src={r.url} alt="preview" height="100px" />
                </td>
                <td>
                  <button
                    className="btn btn-danger btn-sm text-white"
                    onClick={() => handleDelete(r._id)}
                    disabled={deleting}
                  >
                    Delete
                  </button>
                </td>
              </tr>
            ))
          ) : (
            <tr>
              <td colSpan={6} className="text-center fw-bold">
                No Image Added
              </td>
            </tr>
          )}
        </tbody>
      </table> */}
    </>
  );
};

export default ProductsImages;