Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 33652f17 by jaymehta
Options

image issue

1 parent bef86b4c
Inline Side-by-side
Showing 2 changed files with 40 additions and 12 deletions
components/vendor/ActivityDetails.js
...@@ -140,6 +140,11 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -140,6 +140,11 @@ const ActivityDetails = ({ isUpdate }) => {
// const [uploading, setUploading] = useState(false); // const [uploading, setUploading] = useState(false);
const [showImageUploadModal, setshowImageUploadModal] = useState(false); const [showImageUploadModal, setshowImageUploadModal] = useState(false);
const [imagesArrayComponent, setimagesArrayComponent] = useState([]); const [imagesArrayComponent, setimagesArrayComponent] = useState([]);
const [image1, setimage1] = useState();
const [image2, setimage2] = useState();
const [image3, setimage3] = useState();
const [image4, setimage4] = useState();
const [image5, setimage5] = useState();
const [displayImage, setdisplayImage] = useState(); const [displayImage, setdisplayImage] = useState();
const [termsConditions, settermsConditions] = useState(); const [termsConditions, settermsConditions] = useState();
const [cancellationPolicy, setCancellationPolicy] = useState(); const [cancellationPolicy, setCancellationPolicy] = useState();
...@@ -337,6 +342,11 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -337,6 +342,11 @@ const ActivityDetails = ({ isUpdate }) => {
setStartDate(activityById?.data.attributes.fromDate); setStartDate(activityById?.data.attributes.fromDate);
setEndDate(activityById?.data.attributes.toDate); setEndDate(activityById?.data.attributes.toDate);
setimagesArrayComponent(activityById?.data.attributes.imagesComponent.map(item => item.image.data?.id)); setimagesArrayComponent(activityById?.data.attributes.imagesComponent.map(item => item.image.data?.id));
setimage1(activityById?.data.attributes.imagesComponent[0].image.data?.id);
setimage2(activityById?.data.attributes.imagesComponent[1].image.data?.id);
setimage3(activityById?.data.attributes.imagesComponent[2].image.data?.id);
setimage4(activityById?.data.attributes.imagesComponent[3].image.data?.id);
setimage5(activityById?.data.attributes.imagesComponent[4].image.data?.id);
setdisplayImage(activityById?.data.attributes.image?.data?.id); setdisplayImage(activityById?.data.attributes.image?.data?.id);
setCancellationPolicy(activityById?.data.attributes.cancellationPolicy?.data?.id); setCancellationPolicy(activityById?.data.attributes.cancellationPolicy?.data?.id);
settermsConditions(activityById?.data.attributes.termsConditions?.data?.id); settermsConditions(activityById?.data.attributes.termsConditions?.data?.id);
...@@ -428,7 +438,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -428,7 +438,7 @@ const ActivityDetails = ({ isUpdate }) => {
toDate = endDate; toDate = endDate;
} }
if (imagesArrayComponent.length < 5) { if (!image1 || !image2 || !image3 || !image4 || !image5) {
toast.error("You need to upload 5 images!"); toast.error("You need to upload 5 images!");
return; return;
} }
...@@ -458,7 +468,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -458,7 +468,7 @@ const ActivityDetails = ({ isUpdate }) => {
daysBoolean, daysBoolean,
contactPersonForActivity: values.contactPersonForActivity, contactPersonForActivity: values.contactPersonForActivity,
duration: values.durationUnit.toString(), duration: values.durationUnit.toString(),
imagesComponent: imagesArrayComponent, imagesComponent: [image1, image2, image3, image4, image5],
image: displayImage, image: displayImage,
approved: "pending", approved: "pending",
termsConditions: termsConditions, termsConditions: termsConditions,
...@@ -1113,7 +1123,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -1113,7 +1123,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="col-2"> <div className="col-2">
<ImageUploadPopUp <ImageUploadPopUp
isUpdate={isUpdate} isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent} setimagesArrayComponent={setimage1}
imagesArrayComponent={imagesArrayComponent} imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent[0]} populatedImages={activityById?.data.attributes.imagesComponent[0]}
/> />
...@@ -1121,7 +1131,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -1121,7 +1131,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="col-2"> <div className="col-2">
<ImageUploadPopUp <ImageUploadPopUp
isUpdate={isUpdate} isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent} setimagesArrayComponent={setimage2}
imagesArrayComponent={imagesArrayComponent} imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent[1]} populatedImages={activityById?.data.attributes.imagesComponent[1]}
/> />
...@@ -1129,7 +1139,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -1129,7 +1139,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="col-2"> <div className="col-2">
<ImageUploadPopUp <ImageUploadPopUp
isUpdate={isUpdate} isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent} setimagesArrayComponent={setimage3}
imagesArrayComponent={imagesArrayComponent} imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent[2]} populatedImages={activityById?.data.attributes.imagesComponent[2]}
/> />
...@@ -1137,7 +1147,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -1137,7 +1147,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="col-2"> <div className="col-2">
<ImageUploadPopUp <ImageUploadPopUp
isUpdate={isUpdate} isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent} setimagesArrayComponent={setimage4}
imagesArrayComponent={imagesArrayComponent} imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent[3]} populatedImages={activityById?.data.attributes.imagesComponent[3]}
/> />
...@@ -1145,13 +1155,24 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -1145,13 +1155,24 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="col-2"> <div className="col-2">
<ImageUploadPopUp <ImageUploadPopUp
isUpdate={isUpdate} isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent} setimagesArrayComponent={setimage5}
imagesArrayComponent={imagesArrayComponent} imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent[4]} populatedImages={activityById?.data.attributes.imagesComponent[4]}
/> />
</div> </div>
</div> </div>
{console.log("setimagesArrayComponent", imagesArrayComponent)} {console.log("setimagesArrayComponent", [image1, image2, image3, image4, image5])}
<button
onClick={e => {
e.preventDefault();
console.log("ids", [image1, image2, image3, image4, image5]);
}}
>
asd
</button>
<br />
<br />
<br />
<br /> <br />
<> <>
{/* <button {/* <button
......
components/vendor/ImageUploadPopUp.js
...@@ -101,7 +101,7 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages, ...@@ -101,7 +101,7 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages,
}); });
setFileList(updatedFileList); setFileList(updatedFileList);
setimagesArrayComponent([...imagesArrayComponent, newFileId]); setimagesArrayComponent(newFileId);
message.success(`${info.file.name} uploaded successfully.`); message.success(`${info.file.name} uploaded successfully.`);
} }
} catch (error) { } catch (error) {
...@@ -122,21 +122,28 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages, ...@@ -122,21 +122,28 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages,
}; };
const handleRemove = async file => { const handleRemove = async file => {
console.log("handle remove", file); console.log("handle remove", file);
const imageId = file.deleteId; let imageId;
if (file.deleteId) {
imageId = file.deleteId;
} else {
imageId = file.id;
}
if (!imageId) { if (!imageId) {
console.log("delete here");
message.error(`Failed to remove ${file.name}. Image ID not found.`); message.error(`Failed to remove ${file.name}. Image ID not found.`);
return; return;
} }
setimagesArrayComponent(imagesArrayComponent.filter(item => item != imageId));
setFileList([]); setFileList([]);
try { try {
await axios.delete(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/upload/files/${imageId}`, { const res = await axios.delete(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/upload/files/${imageId}`, {
headers: { headers: {
"Content-Type": "multipart/form-data", "Content-Type": "multipart/form-data",
Authorization: `Bearer ${session.jwt}` Authorization: `Bearer ${session.jwt}`
} }
}); // Replace with your Strapi delete endpoint }); // Replace with your Strapi delete endpoint
console.log("delete res", res);
message.success(`${file.name} file removed successfully.`); message.success(`${file.name} file removed successfully.`);
setimagesArrayComponent(null);
setFileList(prevFileList => prevFileList.filter(item => item.uid !== file.uid)); setFileList(prevFileList => prevFileList.filter(item => item.uid !== file.uid));
} catch (error) { } catch (error) {
message.error(`Failed to remove ${file.name}`); message.error(`Failed to remove ${file.name}`);
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!