Blame view

components/vendor/UploadImageCustom.js 5.64 KB
jaymehta committed
1
import { PlusOutlined } from "@ant-design/icons";
.  
jaymehta committed
2
import { message, Upload } from "antd";
jaymehta committed
3 4 5 6 7
import axios from "axios";
import { getSession } from "next-auth/react";
import React, { useEffect, useState } from "react";
import { cleanImage } from "../../services/imageHandling";

.  
jaymehta committed
8
const UploadImageCustom = ({ isUpdate, setImage, populatedImages, imagesArrayComponent }) => {
jaymehta committed
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
  //   const { loadedUser } = useSelector(state => state.loadedUser);
  const [session, setSession] = useState();
  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState("");
  const [fileList, setFileList] = useState([]);
  const [uploading, setUploading] = useState(false);
  console.log("populatedImages", populatedImages);
  const transformImageData = images => {
    return images.map((image, index) => ({
      uid: index,
      name: `image-${index}.jpg`, // You can adjust the name based on your requirements
      status: "done",
      url: image.url, // Assuming image.url is the URL of the image
      id: image.id,
      deleteId: image.deleteId
    }));
  };

  useEffect(() => {
    const fetchSession = async () => {
      setSession(await getSession());
    };
    fetchSession();
    // dispatch(getLoggedInVendor());
  }, []);
  useEffect(() => {
    // console.log("populatedImages.id", populatedImages.id);
    if (!populatedImages) {
      return;
    }
jaymehta committed
39
    const initialImages = transformImageData([{ url: cleanImage(populatedImages.data?.attributes), deleteId: populatedImages.data?.id, id: populatedImages.id }]);
jaymehta committed
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
    if (populatedImages) {
      setFileList(initialImages);
    }
  }, [populatedImages]);

  console.log("fileList", fileList);
  // let formData = new FormData();
  let finalId;

  const handlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
    setPreviewImage(file.url || file.preview);
    setPreviewOpen(true);
  };

  const handleImageChange = async info => {
    console.log("info", info);
    const newFileList = [...info.fileList];

    if (info.file.status === "uploading") {
      setUploading(true);
      setFileList(newFileList);
      return;
    }

    if (info.file.status === "done") {
      let formData = new FormData();
      formData.append("files", info.file.originFileObj);

      try {
        const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/upload`, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
            Authorization: `Bearer ${session.jwt}`
          }
        });

        if (response.status === 200) {
          const newFileId = response.data[0].id;

          // Update the file list with the new file ID
          const updatedFileList = newFileList.map(file => {
            if (file.uid === info.file.uid) {
              return {
                ...file,
                id: newFileId,
                url: response.data[0].url // You can add any other response data you need here
              };
            }
            return file;
          });

          setFileList(updatedFileList);
.  
jaymehta committed
95
          setImage(newFileId);
jaymehta committed
96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
          message.success(`${info.file.name} uploaded successfully.`);
        }
      } catch (error) {
        message.error(`${info.file.name} upload failed.`);
      } finally {
        setUploading(false);
      }
    } else if (info.file.status === "removed") {
      // Handle file removal if needed
      const updatedFileList = newFileList.filter(file => file.uid !== info.file.uid);
      setFileList(updatedFileList);
    }
  };
  const handleCustomRequest = ({ file, onSuccess, onError }) => {
    setTimeout(() => {
      onSuccess({ id: finalId }, file);
    }, 2000);
  };
  const handleRemove = async file => {
    console.log("handle remove", file);
    const imageId = file.deleteId;
    if (!imageId) {
      message.error(`Failed to remove ${file.name}. Image ID not found.`);
      return;
    }
jaymehta committed
121
    setImage()
jaymehta committed
122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177
    setFileList([]);
    try {
      await axios.delete(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/upload/files/${imageId}`, {
        headers: {
          "Content-Type": "multipart/form-data",
          Authorization: `Bearer ${session.jwt}`
        }
      }); // Replace with your Strapi delete endpoint
      message.success(`${file.name} file removed successfully.`);
      setFileList(prevFileList => prevFileList.filter(item => item.uid !== file.uid));
    } catch (error) {
      message.error(`Failed to remove ${file.name}`);
    }
  };
  return (
    <div>
      <Upload
        // customRequest={handleCustomRequest}
        // enterButton={true}
        //  showUploadList={{ showRemoveIcon: false }}
        listType="picture-card"
        fileList={fileList}
        // multiple={false}
        onChange={handleImageChange}
        onRemove={handleRemove}
        onPreview={handlePreview}
      >
        {fileList?.length >= 1 ? null : (
          <div>
            <PlusOutlined />
            <div style={{ marginTop: 8 }}>Upload</div>
          </div>
        )}
      </Upload>
      {previewImage && (
        <Image
          wrapperStyle={{
            display: "none"
            // zIndex: 23
          }}
          preview={{
            visible: previewOpen,
            onVisibleChange: visible => setPreviewOpen(visible),
            afterOpenChange: visible => !visible && setPreviewImage("")
          }}
          src={previewImage}
        />
      )}
      {/* <button type="button" onClick={handleUpload} disabled={fileList ? fileList.length === 0 : true} loading={uploading} style={{ marginTop: 16 }}>
      {uploading ? "Uploading" : "Start Upload"}
    </button> */}
    </div>
  );
};

export default UploadImageCustom;