docx-viewer.jsx

// Copyright (c) 2017 PlanGrid, Inc.

import React, { Component } from 'react';
import mammoth from 'mammoth';

import 'styles/docx.scss';
import Loading from '../loading';

export default class extends Component {
  divRef = React.createRef();
  componentDidMount() {
    const jsonFile = new XMLHttpRequest();
    jsonFile.open('GET', this.props.filePath, true);
    jsonFile.send();
    jsonFile.responseType = 'arraybuffer';
    jsonFile.onreadystatechange = () => {
      if (jsonFile.readyState === 4 && jsonFile.status === 200) {
        mammoth
          .convertToHtml(
            { arrayBuffer: jsonFile.response },
            { includeDefaultStyleMap: true },
          )
          .then(result => {
            const docEl = document.createElement('div');
            docEl.className = 'document-container';
            docEl.innerHTML = result.value;
            if (this.divRef.current)
              this.divRef.current.innerHTML = docEl.outerHTML;
          })
          .catch(a => {
            console.log('alexei: something went wrong', a);
          })
          .done();
      }
    };
  }

  render() {
    return (
      <div ref={this.divRef}>
        <Loading />
      </div>
    );
  }
}