title: Upload model ImageField with DjangoREST + Angular
body: <p>I new in REST and trying to create simple app, with one model and two fields <code>CharField</code>, <code>ImageField</code>.
  model:  </p>
  
  <pre><code>class Photo(models.Model):
  
      img = models.ImageField(upload_to='photos/', max_length=254)
      text = models.CharField(max_length=254, blank=True)
  </code></pre>
  
  <p>serializers:  </p>
  
  <pre><code>class PhotoSerializer(serializers.ModelSerializer):
  
      class Meta:
          model = Photo
          fields = ('img','text')
  </code></pre>
  
  <p>views:  </p>
  
  <pre><code>class PhotoViewSet(viewsets.ModelViewSet):
  
      queryset = Photo.objects.all()
      serializer_class = PhotoSerializer
  
  photo_router = DefaultRouter()
  photo_router.register(r'photo', PhotoViewSet)
  </code></pre>
  
  <p>urls:  </p>
  
  <pre><code>urlpatterns = [
      url(r'^admin/', admin.site.urls),
      url(r'^api/', include(photo_router.urls)),]
  </code></pre>
  
  <p>POST and GET works well in <code>/api/photo/</code><br>
  I ask similar question before and I was definitely sure, problem was in frontend, with AngularJS, I using AngularJS first time too. But I think now, maybe problem with my server app.<br>
  angular code:  </p>
  
  <pre><code>var app = angular.module('myApp', ['ngRoute', 'angularFileUpload']);
  
  app.config(function ($routeProvider) {
  
      $routeProvider
          .when('/', {
              templateUrl: 'http://127.0.0.1:8000/static/js/angular/templates/home.html'
      })
  });
  app.config(['$httpProvider', function($httpProvider) {
      $httpProvider.defaults.xsrfCookieName = 'csrftoken';
      $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
  }]);
  </code></pre>
  
  <p>GET controller works well, I recieve all my images:  </p>
  
  <pre><code>app.controller('getController', ['$scope', '$http', function($scope, $http){
      $http.get('/api/photo/').success(function(data){
          $scope.photos = data;
      }).error(function(data) {
          $scope.photos = data;
      });
  }]);
  </code></pre>
  
  <p>For file uploading I used <a href="https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs" rel="nofollow">this guide</a><br>
  Here is code from guide:  </p>
  
  <pre><code>app.directive('fileModel', ['$parse', function ($parse) {
  return {
      restrict: 'A',
      link: function(scope, element, attrs) {
          var model = $parse(attrs.fileModel);
          var modelSetter = model.assign;
  
          element.bind('change', function(){
              scope.$apply(function(){
                  modelSetter(scope, element[0].files[0]);
              });
          });
      }
  };
  }]);
  app.service('fileUpload', ['$http', function ($http) {
      this.uploadFileToUrl = function(file, uploadUrl){
          var fd = new FormData();
          fd.append('file', file);
          $http.post(uploadUrl, fd, {
              transformRequest: angular.identity,
              headers: {'Content-Type': undefined}
          })
          .success(function(){
          })
          .error(function(){
          });
      }
  }]);
  app.controller('myCtrl', ['$scope', 'fileUpload', function($scope,     fileUpload){
  
      $scope.uploadFile = function(){
          var file = $scope.myFile;
          console.log('file is ' );
          console.dir(file);
          var uploadUrl = "/api/photo/";
          fileUpload.uploadFileToUrl(file, uploadUrl);
      };
  
  }]);
  </code></pre>
  
  <p>html code:  </p>
  
  <pre><code>&lt;div ng-controller = "myCtrl"&gt;
      &lt;input type="file" file-model="myFile"/&gt;
      &lt;button ng-click="uploadFile()"&gt;upload me&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I upload files by this form I have:  </p>
  
  <blockquote>
    <p>POST <a href="http://127.0.0.1:8000/api/photo/" rel="nofollow">http://127.0.0.1:8000/api/photo/</a> 400 (Bad Request)<br>
    in responce:<br>
    img: ["No file was submitted."]</p>
  </blockquote>
  
  <p>Please help at least to understand, where my problem is, on my REST or in Angular. And how I can debug this? I spend all day for trying find solution. I think I just clearly don't understand how REST api need to looks.<br>
  <strong>UPD</strong><br>
  I'm trying to use <a href="https://github.com/danialfarid/ng-file-upload#install" rel="nofollow">ng-file-upload</a> and still have 400 responce status.<br>
  I decide is problem with serializer, I overide POST method in view, but I think I did it wrong:  </p>
  
  <pre><code>class PhotoViewSet(viewsets.ModelViewSet):  
      queryset = Photo.objects.all()
      serializer_class = PhotoSerializer
  
      def post(self, request, format=None):
          serializer = PhotoSerializer(data=request.DATA)
          if serializer.is_valid():
              serializer.save()
              return Response(serializer.data,  status=status.HTTP_201_CREATED)
          return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
  </code></pre>
  
  <p>Here is full request data from web tool:  </p>
  
  <blockquote>
    <p><strong>General</strong><br>
            Request URL:<a href="http://127.0.0.1:8000/api/photo/" rel="nofollow">http://127.0.0.1:8000/api/photo/</a><br>
            Request Method:POST<br>
            Status Code:400 Bad Request<br>
            Remote Address:127.0.0.1:8000<br>
        <strong>Response Headers</strong><br>
            Allow:GET, POST, HEAD, OPTIONS<br>
            Content-Type:application/json<br>
            Date:Wed, 09 Mar 2016 14:46:44 GMT<br>
            Server:WSGIServer/0.2 CPython/3.4.3<br>
            Vary:Accept, Cookie<br>
            X-Frame-Options:SAMEORIGIN<br>
        <strong>Request Headers</strong><br>
            Accept:application/json, text/plain, <em>/</em><br>
            Accept-Encoding:gzip, deflate<br>
            Accept-Language:ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4<br>
            Connection:keep-alive<br>
            Content-Length:16635<br>
            Content-Type:multipart/form-data; boundary=----        WebKitFormBoundarytci4JfMISlMXwzFw<br>
            Cookie:sessionid=f5nyqdclupgi44zyqbmo3gkenum9k0cj;             csrftoken=E0DuVDs5KrV0rSMuD5wC86RPO0QP4AgT<br>
            Host:127.0.0.1:8000<br>
            Origin:<a href="http://127.0.0.1:8000" rel="nofollow">http://127.0.0.1:8000</a><br>
            Referer:<a href="http://127.0.0.1:8000/" rel="nofollow">http://127.0.0.1:8000/</a><br>
            User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36<br>
            X-CSRFToken:E0DuVDs5KrV0rSMuD5wC86RPO0QP4AgT<br>
        <strong>Request Payload</strong><br>
            ------WebKitFormBoundarytci4JfMISlMXwzFw<br>
            Content-Disposition: form-data; name="file"; filename="2.jpg"<br>
            Content-Type: image/jpeg<br>
            ------WebKitFormBoundarytci4JfMISlMXwzFw--</p>
  </blockquote>