title: django rest framework 3 ImageField send ajax result “No file was submitted.”
body: <p>I have an API endpoint with Django Rest Framework to upload an image.
  Can you spot what I'm doing incorrectly?</p>
  
  <p><strong>#models.py</strong></p>
  
  <pre><code>class test(models.Model):
      ...
      upload_path = 'upload/'
      image = models.ImageField(upload_to=upload_path, null=True, blank=True)
      ...
  </code></pre>
  
  <p><strong>#serializers.py</strong></p>
  
  <pre><code>class TestSerializer(serializers.ModelSerializer):
      image = serializers.ImageField(
          max_length=None, use_url=True,
      )
      class Meta:
          model = test
          fields = ('id','name','image',...)
  </code></pre>
  
  <p><strong>#views.py</strong></p>
  
  <pre><code>@api_view(['GET', 'POST'])
  def test_list(request, site_id, block_id):
  
              ....
  
          if request.method == 'POST':
              serializer = TestSerializer(data=request.DATA)
              if serializer.is_valid():
                  serializer.save()
                  return Response(serializer.data, status=status.HTTP_201_CREATED)
              else:
                  return Response(
                      serializer.errors, status=status.HTTP_400_BAD_REQUEST)
      else :
          return Response(status=status.HTTP_403_FORBIDDEN)
  </code></pre>
  
  <p><strong>#js</strong></p>
  
  <pre><code>function setimage() {
      var $input = $("#js_teaser_img");
      var fd = new FormData;
  
      fd.append('image', $input.prop('files')[0]);
  
      $.ajax({
          url: '/api/....',
          data: fd,
          processData: false,
          contentType: false,
          type: 'POST',
          success: function (data) {
              alert(data);
          }
      });
  }
  </code></pre>
  
  <p>result image: ["No file was submitted."] 0: "No file was submitted."</p>
  
  <p>result</p>
  
  <p><a href="https://stackoverflow.com/questions/28036404/django-rest-framework-upload-image-the-submitted-data-was-not-a-file/28036805#28036805">Django REST Framework upload image: &quot;The submitted data was not a file&quot;</a></p>
  
  <p>+</p>
  
  <pre><code>var reader = new FileReader();  
          reader.onload = function(e) {
              var img_local = e.target.result;
              $('.js_img_src').attr('src', img_local);
              $.post('/api/..../7/', {'image':img_local} , function( data ) {
                  console.log(data);
              });
          }
          reader.readAsDataURL(file);
  </code></pre>