From d8df8ee4ddb5a484fef99c85254bf619b54f24e3 Mon Sep 17 00:00:00 2001
From: "ajat91.sudrajat" <ajat91.sudrajat@gmail.com>
Date: Thu, 13 Jan 2022 18:03:12 +0700
Subject: [PATCH] Fixing Preview Image

---
 src/pages/Membership/MembershipModal.js | 105 ++++++++++++++++++++----
 1 file changed, 89 insertions(+), 16 deletions(-)

diff --git a/src/pages/Membership/MembershipModal.js b/src/pages/Membership/MembershipModal.js
index b7fcdd8..7743fb4 100644
--- a/src/pages/Membership/MembershipModal.js
+++ b/src/pages/Membership/MembershipModal.js
@@ -35,6 +35,9 @@ export const MembershipModal = ({
   const [responseFilenameStore, setResponseFilenameStore] = useState("");
   const [loading, setLoading] = useState(false);
   const [loadingStore, setLoadingStore] = useState(false);
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewImage1, setPreviewImage1] = useState("");
+  const [previewTitle, setPreviewTitle] = useState("");
 
   useEffect(() => {
     if (initialData.id) {
@@ -58,6 +61,28 @@ export const MembershipModal = ({
     return () => {};
   }, [initialData]);
 
+  const getBase64 = (file) => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = (error) => reject(error);
+    });
+  };
+
+  const handlePreviewData = async (file) => {
+    if (!file.url && !file.preview) {
+      file.preview = await getBase64(file.originFileObj);
+    }
+    setPreviewImage1(file.url || file.preview);
+    setPreviewVisible(true);
+    setPreviewTitle(
+      file.name || file.url.substring(file.url.lastIndexOf("/") + 1)
+    );
+  };
+
+  const handleCancel1 = () => { setPreviewVisible(false) };
+
   const beforeUpload = (file) => {
     let isLt2M;
     let allowedFile = ["image/jpeg", "image/png"];
@@ -292,11 +317,11 @@ export const MembershipModal = ({
                   <Upload
                     listType="picture-card"
                     fileList={fileList}
-                    onPreview={(file) => {
-                      setPreviewImage(file.url || file.filename);
-                    }}
+                    // onPreview={(file) => {
+                    //   setPreviewImage(file.url || file.filename);
+                    // }}
                     showUploadList={true}
-                    onPreview={previewImage}
+                    onPreview={handlePreviewData}
                     onChange={handleChange}
                     beforeUpload={(file) => beforeUpload(file)}
                     customRequest={(args) => uploadHandler(args)}
@@ -309,6 +334,18 @@ export const MembershipModal = ({
                   >
                     {image === "" ? uploadButton : null}
                   </Upload>
+                  <Modal
+                    visible={previewVisible}
+                    title={previewTitle}
+                    footer={null}
+                    onCancel={handleCancel1}
+                  >
+                    <img
+                      alt="example"
+                      style={{ width: "100%" }}
+                      src={previewImage1}
+                    />
+                  </Modal>
                   <h5
                     style={{
                       marginTop: 12,
@@ -363,11 +400,11 @@ export const MembershipModal = ({
                   <Upload
                     listType="picture-card"
                     fileList={fileList}
-                    onPreview={(file) => {
-                      setPreviewImage(file.url || file.filename);
-                    }}
+                    // onPreview={(file) => {
+                    //   setPreviewImage(file.url || file.filename);
+                    // }}
                     showUploadList={true}
-                    onPreview={previewImage}
+                    onPreview={handlePreviewData}
                     onChange={handleChange}
                     beforeUpload={(file) => beforeUpload(file)}
                     customRequest={(args) => uploadHandler(args)}
@@ -379,6 +416,18 @@ export const MembershipModal = ({
                   >
                     {image === "" ? uploadButton : null}
                   </Upload>
+                  <Modal
+                    visible={previewVisible}
+                    title={previewTitle}
+                    footer={null}
+                    onCancel={handleCancel1}
+                  >
+                    <img
+                      alt="example"
+                      style={{ width: "100%" }}
+                      src={previewImage1}
+                    />
+                  </Modal>
                   <h5
                     style={{
                       marginTop: 12,
@@ -436,11 +485,11 @@ export const MembershipModal = ({
                   <Upload
                     listType="picture-card"
                     fileList={fileList}
-                    onPreview={(file) => {
-                      setPreviewImage(file.url || file.filename);
-                    }}
+                    // onPreview={(file) => {
+                    //   setPreviewImage(file.url || file.filename);
+                    // }}
                     showUploadList={true}
-                    onPreview={previewImage}
+                    onPreview={handlePreviewData}
                     onChange={handleChange}
                     beforeUpload={(file) => beforeUpload(file)}
                     customRequest={(args) => uploadHandler(args)}
@@ -452,6 +501,18 @@ export const MembershipModal = ({
                   >
                     {image === "" ? uploadButton : null}
                   </Upload>
+                  <Modal
+                    visible={previewVisible}
+                    title={previewTitle}
+                    footer={null}
+                    onCancel={handleCancel1}
+                  >
+                    <img
+                      alt="example"
+                      style={{ width: "100%" }}
+                      src={previewImage1}
+                    />
+                  </Modal>
                   <h5
                     style={{
                       marginTop: 12,
@@ -467,11 +528,11 @@ export const MembershipModal = ({
                   <Upload
                     listType="picture-card"
                     fileList={fileStore}
-                    onPreview={(file) => {
-                      setPreviewImageStore(file.url || file.filename);
-                    }}
+                    // onPreview={(file) => {
+                    //   setPreviewImageStore(file.url || file.filename);
+                    // }}
                     showUploadList={true}
-                    onPreview={previewImageStore}
+                    onPreview={handlePreviewData}
                     onChange={handleChangeStore}
                     beforeUpload={(file) => beforeUploadStore(file)}
                     customRequest={(args) => uploadHandlerStore(args)}
@@ -484,6 +545,18 @@ export const MembershipModal = ({
                   >
                     {fileStore.length >= 3 ? null : uploadButtonStore}
                   </Upload>
+                  <Modal
+                    visible={previewVisible}
+                    title={previewTitle}
+                    footer={null}
+                    onCancel={handleCancel1}
+                  >
+                    <img
+                      alt="example"
+                      style={{ width: "100%" }}
+                      src={previewImage1}
+                    />
+                  </Modal>
                   <h5
                     style={{
                       marginTop: 12,