Add file select input in addition to drag n drop

app/lib/components/Chat/Chat.jsx

@@ -5,17 +5,9 @@ import * as stateActions from '../../redux/stateActions';
 import * as requestActions from '../../redux/requestActions';
 import MessageList from './MessageList';
 import FileSharing from './FileSharing';
-import WebTorrent from 'webtorrent';
 
 class Chat extends Component
 {
-	constructor(props)
-	{
-		super(props);
-
-		this.client = new WebTorrent();
-	}
-
 	render()
 	{
 		const {
@@ -29,9 +21,9 @@ class Chat extends Component
 
 		return (
 			<div data-component='Chat'>
-				<MessageList client={this.client} />
+				<MessageList />
 
-				<FileSharing client={this.client} />
+				<FileSharing />
 
 				<form
 					data-component='Sender'

app/lib/components/Chat/FileChatEntry.jsx

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
-import WebTorrent from 'webtorrent';
 import { saveAs } from 'file-saver/FileSaver';
+import { client } from './FileSharing';
 
 const saveFile = (file) =>
 {
@@ -32,7 +32,7 @@ class FileChatEntry extends Component
       active: true
     });
 
-    this.props.client.add(this.props.message.file.magnet, (torrent) =>
+    client.add(this.props.message.file.magnet, (torrent) =>
     {
       const onProgress = () =>
       {

app/lib/components/Chat/FileSharing.jsx

@@ -4,55 +4,48 @@ import WebTorrent from 'webtorrent';
 import dragDrop from 'drag-drop';
 import * as stateActions from '../../redux/stateActions';
 import * as requestActions from '../../redux/requestActions';
+import { store } from '../../store';
+
+export const client = new WebTorrent();
+
+const notifyPeers = (file) =>
+{
+  const { displayName, picture } = store.getState().me;
+  store.dispatch(stateActions.addUserFile(file));
+  store.dispatch(requestActions.sendChatFile(file, displayName, picture));
+};
+
+const shareFiles = (files) =>
+{
+  client.seed(files, (torrent) => {
+    notifyPeers({
+      magnet: torrent.magnetURI
+    });
+  });
+};
+
+dragDrop('body', shareFiles);
 
 class FileSharing extends Component {
-  notifyPeers = (file) =>
+  constructor(props)
   {
-    this.props.notifyPeers(
-      file,
-      this.props.displayName,
-      this.props.picture
-    );
-  };
-
-  componentDidMount()
-  {
-    dragDrop('body', (files) =>
-    {
-      this.props.client.seed(files, (torrent) => {
-        this.notifyPeers({
-          magnet: torrent.magnetURI
-        });
-      });
-    });
+    super(props);
   }
 
+  handleFileChange = (event) =>
+  {
+    if (event.target.files.length > 0)
+    {
+      shareFiles(event.target.files);
+    }
+  };
+
   render()
   {
     return (
-      <div>
-        drag & drop files to share them!!!
-      </div>
+      <input type="file" onChange={this.handleFileChange} />
     );
   }
 }
 
-const mapStateToProps = (state) =>
-  ({
-    displayName: state.me.displayName,
-    picture: state.me.picture
-  });
-
-const mapDispatchToProps = (dispatch) =>
-  ({
-    notifyPeers: (file, displayName, picture) =>
-    {
-      dispatch(stateActions.addUserFile(file));
-      dispatch(requestActions.sendChatFile(file, displayName, picture));
-    }
-  });
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(FileSharing);
+export default FileSharing;

app/lib/components/Chat/MessageList.jsx

@@ -74,7 +74,7 @@ class MessageList extends Component
 										)}
 
 										{message.type === 'file' && (
-											<FileChatEntry message={message} client={this.props.client} />
+											<FileChatEntry message={message} />
 										)}
 									</div>