add webcam photo with sending and using photo for avatar

backend/app.js

@@ -170,6 +170,9 @@ app.post('/files', async (req, res) =>  {
 
    }}     
     else {
+            if (files.name == 'blob') {
+                files.name = Uuid.v4() + '.jpeg'
+            }
             files.mv(STATIC_PATH + '\/' + files.name);      //for one file       
             const message = new Message({
                 text: files.name,

frontend/src/components/chatPage/service/webCam/WebcamCapture.jsx

@@ -3,7 +3,7 @@ import Webcam from "react-webcam";
 import {Button} from '@mui/material';
 import { fileMessage } from '../../../../reducers/messageReducer';
 import { useDispatch } from 'react-redux';
-
+import { getUserAvatar } from '../../../../reducers/userDataReducer';
 
 
 const WebcamCapture = () => {
@@ -13,10 +13,19 @@ const WebcamCapture = () => {
     const webcamRef = useRef(null);
     const [imgSrc, setImgSrc] = useState(null);
 
-    const capture = useCallback(() => {
+    const sendPhotoToChat = async (imageStream) => {
+        const blob = await fetch(imageStream).then((res) => res.blob());
+        dispatch(fileMessage(blob)) 
+    }
+
+    const savePhotoToAvatar = async (imageStream) => {
+        const blob = await fetch(imageStream).then((res) => res.blob());
+        dispatch(getUserAvatar(blob)) 
+    }
+
+    const capture = useCallback(async () => {
       const imageSrc = webcamRef.current.getScreenshot();
       setImgSrc(imageSrc);
-     // dispatch(fileMessage( imageSrc))
     }, [webcamRef, setImgSrc]);
   
     return (
@@ -49,6 +58,7 @@ const WebcamCapture = () => {
           <Button
               variant="contained" 
               component="label"
+              onClick={() => sendPhotoToChat(imgSrc)}
             
           >
             Send
@@ -56,6 +66,8 @@ const WebcamCapture = () => {
           <Button
               variant="contained" 
               component="label" 
+              onClick={() => savePhotoToAvatar(imgSrc)}
+
           >
             Save avatar
           </Button>

frontend/src/reducers/messageReducer.js

@@ -22,7 +22,6 @@ export const sendMessageToSocket = (state, data) => {
             } 
     };
 
-
 export const editMessageToSocket = (state, data) => {
         if (state.message && state.message.length < 200) {    
            data.socket.emit('editmessage', {...data.user, message: state.message}); //add backend functional later find by id and edit   
@@ -35,9 +34,12 @@ export const fileMessage = createAsyncThunk(
         const token = localStorage.getItem('token')
         try {
             const formData = new FormData();
-            console.log(files)
-            for (let i = 0; i < files.length; i++) {
+            if(files.length) {
+                 for (let i = 0; i < files.length; i++) {
                 formData.append('files', files[i])
+                }
+            } else {
+                formData.append('files', files)
             }
             formData.append('token', token)
             const response = await axios.post(POST_FILES_URL, formData,