fix image sending

backend/app.js

@@ -150,7 +150,8 @@ app.post('/files', async (req, res) =>  {
             userName: user.userName,
             createDate: Date.now(),
             user: oneUser.id, //add link to other collection by id
-            file: file.name
+            file: file.name,
+            fileType: file.mimetype
         });
 
         try {
@@ -175,7 +176,8 @@ app.post('/files', async (req, res) =>  {
                 userName: user.userName,
                 createDate: Date.now(),
                 user: oneUser.id, //add link to other collection by id
-                file: files.name
+                file: files.name,
+                fileType: files.mimetype
             });
     
             try {
@@ -189,8 +191,8 @@ app.post('/files', async (req, res) =>  {
             catch (error) {
                 console.log('Message save to db error', error);   
             }
-            const newMessages = await message.populate( {path:'user'})  
-            io.emit('newmessage', newMessages); 
+           const newMessages = await message.populate( {path:'user'})  
+           io.emit('newmessage', newMessages); 
     } 
 
     return res.json({ message:'File was uploud succesfully...'})

backend/db/models/Message.js

@@ -5,7 +5,8 @@ const Message = new Schema({
     userName : {type: String, required: true},
     createDate: {type: Date, required: true},
     user: { type: Schema.Types.ObjectId, ref: 'User' },//not using 
-    file: {type: String} 
+    file: {type: String} ,
+    fileType: {type: String} 
 
 })
 

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

@@ -29,7 +29,6 @@ export const MessageForm = () => {
 
     useEffect(() => {
         scrollToBottom(endMessages)
-        console.log('useEffect', endMessages)
       }, [startMessages]);
                   
     return (             
@@ -91,47 +90,46 @@ export const MessageForm = () => {
                                 
                             </iframe>
                             :
-                            <p>{item.text}</p>  
-                           }
-
-                           {
-                            (item.file && item.file.split('.')[1] !== 'jpeg') ? 
+                           
+                            (item.file && item.fileType && item.fileType.split('/')[0] !== 'image') ? 
 
+                            <div style={{'display': 'flex', 'alignItems': 'center'}} >
+                          
                                 <a href={SERVER_URL + item.file} download> 
                                     <Button
                                         variant="contained" 
                                         component="label"
                                         sx = {{
                                             minWidth: 'auto',
-                                            minHeight: '40px',
+                                            minHeight: '25px',
                                             backgroundImage:'url(' + imgBtn + ')' ,
                                             backgroundPosition: 'center', 
                                             backgroundRepeat: "no-repeat", 
-                                            backgroundSize: '20px 40px'
-
-                                        }}
+                                            backgroundSize: '15px 20px',
+                                            backgroundColor: '#d3d3d3'
 
-                                    
-                                        
+                                        }}  
                                     >
                                     </Button>  
                                 </a>
+                                <p style={{'marginLeft': '15px'}}  >{item.text}</p>  
+                            </div>
                         : 
-                            ''                            
-                        }
+                                                       
+                            <p>{item.text}</p>  
+                           }
 
-                        {
-                            (item.file && item.file.split('.')[1] == 'jpeg' ) //need to fix for other type files
+                        { 
+                            (item.file && item.fileType && item.fileType.split('/')[0] == 'image' ) //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}

frontend/src/reducers/socketReducer.js

@@ -42,7 +42,6 @@ const connectToSocket = (event) => {
                                 })
                             .on('newmessage', (data) => {
                                 store.dispatch(addNewMessage(data))
-                                console.log(data)
                                 })
                             .on('ban', (data) => {
                                 store.dispatch(removeToken());