title: Django Rest Framework - The submitted data was not a file. Check the encoding type on the form
body: <p>I had a React Axios post working with textfields, but now I'm trying to add an image field to my model.</p>
  
  <p>Here is my new model with the image field:</p>
  
  <pre><code>def get_image_path(instance, filename):
      return os.path.join('posts', str(instance.author), filename)
  
  
  class TripReport(models.Model):
      author = models.ForeignKey(User, on_delete=models.CASCADE)
      countries = models.ManyToManyField(Country, blank=False, related_name='trip_countries')
      title = models.CharField(max_length=100)
      content = models.TextField()
      image = models.ImageField(upload_to=get_image_path, null=True, blank=False)
      date_posted = models.DateTimeField(default=timezone.now)
      slug = models.SlugField(max_length=12, unique=True, blank=True)
      favoriters = models.ManyToManyField(User, related_name='favoriters')
  </code></pre>
  
  <p>I'm pulling the file off of my form with this: </p>
  
  <pre><code>e.target.image.files[0]
  </code></pre>
  
  <p>which logs a file object like this:</p>
  
  <pre><code>{ name: "DSCF6638.JPG", lastModified: 1340012616000, webkitRelativePath: "", size: 5395895, type: "image/jpeg" } 
  </code></pre>
  
  <p>when I console log it. </p>
  
  <p>I've added the image variable to my POST request in axios:</p>
  
  <pre><code>export const postTripReport = (author, title, content, countries, image) =&gt; {
    const token = localStorage.getItem('token');
    return dispatch =&gt; {
      dispatch(postTripReportsPending());
      axios.post(
        'http://localhost:8000/api/v1/reports/',
        {
          title: title,
          content: content,
          author: author,
          countries: countries,
          image: image
        },
        {headers: { 'Authorization': `Token ${token}`}}
      )
        .then(response =&gt; {
          dispatch(postTripReportsFulfilled(response.data));
        })
        .catch(err =&gt; {
          dispatch(postTripReportsRejected());
          dispatch({type: "ADD_ERROR", error: err});
        })
    }
  }
  </code></pre>
  
  <p>I'm new to this, so I'm not sure how the form is currently encoded. It's just a simple input:</p>
  
  <pre><code>   &lt;input
        name='image'
        accept="image/*"
        id="flat-button-file"
        multiple={false}
        type="file"
      /&gt;
  </code></pre>
  
  <p>I've tried adding the multipart/forms-data headers to the axios request, but then it said that no file was uploaded and that all of the other fields were blank. Thanks!</p>