Automatically save file when downloaded

app/lib/components/Chat/FileChatEntry.jsx

@@ -0,0 +1,78 @@
+import React, { Component, Fragment } from 'react';
+import WebTorrent from 'webtorrent';
+import { saveAs } from 'file-saver/FileSaver';
+
+class FileChatEntry extends Component
+{
+  constructor(props)
+  {
+    super(props);
+
+    this.client = new WebTorrent();
+  }
+
+  state = {
+    active: false,
+    numPeers: 0,
+    progress: 0
+  };
+
+  download = () =>
+  {
+    this.setState({
+      active: true
+    });
+
+    this.client.add(this.props.message.file.magnet, (torrent) =>
+    {
+      const onProgress = () =>
+      {
+        this.setState({
+          numPeers: torrent.numPeers,
+          progress: Math.round(torrent.progress * 100 * 100) / 100
+        });
+      };
+
+      setInterval(onProgress, 500);
+      onProgress();
+
+      torrent.on('done', () => {
+        onProgress();
+
+        torrent.files.forEach((file) => {
+          file.getBlob((err, blob) => {
+            if (err)
+            {
+              console.error('webtorrent error!!!');
+              return;
+            }
+
+            saveAs(blob);
+          });
+        });
+      });
+    });
+  }
+
+  render()
+  {
+    return (
+      <Fragment>
+        <div>
+          <button onClick={this.download}>
+            append shared file to body
+          </button>
+
+          {this.state.active && (
+            <div>
+              peers: {this.state.numPeers}
+              progress: {this.state.progress}
+            </div>
+          )}
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+export default FileChatEntry;

app/lib/components/Chat/FileSharing.jsx

@@ -49,7 +49,6 @@ const mapDispatchToProps = (dispatch) =>
   ({
     notifyPeers: (file, displayName, picture) =>
     {
-      console.log(file)
       dispatch(stateActions.addUserFile(file));
       dispatch(requestActions.sendChatFile(file, displayName, picture));
     }

app/lib/components/Chat/MessageList.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import marked from 'marked';
 import { connect } from 'react-redux';
+import FileChatEntry from './FileChatEntry';
 
 const scrollToBottom = () =>
 {
@@ -73,9 +74,7 @@ class MessageList extends Component
 										)}
 
 										{message.type === 'file' && (
-											<div>
-												{message.file.magnet}
-											</div>
+											<FileChatEntry message={message} />
 										)}
 									</div>
 

app/package-lock.json

@@ -4344,6 +4344,11 @@
         "object-assign": "^4.0.1"
       }
     },
+    "file-saver": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-1.3.8.tgz",
+      "integrity": "sha512-spKHSBQIxxS81N/O21WmuXA2F6wppUCsutpzenOeZzOCCJ5gEfcbqJP983IrpLXzYmXnMUa6J03SubcNPdKrlg=="
+    },
     "filename-regex": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",

app/package.json

@@ -12,6 +12,7 @@
     "debug": "^3.1.0",
     "domready": "^1.0.8",
     "drag-drop": "^4.2.0",
+    "file-saver": "^1.3.8",
     "fscreen": "^1.0.2",
     "hark": "^1.2.2",
     "js-cookie": "^2.2.0",