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,43 +291,67 @@ const EditJobPopOut = ({
                         </div>
                       </div>
                     </div>
-
+                    <div className="w-full flex items-center gap-2 mb-2">
-                    <div className="field w-full mb-6">
+                      {/* FOR TASK IMAGE */}
-                      <div
+                      <div className="w-1/2 relative max-h-[130px] min-h-[130px]">
-                        className={`flex items-center justify-between mb-2.5`}
+                        <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="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+                          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'>
-                          htmlFor="timeline_days"
+                            Select Task Image
-                        >
-                          Timeline
-                          <span className="text-green-700 text-sm tracking-wide">
-                            - Expected duration of this task
-                          </span>
                         </label>
+                        }
                       </div>
+                      {/* END OF TASK IMAGE */}
 
-                      <Field
+                      <div className="field w-1/2">
-                        component="select"
+                        <div
-                        name="timeline_days"
+                          className={`flex items-center justify-between`}
-                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
+                        >
-                          props.errors.timeline_days &&
+                          <label
-                          props.touched.timeline_days
+                            className="w-full input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex flex-col"
-                            ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                            htmlFor="timeline_days"
-                            : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                        }`}
-                        value={props.values.timeline_days}
-                      >
-                        <option value="">Select Duration</option>
-                        {publicArray.map(({ name, duration }, idx) => (
-                          <option
-                            className="text-slate-500 text-lg"
-                            value={duration}
                           >
-                            {name}
+                            Timeline -
-                          </option>
+                            <span className="w-full text-center text-green-700 text-sm tracking-wide">
-                        ))}
+                              Expected duration of this task
-                      </Field>
+                            </span>
+                          </label>
+                        </div>
+
+                        <Field
+                          component="select"
+                          name="timeline_days"
+                          className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
+                            props.errors.timeline_days &&
+                            props.touched.timeline_days
+                              ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                              : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                          }`}
+                          value={props.values.timeline_days}
+                        >
+                          <option value="">Select Duration</option>
+                          {publicArray.map(({ name, duration }, idx) => (
+                            <option
+                              className="text-slate-500 text-lg"
+                              value={duration}
+                            >
+                              {name}
+                            </option>
+                          ))}
+                        </Field>
+                      </div>
                     </div>
                     {/* inputs ends here */}
                   </div>