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