edit job upload image added

src/components/jobPopout/EditJobPopout.jsx

@@ -52,6 +52,18 @@ const EditJobPopOut = ({
 }) => {
   const dispatch = useDispatch();
 
+  const [taskImage, setTaskImage] = useState('')
+
+  const changeTaskImage = (e) => {
+    if (e.target.value !== "") {
+      const imgReader = new FileReader();
+      imgReader.onload = (event) => {
+        setTaskImage(event.target.result);
+      };
+      imgReader.readAsDataURL(e.target.files[0]);
+    }
+  }
+
   let [requestStatus, setRequestStatus] = useState({
     loading: false,
     status: false,
@@ -138,7 +150,7 @@ const EditJobPopOut = ({
             </svg>
           </button>
         </div>
-        <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
+        <div className="logout-modal-body w-full flex flex-col items-center px-10 pb-8 pt-2">
           <Formik
             initialValues={initialValues}
             validationSchema={validationSchema}
@@ -279,18 +291,41 @@ const EditJobPopOut = ({
                         </div>
                       </div>
                     </div>
+                    <div className="w-full flex items-center gap-2 mb-2">
+                      {/* FOR TASK IMAGE */}
+                      <div className="w-1/2 relative max-h-[130px] min-h-[130px]">
+                        <input 
+                          id="task_image"
+                          className="hidden" 
+                          type="file" 
+                          accept="image/*" 
+                          onChange={changeTaskImage}
+                        />
+                        {taskImage ?
+                        <div className="w-full absolute -top-5">
+                          <img src={taskImage} className="max-h-[150px] min-h-[150px] w-full object-cover" alt="uplaoded task image" />
+                          <span onClick={()=>setTaskImage('')} className="p-2 absolute text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/70 hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800">Remove Image</span>
+                        </div>
+                        :
+                        <label 
+                          className="absolute -top-5 h-[150px] w-full flex flex-col justify-center items-center bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold" htmlFor='task_image'>
+                            Select Task Image
+                        </label>
+                        }
+                      </div>
+                      {/* END OF TASK IMAGE */}
 
-                    <div className="field w-full mb-6">
+                      <div className="field w-1/2">
                         <div
-                        className={`flex items-center justify-between mb-2.5`}
+                          className={`flex items-center justify-between`}
                         >
                           <label
-                          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+                            className="w-full input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex flex-col"
                             htmlFor="timeline_days"
                           >
-                          Timeline
+                            Timeline -
-                          <span className="text-green-700 text-sm tracking-wide">
+                            <span className="w-full text-center text-green-700 text-sm tracking-wide">
-                            - Expected duration of this task
+                              Expected duration of this task
                             </span>
                           </label>
                         </div>
@@ -317,6 +352,7 @@ const EditJobPopOut = ({
                           ))}
                         </Field>
                       </div>
+                    </div>
                     {/* inputs ends here */}
                   </div>
                 </div>