Django-fr

sylflo

Membre

Inscription : 04-05-2015

Messages : 7

Django Rest Framework AngularJs Upload Image

Bonjour,

J'effectue une Api avec Django Rest Framework, j'utilise AngularJs pour le front et fait donc des requêtes get, post, etc à l'Api.

Ici je souhaite faire une requête post pour envoyer une image or je me retrouve avec l'erreur

image: ["The submitted data was not a file. Check the encoding type on the form."]

J'utilise ng-file-upload pour upload l'image.

Concernant mon code:

- Models.py

class Image(models.Model):
    image = models.ImageField(upload_to="articles")
    article = models.ForeignKey(Article)

- Serializers.py

class ImageSerializer(serializers.ModelSerializer):
    class Meta:
        #article = ArticleSerializer(read_only=True, required=False)
        image = serializers.ImageField(use_url=True, allow_empty_file=True)
        model = Image

        fields = ('id', 'image', 'article')
        read_only_fields = ('id', )

    #def get_validation_exclusions(self, *args, **kwargs):
    #    exclusions = super(ImageSerializer, self).get_validation_exclusion()

    #   return exclusions + ['article']

- Le controlleur

(function () {

    'use strict';

    angular
        .module(nameProject + '.article.post.controller')
        .controller('ArticlePostController', ArticlePostController);

    ArticlePostController.$inject = ["$scope", "Articles", "Upload", "$timeout"];

    function ArticlePostController($scope, Articles, Upload, $timeout) {
        var vm = this;
        vm.postArticle = postArticle;

        //Debut
        $scope.$watch('files', function () {

            $scope.upload($scope.files);
            console.debug("files = ", $scope.files);
            //console.debug("upload = ", $scope.upload);

        });

        $scope.upload = function (files) {
            if (files && files.length) {
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    console.debug("file = ", file, "type = ", file.type);

                    Upload.upload({
                        url: '/api/v1/images/',
                        fields: {
                            'idArticle': 1,
                            'article': 1,
                            'image': file
                        },
                        file: file,
                        image:file
                    }).progress(function (evt) {
                        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                        $scope.log = 'progress: ' + progressPercentage + '% ' +
                        evt.config.file.name + '\n' + $scope.log
                    }).success(function (data, status, headers, config) {
                        $timeout(function () {

                            console.log("data === ", data.result);

                            $scope.log = 'file: ' + config.file.name + ', Response: ' + JSON.stringify(data) + '\n' + $scope.log;
/*
                             Articles.postImage(JSON.stringify(data) , 1);
*/
                        });
                    });
                }
            }
        };

        //Fin

    }
})();

Ca fait un bon moment que je cherche mais je ne vois pas comment résoudre le problème

Xavier Ordoquy

Administrateur

Lieu : Puteaux, France

Inscription : 12-10-2011

Messages : 312

Site Web

Re : Django Rest Framework AngularJs Upload Image

Pour l'instant, il me semble que Django REST framework ne supporte que l'upload d'images via les formulaires web (multipart encoding).

sylflo

Membre

Inscription : 04-05-2015

Messages : 7

Re : Django Rest Framework AngularJs Upload Image

Il faut bien utiliser le multipart encoding.
Par contre les fichiers PDF, img, ect.... fonctionnent.

Je renvoie sur ce lien pour plus d'informations
http://stackoverflow.com/questions/3145 … serializer