componentDidMount() {
    document.title = `${this.client.room} room | Blaze`;

    this.visualizer = new Visualizer(this.canvas.current);
    this.fileShare = socketConnect(this.client.isLocal ? '' : this.client.room, this.client.name);
    const { socket } = this.fileShare;

    this.visualizer.addNode({
      name: this.client.name,
      isClient: true,
    });

    socket.listen(constants.USER_JOIN, this.onUserJoin.bind(this));
    socket.listen(constants.USER_LEAVE, this.onUserLeave.bind(this));
    socket.on('close', data => {
      this.setState({
        errorModal: {
          isOpen: true,
          type: data.reason || constants.ERR_CONN_CLOSED,
        },
      });
    });


    this.clearReceiver = this.fileShare.receiveFiles({
      onMeta: (data) => {
        this.sender = data.sender;
        data.meta.forEach(file => {
          file.sentBy = data.sender;
        });

        this.setState({
          files: [...data.meta, ...this.state.files],
          isSelectorEnabled: false,
        });
      },
      onProgress: ({ progress, wires }) => {
        const receivedBy = [];
        const sentTo = [];

        if (wires !== undefined) {
          wires.forEach(wire => {
            if (wire.uploadSpeed()) {
              sentTo.push(wire.peerId);
            } else if (wire.downloadSpeed()) {
              receivedBy.push(wire.peerId);
            }
          });
        }
        else {
          receivedBy.push(this.sender);
        }

        this.visualizer.startSharing(sentTo, receivedBy);
        this.setState({
          percentage: progress * 100,
          isSelectorEnabled: false,
        });
      },
      onDone: (file, meta) => {
        if (file !== undefined) {
          if (Array.isArray(file)) {
            file.forEach(file => {
              file.getBlob((err, blob) => download(blob, file.name));
            });
          }
          else {
            download(file, meta.name, meta.type);
          }
        }
        this.resetState();
      },
    });

    window.addEventListener('paste', this.handleWindowPasteEvent);
  }
Calculates upload progress,
Upload progress is calculated based on amount of data sent to each of the receiving peer.
Hence it's not the overall measure of file sent, as the receiving peers may change during the transfer process
which would affect the upload progress shown