title: Django REST Framework upload image: "The submitted data was not a file"
body: <p>I am leaning how to upload file in Django, and here I encounter a should-be-trivial problem, with the error:</p>
  
  <blockquote>
    <p>The submitted data was not a file. Check the encoding type on the form.</p>
  </blockquote>
  
  <p>Below is the detail.</p>
  
  <hr>
  
  <p><strong>Note:</strong> I also looked at <a href="https://stackoverflow.com/questions/20303252/django-rest-framework-imagefield">Django Rest Framework ImageField</a>, and I tried</p>
  
  <pre><code>serializer = ImageSerializer(data=request.data, files=request.FILES)
  </code></pre>
  
  <p>but I get</p>
  
  <blockquote>
    <p>TypeError: <code>__init__()</code> got an unexpected keyword argument 'files'</p>
  </blockquote>
  
  <hr>
  
  <p>I have a <code>Image</code> model which I would like to interact with via Django REST framework:</p>
  
  <h1>models.py</h1>
  
  <pre><code>class Image(models.Model):
      image = models.ImageField(upload_to='item_images')
      owner = models.ForeignKey(
          User, related_name='uploaded_item_images',
          blank=False,
      )
      time_created = models.DateTimeField(auto_now_add=True)
  </code></pre>
  
  <h1>serializers.py</h1>
  
  <pre><code>class ImageSerializer(serializers.ModelSerializer):
      image = serializers.ImageField(
          max_length=None, use_url=True,
      )
  
      class Meta:
          model = Image
          fields = ("id", 'image', 'owner', 'time_created', )
  </code></pre>
  
  <h1>settings.py</h1>
  
  <pre><code>'DEFAULT_PARSER_CLASSES': (
      'rest_framework.parsers.JSONParser',
      'rest_framework.parsers.FormParser',
      'rest_framework.parsers.MultiPartParser',
  ),
  </code></pre>
  
  <p>The front end (using AngularJS and <code>angular-restmod</code> or <code>$resource</code>) send <code>JSON</code> data with <code>owner</code> and <code>image</code> of the form:</p>
  
  <h1>Input:</h1>
  
  <pre><code>{"owner": 5, "image": "data:image/jpeg;base64,/9j/4QqdRXhpZgAATU0A..."}
  </code></pre>
  
  <p>In the backend, <code>request.data</code> shows</p>
  
  <pre><code>{u'owner': 5, u'image': u'data:image/jpeg;base64,/9j/4QqdRXhpZgAATU0AKgAAA..."}
  </code></pre>
  
  <p>But then <code>ImageSerializer(data=request.data).errors</code> shows the error</p>
  
  <pre><code>ReturnDict([('image', [u'The submitted data was not a file. Check the encoding type on the form.'])])
  </code></pre>
  
  <p>I wonder what I should do to fix the error?</p>
  
  <hr>
  
  <p><strong>EDIT: JS part</strong></p>
  
  <p>The related <strong>front end</strong> codes consists of two parts: a <code>angular-file-dnd</code> <code>directive</code> (available <a href="https://github.com/onemightyroar/angular-file-dnd" rel="noreferrer">here</a>) to drop the file onto the page and <code>angular-restmod</code>, which provides CRUD operations:</p>
  
  <pre><code>&lt;!-- The template: according to angular-file-dnd, --&gt;
  &lt;!-- it will store the dropped image into variable $scope.image --&gt;
  &lt;div file-dropzone="[image/png, image/jpeg, image/gif]" file="image" class='method' data-max-file-size="3" file-name="imageFileName"&gt;
    &lt;div layout='row' layout-align='center'&gt;
      &lt;i class="fa fa-upload" style='font-size:50px;'&gt;&lt;/i&gt;
    &lt;/div&gt;
    &lt;div class='text-large'&gt;Drap &amp; drop your photo here&lt;/div&gt;
  &lt;/div&gt;
  
  
  
  # A simple `Image` `model` to perform `POST`
  $scope.image_resource = Image.$build();
  
  $scope.upload = function() {
    console.log("uploading");
    $scope.image_resource.image = $scope.image;
    $scope.image_resource.owner = Auth.get_profile().user_id;
    return $scope.image_resource.$save();
  };
  </code></pre>
  
  <hr>
  
  <hr>
  
  <p>An update concerning the problem: right now I switched to using <code>ng-file-upload</code>, which sends image data in proper format.</p>