Send Images

[whosjorge23]

How can I send Images to other people?

import React, { useState, useEffect } from "react"; import queryString from 'query-string'; import io from "socket.io-client";

import TextContainer from '../TextContainer/TextContainer'; import Messages from '../Messages/Messages'; import InfoBar from '../InfoBar/InfoBar'; import Input from '../Input/Input';

import './Chat.css';

const ENDPOINT = 'localhost:5000';

let socket;

const Chat = ({ location }) => { const [name, setName] = useState(''); const [room, setRoom] = useState(''); const [users, setUsers] = useState(''); const [message, setMessage] = useState(''); const [messages, setMessages] = useState([]); const [file, setFile] = useState('');

useEffect(() => { const { name, room } = queryString.parse(location.search);

socket = io(ENDPOINT);

setRoom(room);
setName(name)

socket.emit('join', { name, room }, (error) => {
  if(error) {
    alert(error);
  }
});

}, [ENDPOINT, location.search]);

useEffect(() => { socket.on('message', message => { setMessages(messages => [ ...messages, message ]); });

socket.on('file', file => {
  setFile(messages => [ ...messages, file ]);
});

socket.on("roomData", ({ users }) => {
  setUsers(users);
});

}, []);

const sendMessage = (event) => { event.preventDefault();

if(message) {
  socket.emit('sendMessage', message, () => setMessage(''));
}
if(file) {
  console.log(file)
  socket.emit('sendMessage', file, () => setFile(''));
}

}

function selectFile(e) { setMessage(e.target.files[0].name); setFile(e.target.files[0]); }

return (

); }

export default Chat;

This is the code that I've modified.