.

components/vendor/ActivityDetails.js

@@ -425,6 +425,10 @@ const ActivityDetails = ({ isUpdate }) => {
                           return;
                         }
 
+                        if (!displayImage) {
+                          toast.error("You need to upload a display image!");
+                          return;
+                        }
                         handleSubmit();
                         values = {
                           ...values,
@@ -447,8 +451,7 @@ const ActivityDetails = ({ isUpdate }) => {
                           contactPersonForActivity: values.contactPersonForActivity,
                           duration: values.durationUnit.toString(),
                           imagesComponent: imagesArrayComponent,
-                          // imagesComponent: [103, 104, 105, 106,107],
-
+                          image: displayImage,
                           approved: "pending"
                         };
                         if (!ref.current.state.selected[0]) {
@@ -1118,7 +1121,8 @@ const ActivityDetails = ({ isUpdate }) => {
                         </div>
                         <div className="row d-flex mt-4">
                           <p className="textH">Add display image</p>
-                          <UploadImageCustom isUpdate={isUpdate} setImage={setdisplayImage} populatedImages={displayImage} />
+                          {console.log(displayImage)}
+                          <UploadImageCustom isUpdate={isUpdate} setImage={setdisplayImage} populatedImages={activityById?.data.attributes} />
                           <hr />
                         </div>
                         <div className="row d-flex ">

components/vendor/UploadImageCustom.js

 import { PlusOutlined } from "@ant-design/icons";
-import { Upload } from "antd";
+import { message, Upload } from "antd";
 import axios from "axios";
 import { getSession } from "next-auth/react";
 import React, { useEffect, useState } from "react";
 import { cleanImage } from "../../services/imageHandling";
 
-const UploadImageCustom = ({ isUpdate, setimagesArrayComponent, populatedImages, imagesArrayComponent }) => {
+const UploadImageCustom = ({ isUpdate, setImage, populatedImages, imagesArrayComponent }) => {
   //   const { loadedUser } = useSelector(state => state.loadedUser);
   const [session, setSession] = useState();
   const [previewOpen, setPreviewOpen] = useState(false);
@@ -92,7 +92,7 @@ const UploadImageCustom = ({ isUpdate, setimagesArrayComponent, populatedImages,
           });
 
           setFileList(updatedFileList);
-          setimagesArrayComponent([...imagesArrayComponent, newFileId]);
+          setImage(newFileId);
           message.success(`${info.file.name} uploaded successfully.`);
         }
       } catch (error) {
@@ -118,7 +118,7 @@ const UploadImageCustom = ({ isUpdate, setimagesArrayComponent, populatedImages,
       message.error(`Failed to remove ${file.name}. Image ID not found.`);
       return;
     }
-    setimagesArrayComponent(imagesArrayComponent.filter(item => item != imageId));
+    newFileId();
     setFileList([]);
     try {
       await axios.delete(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/upload/files/${imageId}`, {