title: Submitting document to server and the formData seems to be blank
body: <p>Been struggling with this issue for a while now and really need to get it resolved.</p>
  
  <p>I'm using <code>react-dropzone</code> to setup file upload in a React-Redux application. It seems to be working, as it says it has successfully sent to the server, but what is received by the server (<code>Django REST Framework</code>) appears to be an empty <code>MultiValueDict</code>. However, the request payload has the following:</p>
  
  <pre><code>------WebKitFormBoundaryWiq9rPvu5bpEoR4X
  Content-Disposition: form-data; name="file"
  
  [object File]
  ------WebKitFormBoundaryWiq9rPvu5bpEoR4X--
  </code></pre>
  
  <p>So maybe the front-end is fine, but something is going on server-side. Trying to isolate where exactly the problem is occurring. I just know the <code>console.log(formData)</code> doesn't seem to indicate a file is appended there.</p>
  
  <p>Anyway, here is my code:</p>
  
  <pre><code>// ./containers/documents/submit_documents.js
  import _ from 'lodash';
  import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { submitDocument } from '../../actions/documents';
  import Dropzone from 'react-dropzone';
  
  class SubmitDocuments extends Component {
  
      constructor() {
          super();
          this.state = {
              files: []
          }
  
          this.handleClick = this.handleClick.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
          this.onDrop = this.onDrop.bind(this);
      }
  
      handleClick(event) {
          this.setState({
              files: []
          });
  
      }
  
      handleSubmit(event) {
          event.preventDefault();
          this.props.submitDocument(this.state.files);
      }
  
      onDrop(files) {
          // console.log(files);
          // files.push(this.state.files);
          this.setState({
              files
          });
      }
  
      render() {
  
          return (
              &lt;form onSubmit={this.handleSubmit}&gt;
                  &lt;div className='panel panel-default'&gt;
                      &lt;div className='panel-heading'&gt;
                          &lt;h4&gt;&lt;strong&gt;Submit Documents&lt;/strong&gt;&lt;/h4&gt;
                      &lt;/div&gt;
  
                      &lt;div className='panel-body'&gt;
                          &lt;Dropzone className='dropzone' onDrop={this.onDrop}&gt; 
                              &lt;h3&gt;Click to add files or drag files here to upload&lt;/h3&gt;
                          &lt;/Dropzone&gt;
                          &lt;div&gt;
                              {_.map(this.state.files, f =&gt;
                                  &lt;h5 key={f.name}&gt;{f.name} - {f.size} bytes&lt;/h5&gt;
                              )}
                          &lt;/div&gt;
                          &lt;button type='submit' className='btn btn-primary'&gt;Submit&lt;/button&gt;
                          &lt;button type='button' className='btn btn-danger' onClick={this.handleClick}&gt;Cancel&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          ); 
      }
  }
  
  function mapStateToProps(state) {
      return {
          documents: state.home.documents
      }
  }
  
  export default connect(mapStateToProps, { submitDocument })(SubmitDocuments);
  </code></pre>
  
  <p>And the associated action file:</p>
  
  <pre><code>// ../actions/documents.js
  import axios from 'axios';
  import { push } from 'react-router-redux';
  import { ROOT_URL } from '../../config/config.json';
  
  // Establish the different types
  export const DOCUMENTS = 'documents';
  
  // Creates the error state to be used in components
  export function submitDocument(files) {
      const formData = new FormData();
      formData.append('file', files);
      console.log(formData);
      return function(dispatch) {
          axios
              .post(
                  `${ROOT_URL}/api/documents/fileupload`,
                  formData,
                  { headers: 
                      { 
                          'content-type': 'multipart/form-data',
                          'Authorization': 'JWT ' +  sessionStorage.getItem('token')
                      }
                  }
              )
              .then(response =&gt; {
                  console.log('Success')
              })
              .catch(error =&gt; {
                  console.log('Failed');
              });
      }
  }
  </code></pre>
  
  <p>It seems like the server is expecting a key value pair with <code>file</code>, which seems like it should be getting created with the <code>formData.append('file', files);</code> but not seeing anything like that in there.</p>
  
  <p>Thanks for the help!</p>