网页版的聊天怎么实现图片的发送，类似于微信的网页版

用 react做的一个项目，网站上要求可以跟别的人在线上交流
用websocket发送消息，后端和websocket发送都没有问题，仅仅发送文本消息也可以实现，
问题是前端不知道怎么实现图片的发送？
比如怎么能把图片拖到消息框的时候，松开鼠标图片就能直接上传，

或者复制一张图片在输入框就会显示一张是否要送的图片，

或者点击上传按钮选择完一张图片之后图片就会在消息框显示正在加载上传中

有没有大神知道这要怎么实现啊？