total is undefined in onLoadProgress

[Hellstellar]

Before you start - checklist

• [x] I followed instructions in documentation written for my React-PDF version
• [x] I have checked if this bug is not already reported
• [x] I have checked if an issue is not listed in Known issues

Description

First of all in your npm docs the onLoadProgress method is given in page props but it should be present in Document props. When the onLoadProgress is called, loaded is defined and I get values for that but total is logged as undefined.

Steps to reproduce

import React, { Component } from 'react';
import { Document, Page } from 'react-pdf/dist/entry.webpack';
import { Button, Container, Dimmer, Loader, Header, Divider } from 'semantic-ui-react'
import { Element, scroller } from 'react-scroll'
import './pdfViewer.css';
import axios from 'axios'

class PdfViewer extends Component {
  state = {
    numPages: null,
    fullScreen: false,
    pageHeight: '0px',
    url: '',
    material: {},
    pageArray: [],
    currentPage: 1
  }

  componentDidMount() {
    const { subject, material, id } = this.props.params;
    axios.get(`http://localhost:9000/${subject}/${material}/${id}`)
      .then(res => {
        this.setState({ material: res.data.material, url: res.data.url })
      })
  }

  handleDelete = () => {
    const { subject, material, id } = this.props.params;
    axios.delete(`http://localhost:9000/${subject}/${material}/${id}`, {
      data: { key: this.state.material.objectKey }
    })
    .then(res => {
      console.log(res)
    })
  }

  handlePrevious = () => {
    if (this.state.currentPage > 1) {
      const prevPage = this.state.currentPage - 1;
      this.setState({ currentPage: prevPage })
      scroller.scrollTo(`${prevPage}`, {
        duration: 800,
        delay: 0,
        smooth: 'easeInOutQuart',
        containerId: 'scroll-container'
      });
    }
  }

  handleNext = () => {
    if (this.state.currentPage < this.state.numPages) {
      const nextPage = this.state.currentPage + 1;
      this.setState({ currentPage: nextPage })
      scroller.scrollTo(`${nextPage}`, {
        duration: 800,
        delay: 0,
        smooth: 'easeInOutQuart',
        containerId: 'scroll-container'
      });
    }

  }

  onDocumentLoad = ({ numPages }) => {
    const pageArray = [];
    for (let i = 1; i <= numPages; i++) {
      pageArray.push(i)
    }
    this.setState({ pageArray })
    this.setState({ numPages });
  }

  onPageRender = () => {
    const height = document.querySelector('div.react-pdf__Page__svg').clientHeight;
    console.log(height)
    this.setState({ pageHeight: height })
  }

  setFullScreen = () => {
    this.setState({ fullScreen: true })
  }

  onScrollHandle = () => {
    const scrollContainer = document.querySelector('#scroll-container')
    this.setState({ currentPage: Math.floor(scrollContainer.scrollTop/this.state.pageHeight) + 1})
  }

  onLoadProgress = ({loaded, total}) => {
    console.log(loaded)
    console.log(total)
    console.log('Loading a document: ' + (loaded / total) * 100 + '%');
  }

  renderLoader = () => (
    <Dimmer active>
      <Loader size='massive'>Loading</Loader>
    </Dimmer>
  )

  render() {

    const { currentPage, numPages } = this.state;
    return (
      <Container style={{ margin: '0 auto', width: '50em' }}>
        <Button.Group size="tiny" >
          <Button icon='left chevron' content='Previous' onClick={this.handlePrevious} />
          <Button icon='right chevron' content='Next' onClick={this.handleNext} />
          <Button content='remove' onClick={this.handleDelete}/>
        </Button.Group>
        <Element id="scroll-container" onScroll={this.onScrollHandle} style={{
          margin: '20px auto',
          width: '40em',
          height: '700px',
          overflow: 'scroll'
        }}>

          <Document
            file={this.state.url}
            loading={this.renderLoader()}
            onLoadSuccess={this.onDocumentLoad}
            className={this.state.fullScreen ? 'fullscreen' : ''}
            onLoadProgress={this.onLoadProgress}
          >
            {this.state.pageArray.map(page => (
              <Element key={page} name={String(page)}>
                <Page scale={0.3} onLoadProgress={this.onLoadProgress} onRenderSuccess={this.onPageRender} renderMode="svg" pageNumber={page} width={1800} />
                <Divider />
              </Element>
            ))}

          </Document>
        </Element>
        <Header inverted>Page {currentPage} of {numPages}</Header>

      </Container>
    );
  }
}

export default PdfViewer;`

Expected behavior

I expect to get a total value

Environment

• Browser Chrome
• React-PDF version 4.0.5
• React version 16.3.0

[wojtekmaj]

total is undefined when server does not return Content-Length. If that's not the case (which is unlikely) you should let Mozilla know!