title: Unable to upload files from disk to server using FileReader
body: <p>I am working on a form for uploading files from a local disk within the react component. After uploading the file, it should be sent to the server using the POST request, where it is processed using <strong>express-fileupload</strong> to upload to the server. The server responds that the request is too large:</p>
  
  <blockquote>
    <p>PayloadTooLargeError: request entity too large</p>
  </blockquote>
  
  <p>Here is the component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  
  
  class FileUpload extends Component {
    constructor(props) {
      super(props);
      this.state = {
        sendImage: null
      };
      this.openFile = this.openFile.bind(this);
      this.sendFile = this.sendFile.bind(this);
    }
    onChange = (e) =&gt; {
      var file = e.target.files[0];
      var reader = new FileReader();
      reader.onloadend = () =&gt; {
        this.setState({ sendImage: reader.result })
      }
      reader.readAsDataURL(file);
    }
    openFile(e) {
      this.refs.fileUploader.click();
    }
    sendFile = () =&gt; {
      axios.post(this.props.API_URL + "upload/news", { data: this.state.sendImage })
        .then(res =&gt; {
        })
    }  
    render() {
      return (
        &lt;&gt;
          &lt;button className="xbutton" onClick={this.sendFile} &gt;Upload&lt;/button&gt;
          &lt;button className="xbutton" onClick={this.openFile} &gt;Open&lt;/button&gt;
          &lt;
            input
            type="file"
            name="sampleFile"
            ref="fileUploader"
            defaultValue=""
            onChange={e =&gt; this.onChange(e)}
          /&gt;
        &lt;/&gt;
      );
    }
  }
  
  export default FileUpload;
  </code></pre>
  
  <p>Please tell me what the error is, and is it possible to upload files using these tools?
  Thanks!</p>