working on making the file upload work over websocket and json

goTorrentWebUI/node_modules/material-ui-upload/UploadPreview/index.css

@@ -0,0 +1,29 @@
+.PreviewsContainer {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.PreviewContainer {
+    position: relative;
+    box-sizing: border-box;
+    flex: 1 0 200px;
+    max-height: 250px;
+    overflow: hidden;
+}
+
+.Image {
+    vertical-align: top;
+    max-width: 100%;
+    min-width: 100%;
+    width: 100%;
+}
+
+.RemoveItem {
+    position: absolute;
+    bottom: 25px;
+    right: 25px;
+}
+
+.ActionsContainer {
+    display: flex;
+}

goTorrentWebUI/node_modules/material-ui-upload/UploadPreview/index.js

@@ -0,0 +1,196 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Card = require('material-ui/Card');
+
+var _FloatingActionButton = require('material-ui/FloatingActionButton');
+
+var _FloatingActionButton2 = _interopRequireDefault(_FloatingActionButton);
+
+var _remove = require('material-ui/svg-icons/content/remove');
+
+var _remove2 = _interopRequireDefault(_remove);
+
+var _FlatButton = require('material-ui/FlatButton');
+
+var _FlatButton2 = _interopRequireDefault(_FlatButton);
+
+var _jshashes = require('jshashes');
+
+var _Upload = require('material-ui-upload/Upload');
+
+var _Upload2 = _interopRequireDefault(_Upload);
+
+var _index = require('./index.css');
+
+var _index2 = _interopRequireDefault(_index);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // *-* mode: rjsx -*-
+
+
+var UploadPreview = function (_Component) {
+    _inherits(UploadPreview, _Component);
+
+    function UploadPreview(props) {
+        _classCallCheck(this, UploadPreview);
+
+        var _this = _possibleConstructorReturn(this, (UploadPreview.__proto__ || Object.getPrototypeOf(UploadPreview)).call(this));
+
+        _this.exclusiveProps = ['title', 'children', 'onFileLoad', 'initialItems'];
+
+        _this.onFileLoad = function (e, file) {
+            var hash = new _jshashes.SHA1().hex(e.target.result);
+            var items = _extends({}, _this.state.items);
+            items[hash] = e.target.result;
+            _this.setState({ items: items });
+
+            _this.props.onFileLoad(e, file);
+            _this.props.onChange(items);
+        };
+
+        _this.onRemoveAllClick = function (e) {
+            var items = {};
+            _this.setState({ items: items });
+            _this.props.onChange(items);
+        };
+
+        _this.onRemoveClick = function (key) {
+            return function (e) {
+                var items = _extends({}, _this.state.items);
+                delete items[key];
+                _this.setState({ items: items });
+                _this.props.onChange(items);
+            };
+        };
+
+        _this.renderPreview = function (key) {
+            return _react2.default.createElement(
+                'div',
+                { key: key, className: _index2.default.PreviewContainer },
+                _react2.default.createElement('img', { src: _this.state.items[key], className: _index2.default.Image }),
+                _react2.default.createElement(
+                    _FloatingActionButton2.default,
+                    {
+                        className: _index2.default.RemoveItem,
+                        mini: true,
+                        onClick: _this.onRemoveClick(key)
+                    },
+                    _react2.default.createElement(_remove2.default, null)
+                )
+            );
+        };
+
+        _this.renderPreviews = function () {
+            return _react2.default.createElement(
+                'div',
+                { className: _index2.default.PreviewsContainer },
+                Object.keys(_this.state.items).map(_this.renderPreview)
+            );
+        };
+
+        _this.renderAddButton = function () {
+            return _react2.default.createElement(_Upload2.default, _extends({
+                onFileLoad: _this.onFileLoad,
+                // XXX: Force re-render on items change
+                // see: https://github.com/corpix/material-ui-upload/issues/8
+                key: Object.keys(_this.state.items).length
+            }, _this.getUploadProps()));
+        };
+
+        _this.renderRemoveButton = function () {
+            return _react2.default.createElement(_FlatButton2.default, {
+                label: 'Remove all',
+                style: {
+                    visibility: Object.keys(_this.state.items).length ? 'visible' : 'hidden'
+                },
+                onClick: _this.onRemoveAllClick
+            });
+        };
+
+        _this.state = { items: props.initialItems };
+        return _this;
+    }
+
+    _createClass(UploadPreview, [{
+        key: 'getUploadProps',
+        value: function getUploadProps() {
+            var _this2 = this;
+
+            return Object.keys(this.props).filter(function (name) {
+                return _this2.exclusiveProps.indexOf(name) === -1;
+            }).reduce(function (acc, name) {
+                acc[name] = _this2.props[name];
+                return acc;
+            }, { onFileLoad: this.onFileLoad });
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            return _react2.default.createElement(
+                _Card.Card,
+                null,
+                _react2.default.createElement(_Card.CardHeader, { title: this.props.title }),
+                _react2.default.createElement(
+                    _Card.CardMedia,
+                    null,
+                    this.renderPreviews()
+                ),
+                _react2.default.createElement(
+                    _Card.CardActions,
+                    null,
+                    _react2.default.createElement(
+                        'div',
+                        { className: _index2.default.ActionsContainer },
+                        this.renderAddButton(),
+                        this.renderRemoveButton()
+                    )
+                )
+            );
+        }
+    }]);
+
+    return UploadPreview;
+}(_react.Component);
+
+UploadPreview.defaultProps = {
+    title: '',
+    label: 'Upload',
+    fileTypeRegex: /^image.*$/,
+    onFileLoad: function onFileLoad(e, file) {
+        return undefined;
+    },
+    onChange: function onChange(items) {
+        return undefined;
+    },
+    initialItems: {}
+};
+UploadPreview.propTypes = {
+    title: _propTypes2.default.string,
+    label: _propTypes2.default.string,
+    fileTypeRegex: _propTypes2.default.object,
+    onFileLoad: _propTypes2.default.func,
+    onChange: _propTypes2.default.func,
+    initialItems: _propTypes2.default.object
+};
+exports.default = UploadPreview;