Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit b714835d by jaymehta
Options

img upload

1 parent 2c642d47
Inline Side-by-side
Showing 3 changed files with 165 additions and 73 deletions
components/vendor/ActivityDetails.js
...@@ -417,6 +417,11 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -417,6 +417,11 @@ const ActivityDetails = ({ isUpdate }) => {
toDate = endDate; toDate = endDate;
} }
if (imagesArrayComponent.length < 5) {
toast.error("You need to upload 5 images!");
return;
}
handleSubmit(); handleSubmit();
values = { values = {
...values, ...values,
...@@ -1105,13 +1110,56 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -1105,13 +1110,56 @@ const ActivityDetails = ({ isUpdate }) => {
</div> </div>
</div> </div>
</div> </div>
{/* <UploadImageComponent /> */} <div className="row d-flex ">
{/* <UploadImageComponent setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent}/> */}
<div className="col-2">
<ImageUploadPopUp
// className="col-2"
isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent}
/>
</div>
<div className="col-2">
<ImageUploadPopUp
// className="col-2"
isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent}
/>
</div>
<div className="col-2">
<ImageUploadPopUp
// className="col-2"
isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent}
/>
</div>
<div className="col-2">
<ImageUploadPopUp
// className="col-2"
isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent}
/>
</div>
<div className="col-2">
<ImageUploadPopUp <ImageUploadPopUp
// className="col-2"
isUpdate={isUpdate} isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent} setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent} imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent} populatedImages={activityById?.data.attributes.imagesComponent}
/> />
</div>
</div>
{console.log("setimagesArrayComponent", imagesArrayComponent)} {console.log("setimagesArrayComponent", imagesArrayComponent)}
<br /> <br />
<> <>
......
components/vendor/ImageUploadPopUp.js
...@@ -29,58 +29,10 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages, ...@@ -29,58 +29,10 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages,
// dispatch(getLoggedInVendor()); // dispatch(getLoggedInVendor());
}, []); }, []);
// useEffect(() => {
// setFileList(
// populatedImages &&
// populatedImages.map(item => {
// return {
// uid: item.id,
// name: "image.png",
// status: "done",
// url: item.imageUrl
// };
// })
// );
// }, []);
console.log("fileList", fileList); console.log("fileList", fileList);
let formData = new FormData(); let formData = new FormData();
// const handleUpload = async () => { let finalId;
// fileList.forEach(file => {
// console.log("file", file.originFileObj);
// formData.append("files", file.originFileObj);
// });
// console.log("fileList", fileList);
// console.log("formData", formData);
// 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 => { const handlePreview = async file => {
if (!file.url && !file.preview) { if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj); file.preview = await getBase64(file.originFileObj);
...@@ -88,12 +40,21 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages, ...@@ -88,12 +40,21 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages,
setPreviewImage(file.url || file.preview); setPreviewImage(file.url || file.preview);
setPreviewOpen(true); setPreviewOpen(true);
}; };
const handleImageChange = async info => { const handleImageChange = async info => {
console.log("info", info); console.log("info", info);
setFileList(info.fileList); const newFileList = [...info.fileList];
if (info.file.status === "uploading") {
setUploading(true);
setFileList(newFileList);
return;
}
if (info.file.status === "done") {
let formData = new FormData(); let formData = new FormData();
formData.append("files", info.file.originFileObj); 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: {
...@@ -101,37 +62,74 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages, ...@@ -101,37 +62,74 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages,
Authorization: `Bearer ${session.jwt}` Authorization: `Bearer ${session.jwt}`
} }
}); });
console.log("response image", response);
// if (response.status == 200) {
// toast.success("Uploaded successfully");
// }
setimagesArrayComponent([...imagesArrayComponent, response.data[0].id]);
// setimagesArrayComponent( if (response.status === 200) {
// response.data.map(item => { const newFileId = response.data[0].id;
// return { imageUrl: `${process.env.NEXT_PUBLIC_BACKEND_API_URL}${item.url}` };
// }) // Update the file list with the new file ID
// ); const updatedFileList = newFileList.map(file => {
// eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MywiaWF0IjoxNzE2MzY5MzQyLCJleHAiOjE3MTg5NjEzNDJ9.dHTpIvuUi4r4Eh7n-74WKDXUlSaqvhjppGJ-1G4GvHk if (file.uid === info.file.uid) {
// if (response.status === 200) { return {
// message.success("upload successfully."); ...file,
// console.log("Uploaded file URL:", response.data[0].url); // The URL of the uploaded file id: newFileId,
// } else { url: response.data[0].url // You can add any other response data you need here
// message.error("upload failed."); };
// } }
return file;
});
setFileList(updatedFileList);
setimagesArrayComponent([...imagesArrayComponent, newFileId]);
message.success(`${info.file.name} uploaded successfully.`);
}
} catch (error) { } catch (error) {
message.error("upload failed."); message.error(`${info.file.name} upload failed.`);
} finally { } finally {
setUploading(false); 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(file);
const imageId = file.id;
if (!imageId) {
message.error(`Failed to remove ${file.name}. Image ID not found.`);
return;
}
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 ( return (
<div> <div>
<Upload <Upload
// customRequest={handleCustomRequest}
// enterButton={true}
// showUploadList={{ showRemoveIcon: false }} // showUploadList={{ showRemoveIcon: false }}
listType="picture-card" listType="picture-card"
fileList={fileList} fileList={fileList}
// multiple={false}
onChange={handleImageChange} onChange={handleImageChange}
onRemove={handleRemove}
onPreview={handlePreview} onPreview={handlePreview}
> >
{fileList?.length >= 1 ? null : ( {fileList?.length >= 1 ? null : (
...@@ -141,7 +139,7 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages, ...@@ -141,7 +139,7 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages,
</div> </div>
)} )}
</Upload> </Upload>
{/* {previewImage && ( {previewImage && (
<Image <Image
wrapperStyle={{ wrapperStyle={{
display: "none" display: "none"
...@@ -154,7 +152,7 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages, ...@@ -154,7 +152,7 @@ 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> */}
......
components/vendor/UploadImageComponent.js
import { PlusOutlined } from "@ant-design/icons"; import { PlusOutlined } from "@ant-design/icons";
import axios from "axios";
import React from "react"; import React from "react";
const UploadImageComponent = () => { const UploadImageComponent = () => {
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: {
"Content-Type": "multipart/form-data",
Authorization: `Bearer ${session.jwt}`
}
});
console.log("response image", response);
// 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.");
// 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);
}
};
return ( return (
<div> <div>
<div className="upload-file"> <div className="upload-file">
{/* <button> */} {/* <button> */}
<input className="upload-file-input" type="file" id={`termsConditionsFile`} name={`termsConditionsFile`} /> <input
className="upload-file-input"
type="file"
id={`termsConditionsFile`}
name={`termsConditionsFile`}
onInput={e => {
console.log(e);
}}
/>
{/* <PlusOutlined /> */} {/* <PlusOutlined /> */}
{/* </button> */} {/* </button> */}
{/* <label className="custom-file-label" htmlFor={`termsConditionsFile`}> {/* <label className="custom-file-label" htmlFor={`termsConditionsFile`}>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!