Делаем Ajax форму загрузки картинок с angularJS и Django REST | Recipes

В этом небольшом материале я хотел бы рассказать как сделать Ajax форму добавления картинок с помощью angularJS и Django REST.

Начать мы можем с того, что создадим модель для хранения картинок и которая будет взаимодействовать с Django REST:

models.py

class Image(models.Model):
    image = models.ImageField(upload_to='item_images')
    time_created = models.DateTimeField(auto_now_add=True)

Сам serializers.py будет выглядеть так

class ImageSerializer(serializers.ModelSerializer):
    image = serializers.ImageField(max_length=None, use_url=True)

    class Meta:
        model = Image
        fields = ("id", 'image', 'time_created', )

Необходимо обязательно указать что атрибут image имеет serializers.ImageField свойство.

settings.py

'DEFAULT_PARSER_CLASSES': (
    'rest_framework.parsers.JSONParser',
    'rest_framework.parsers.FormParser',
    'rest_framework.parsers.MultiPartParser',
),

В DEFAULT_PARSER_CLASSES добавим rest_framework.parsers.MultiPartParser

Вторая часть - фронтенд. В этом материале подразумевается, что наш фронтенд использует AngularJS. Для json сообщений будем можно использовать angular-restmod или $resource.

Для отправки самих картинок воспользуемся ng-file-upload

Для этого нам нужно его установить

npm install ng-file-upload

Затем, подключим и добавим его в module

var app = angular.module('app', ['ngFileUpload']);

А теперь создадим контроллер для формы

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
    $scope.uploadFiles = function (files) {
        $scope.files = files;
        if (files && files.length) {
            Upload.upload({
                url: '/api/upload',
                data: {
                    image: files
                }
            }).then(function (response) {
                $timeout(function () {
                    $scope.result = response.data;
                });
            }, function (response) {
                if (response.status > 0) {
                    $scope.errorMsg = response.status + ': ' + response.data;
                }
            }, function (evt) {
                $scope.progress = 
                    Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
            });
        }
    };
}]);

И саму форму

<body ng-app="app" ng-controller="MyCtrl">
     <h4>Upload on file select</h4>

    <button ngf-select="uploadFiles($files)" multiple 
            accept="image/*">Select Files</button>
    <br>
    <br>Files:
    <ul>
        <li ng-repeat="f in files" style="font:smaller">
            {{f.name}}
        </li>
    </ul>
    <span class="progress" ng-show="progress >= 0">
        <div style="width:{{progress}}%" ng-bind="progress + '%'"></div>
    </span>
    {{errorMsg}}
</body>

Готово. Мы сделали Ajax форму, которая взаимодействует непосредственно с API.