title: How to post image with fetch?
body: <p>I just learning react and I create an gallery App, but I have problem with posting picture to API. The problem is that when I click on button <code>ADD</code> there's nothing happend just in console.log I get an <code>error 500</code>.</p>
  
  <p><strong>Here is my component with post request:</strong></p>
  
  <pre><code>class AddPhoto extends Component {
  constructor(props) {
      super(props);
      this.state = {
          modal: false,
          images: [],
          isLoading: false,
          error: null,
      };
  
      this.toggle = this.toggle.bind(this);
      this.handleClick = this.handleClick.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  toggle() {
      this.setState({
          modal: !this.state.modal
      });
  }
  
  handleClick(event) {
      event.preventDefault();
      this.setState({
          modal: !this.state.modal
      });
  }
  
  handleSubmit(event){
      event.preventDefault();
  
      this.setState({ isLoading: true });
      let path = this.props.path;
  
      fetch(`http://.../gallery/${path}`, {
          method: 'POST',
          headers: {'Content-Type':'multipart/form-data'},
          body: new FormData(document.getElementById('addPhoto'))
      })
          .then((response) =&gt; response.json())
          .then((data)=&gt;{
              this.setState({images: data.images, isLoading: false});
              this.props.updateImages(data.images);
          })
          .catch(error =&gt; this.setState({ error, isLoading: false}));
  }
  
  render() {
      return (
          &lt;Card className="add"&gt;
              &lt;div className="link" onClick={this.toggle}&gt;
                  &lt;CardBody&gt;
                      &lt;CardTitle&gt;Add picture&lt;/CardTitle&gt;
                  &lt;/CardBody&gt;
              &lt;/div&gt;
              &lt;Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}&gt;
                  &lt;div className="modal-header"&gt;
                      ...
                  &lt;/div&gt;
                  &lt;ModalBody&gt;
                      &lt;form className="addPhotoForm" id="addPhoto" onSubmit={this.handleSubmit}&gt;
                          &lt;input type="file" required /&gt;
                          &lt;Button color="success" type="Submit"&gt;Add&lt;/Button&gt;
                      &lt;/form&gt;
                  &lt;/ModalBody&gt;
              &lt;/Modal&gt;
          &lt;/Card&gt;
      );
  }
  }
  </code></pre>
  
  <p><em>Do you have any idea what am I doing wrong, why is not working, why I get error 500?</em></p>
  
  <p>Thanks for helping me.</p>