Merge branch 'develop' of https://gitlab.com/witel-front-end/rms into develop

src/core/components/Profile/Update/Form.jsx

@@ -52,6 +52,7 @@ const Form = ({ handleCloseForm, setLoading }) => {
     const request = useRequest();
     const { user, getUser } = useAuth();
     const [uploadBackDrop, setUploadBackDrop] = useState(false);
+    const [avatarUrl, setAvatarUrl] = useState(user?.avatar || "");
     const defaultValues = {
         first_name: user.first_name,
         last_name: user.last_name,
@@ -70,6 +71,15 @@ const Form = ({ handleCloseForm, setLoading }) => {
         formState: { isSubmitting, errors },
     } = useForm({ defaultValues, resolver: yupResolver(validationSchema) });
 
+    const handleFileChange = (event) => {
+        const file = event.target.files[0];
+        if (file) {
+            const objectUrl = URL.createObjectURL(file);
+            setAvatarUrl(objectUrl);
+            setValue("avatar", file);
+        }
+    };
+
     useEffect(() => {
         setLoading(isSubmitting);
     }, [isSubmitting]);
@@ -124,7 +134,7 @@ const Form = ({ handleCloseForm, setLoading }) => {
                             onMouseEnter={() => setUploadBackDrop(true)}
                             onMouseLeave={() => setUploadBackDrop(false)}
                         >
-                            <Avatar src={user?.avatar} sx={{ width: 120, height: 120, border: "1px solid #e1e1e1" }} />
+                            <Avatar src={avatarUrl} sx={{ width: 120, height: 120, border: "1px solid #e1e1e1" }} />
                             <Backdrop
                                 sx={{
                                     color: "#fff",
@@ -144,7 +154,7 @@ const Form = ({ handleCloseForm, setLoading }) => {
                         <VisuallyHiddenInput
                             type="file"
                             accept="image/*"
-                            onChange={(event) => setValue("avatar", event.target.files[0])}
+                            onChange={handleFileChange}
                         />
                     </Button>
                 </Box>