add image sending and files to chat need to fix and simplify

backend/app.js

@@ -125,6 +125,10 @@ app.post('/avatar', async (req, res) =>  {
     }
 })
 
+
+
+
+
 app.post('/files', async (req, res) =>  {
     if (!req.files || Object.keys(req.files).length === 0) {
         return res.status(400).json('No files were uploaded.');
@@ -139,10 +143,10 @@ app.post('/files', async (req, res) =>  {
     if (files.length) {
         for (let i = 0; i < files.length; i++) {
         let file = files[i]
-        file.mv(STATIC_PATH + '\/files/' + file.name) 
+        file.mv(STATIC_PATH + '\/' + file.name) 
 
         const message = new Message({
-            text: 'data.message',
+            text:  file.name,
             userName: user.userName,
             createDate: Date.now(),
             user: oneUser.id, //add link to other collection by id
@@ -165,9 +169,9 @@ app.post('/files', async (req, res) =>  {
 
    }}     
     else {
-            files.mv(STATIC_PATH + '\/files/' + files.name);      //for one file       
+            files.mv(STATIC_PATH + '\/' + files.name);      //for one file       
             const message = new Message({
-                text: 'File sent',
+                text: files.name,
                 userName: user.userName,
                 createDate: Date.now(),
                 user: oneUser.id, //add link to other collection by id
@@ -185,8 +189,7 @@ app.post('/files', async (req, res) =>  {
             catch (error) {
                 console.log('Message save to db error', error);   
             }
-            const newMessages = await message.populate( {path:'user'})   
-            console.log(newMessages)
+            const newMessages = await message.populate( {path:'user'})  
             io.emit('newmessage', newMessages); 
     } 
 

frontend/src/components/chatPage/messageForm/MessegaForm.jsx

@@ -1,12 +1,14 @@
-import { Avatar, Box, StyledBadge } from '@mui/material';
+import { Avatar, Box, Button} from '@mui/material';
 import { dateFormat } from '../utils/dateFormat';
 import { useSelector } from 'react-redux';   
-import { useRef, useEffect, useState} from 'react';
+import { useRef, useEffect} from 'react';
 import { scrollToBottom } from '../utils/scrollToBottom';
 import { useDispatch } from 'react-redux';
 import { editMessage } from '../../../reducers/messageReducer';
 import { StyledAvatar } from './StyledAvatar';
 import { MessageEditorMenu } from '../MessageEditorMenu.jsx';
+import imgBtn from '../../../assets/img/gg.png';
+
 
 export const MessageForm = () => {
 
@@ -25,7 +27,6 @@ export const MessageForm = () => {
 
     const regYoutube = /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?/; //for youtube video
 
-
     useEffect(() => {
         scrollToBottom(endMessages)
         console.log('useEffect', endMessages)
@@ -93,8 +94,44 @@ export const MessageForm = () => {
                             <p>{item.text}</p>  
                            }
 
+                           {
+                            (item.file && item.file.split('.')[1] !== 'jpeg') ? 
+
+                                <a href={SERVER_URL + item.file} download> 
+                                    <Button
+                                        variant="contained" 
+                                        component="label"
+                                        sx = {{
+                                            minWidth: 'auto',
+                                            minHeight: '40px',
+                                            backgroundImage:'url(' + imgBtn + ')' ,
+                                            backgroundPosition: 'center', 
+                                            backgroundRepeat: "no-repeat", 
+                                            backgroundSize: '20px 40px'
+
+                                        }}
+
+                                    
+                                        
+                                    >
+                                    </Button>  
+                                </a>
+                        : 
+                            ''                            
+                        }
+
+                        {
+                            (item.file && item.file.split('.')[1] == 'jpeg' ) //need to fix for other type files
+                            ? 
+                                 <img width={150} height={150} src={ SERVER_URL + item.file} alt={'error load image'}/>
+                            :
+                            ''
+
+                        }
+
                         </div>
 
+
                         <div className={ 
                                 (item.userName === user.userName)? 'myDate' :'date'}>
                                 {dateFormat(item).time}