Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 6fc6d6be by jaymehta
Options

.

1 parent 986df08b
Inline Side-by-side
Showing 2 changed files with 85 additions and 44 deletions
components/vendor/ActivityDetails.js
......@@ -1109,6 +1109,7 @@ const ActivityDetails = ({ isUpdate }) => {
<ImageUploadPopUp
isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent}
/>
{console.log("setimagesArrayComponent", imagesArrayComponent)}
......
components/vendor/ImageUploadPopUp.js
......@@ -4,6 +4,7 @@ import axios from "axios";
import { getSession } from "next-auth/react";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { toast } from "react-toastify";
const getBase64 = file =>
new Promise((resolve, reject) => {
const reader = new FileReader();
......@@ -12,7 +13,7 @@ const getBase64 = file =>
reader.onerror = error => reject(error);
});
const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages }) => {
const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages, imagesArrayComponent }) => {
// const { loadedUser } = useSelector(state => state.loadedUser);
const [session, setSession] = useState();
const [previewOpen, setPreviewOpen] = useState(false);
......@@ -28,32 +29,71 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages }
// dispatch(getLoggedInVendor());
}, []);
useEffect(() => {
setFileList(
populatedImages &&
populatedImages.map(item => {
return {
uid: item.id,
name: "image.png",
status: "done",
url: item.imageUrl
};
})
);
}, []);
// useEffect(() => {
// setFileList(
// populatedImages &&
// populatedImages.map(item => {
// return {
// uid: item.id,
// name: "image.png",
// status: "done",
// url: item.imageUrl
// };
// })
// );
// }, []);
console.log("fileList", fileList);
let formData = new FormData();
const handleUpload = async () => {
fileList.forEach(file => {
console.log("file", file.originFileObj);
formData.append("files", file.originFileObj);
});
console.log("fileList", fileList);
console.log("formData", formData);
// const handleUpload = async () => {
// fileList.forEach(file => {
// console.log("file", file.originFileObj);
// formData.append("files", file.originFileObj);
// });
// console.log("fileList", fileList);
// console.log("formData", formData);
setUploading(true);
// setUploading(true);
// 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}`
// }
// });
// console.log("response image", response);
// setimagesArrayComponent(
// response.data.map(item => {
// return { imageUrl: `${process.env.NEXT_PUBLIC_BACKEND_API_URL}${item.url}` };
// })
// );
// // eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MywiaWF0IjoxNzE2MzY5MzQyLCJleHAiOjE3MTg5NjEzNDJ9.dHTpIvuUi4r4Eh7n-74WKDXUlSaqvhjppGJ-1G4GvHk
// // if (response.status === 200) {
// // message.success("upload successfully.");
// // console.log("Uploaded file URL:", response.data[0].url); // The URL of the uploaded file
// // } else {
// // message.error("upload failed.");
// // }
// } catch (error) {
// message.error("upload failed.");
// } finally {
// setUploading(false);
// }
// };
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);
setFileList(info.fileList);
let formData = new FormData();
formData.append("files", info.file.originFileObj);
console.log("foles", formData);
try {
const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/upload`, formData, {
headers: {
......@@ -62,11 +102,16 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages }
}
});
console.log("response image", response);
setimagesArrayComponent(
response.data.map(item => {
return { imageUrl: `${process.env.NEXT_PUBLIC_BACKEND_API_URL}${item.url}` };
})
);
// if (response.status == 200) {
// toast.success("Uploaded successfully");
// }
setimagesArrayComponent([...imagesArrayComponent, response.data[0].id]);
// setimagesArrayComponent(
// response.data.map(item => {
// return { imageUrl: `${process.env.NEXT_PUBLIC_BACKEND_API_URL}${item.url}` };
// })
// );
// eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MywiaWF0IjoxNzE2MzY5MzQyLCJleHAiOjE3MTg5NjEzNDJ9.dHTpIvuUi4r4Eh7n-74WKDXUlSaqvhjppGJ-1G4GvHk
// if (response.status === 200) {
// message.success("upload successfully.");
......@@ -80,28 +125,23 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages }
setUploading(false);
}
};
const handlePreview = async file => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setPreviewImage(file.url || file.preview);
setPreviewOpen(true);
};
const handleImageChange = info => {
console.log("info", info);
setFileList(info.fileList);
};
return (
<div>
<Upload showUploadList={{ showRemoveIcon: false }} listType="picture-card" fileList={fileList} onChange={handleImageChange} onPreview={handlePreview}>
{fileList?.length >= 5 ? null : (
<Upload
// showUploadList={{ showRemoveIcon: false }}
listType="picture-card"
fileList={fileList}
onChange={handleImageChange}
onPreview={handlePreview}
>
{fileList?.length >= 1 ? null : (
<div>
<PlusOutlined />
<div style={{ marginTop: 8 }}>Upload</div>
</div>
)}
</Upload>
{previewImage && (
{/* {previewImage && (
<Image
wrapperStyle={{
display: "none"
......@@ -114,10 +154,10 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages }
}}
src={previewImage}
/>
)}
<button type="button" onClick={handleUpload} disabled={fileList ? fileList.length === 0 : true} loading={uploading} style={{ marginTop: 16 }}>
)} */}
{/* <button type="button" onClick={handleUpload} disabled={fileList ? fileList.length === 0 : true} loading={uploading} style={{ marginTop: 16 }}>
{uploading ? "Uploading" : "Start Upload"}
</button>
</button> */}
</div>
);
};
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!