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 178 additions and 86 deletions
components/vendor/ActivityDetails.js
......@@ -417,6 +417,11 @@ const ActivityDetails = ({ isUpdate }) => {
toDate = endDate;
}
if (imagesArrayComponent.length < 5) {
toast.error("You need to upload 5 images!");
return;
}
handleSubmit();
values = {
...values,
......@@ -1105,13 +1110,56 @@ const ActivityDetails = ({ isUpdate }) => {
</div>
</div>
</div>
{/* <UploadImageComponent /> */}
<ImageUploadPopUp
isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent}
<div className="row d-flex ">
{/* <UploadImageComponent setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent}
/>
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
// className="col-2"
isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent}
/>
</div>
</div>
{console.log("setimagesArrayComponent", imagesArrayComponent)}
<br />
<>
......
components/vendor/ImageUploadPopUp.js
......@@ -29,58 +29,10 @@ 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
// };
// })
// );
// }, []);
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);
// setUploading(true);
let finalId;
// 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);
......@@ -88,50 +40,96 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages,
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);
const newFileList = [...info.fileList];
if (info.file.status === "uploading") {
setUploading(true);
setFileList(newFileList);
return;
}
if (info.file.status === "done") {
let formData = new FormData();
formData.append("files", info.file.originFileObj);
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}`
}
});
if (response.status === 200) {
const newFileId = response.data[0].id;
// Update the file list with the new file ID
const updatedFileList = newFileList.map(file => {
if (file.uid === info.file.uid) {
return {
...file,
id: newFileId,
url: response.data[0].url // You can add any other response data you need here
};
}
return file;
});
setFileList(updatedFileList);
setimagesArrayComponent([...imagesArrayComponent, newFileId]);
message.success(`${info.file.name} uploaded successfully.`);
}
} catch (error) {
message.error(`${info.file.name} upload failed.`);
} finally {
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 {
const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/upload`, formData, {
await axios.delete(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/upload/files/${imageId}`, {
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.");
// }
}); // 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("upload failed.");
} finally {
setUploading(false);
message.error(`Failed to remove ${file.name}`);
}
};
return (
<div>
<Upload
// customRequest={handleCustomRequest}
// enterButton={true}
// showUploadList={{ showRemoveIcon: false }}
listType="picture-card"
fileList={fileList}
// multiple={false}
onChange={handleImageChange}
onRemove={handleRemove}
onPreview={handlePreview}
>
{fileList?.length >= 1 ? null : (
......@@ -141,7 +139,7 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages,
</div>
)}
</Upload>
{/* {previewImage && (
{previewImage && (
<Image
wrapperStyle={{
display: "none"
......@@ -154,7 +152,7 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages,
}}
src={previewImage}
/>
)} */}
)}
{/* <button type="button" onClick={handleUpload} disabled={fileList ? fileList.length === 0 : true} loading={uploading} style={{ marginTop: 16 }}>
{uploading ? "Uploading" : "Start Upload"}
</button> */}
......
components/vendor/UploadImageComponent.js
import { PlusOutlined } from "@ant-design/icons";
import axios from "axios";
import React from "react";
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 (
<div>
<div className="upload-file">
{/* <button> */}
<input className="upload-file-input" type="file" id={`termsConditionsFile`} name={`termsConditionsFile`} />
{/* <PlusOutlined /> */}
<input
className="upload-file-input"
type="file"
id={`termsConditionsFile`}
name={`termsConditionsFile`}
onInput={e => {
console.log(e);
}}
/>
{/* <PlusOutlined /> */}
{/* </button> */}
{/* <label className="custom-file-label" htmlFor={`termsConditionsFile`}>
Upload
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!