Upload d’une photo avec Django Rest Framewok

Extrait de mon livre : Développer un back-end pour app mobile avec Django

En tant que développeur iOS, il m’est souvent fréquent de vouloir envoyer une photo de mon application mobile vers mon back-end, pour cela, il est possible d’utiliser Django Rest Framework, contrairement à ce que l’on peut souvent lire. Pour ce faire, rien de plus simple. Il vous suffit de définir dans votre sérialiseur, le champ de votre modèle qui contient la photo.

Par exemple:

 class AppUserSerializer(serializers.ModelSerializer):
    picture = serializers.ImageField(max_length=None, use_url=True)
    class Meta:
       model = AppUser
       fields = '__all__'

De plus, DRF (Django Rest Framework) vérifiera que le paramètre picture envoyé est bien une image, sinon il vous retournera une erreur.

Depuis votre application mobile, il suffit de poster un formulaire multi-part classique. Par exemple, en Swift voici comment faire:

 func sendPhoto() {
        let monImage = UIImage(named: "logo")!
        let imageData : Data = UIImagePNGRepresentation(monImage)! as Data!
        let headers = [
            "Authorization": "oAuth: 8rPwO5833I74M9u6TuI8KNYKfkIqlB",
            "Content-Type":"application/json"
        ]
        let parameters = [
            "email": "christophesurbier@idevotion.fr",
            "password": "80b1509ea37643250da601f2d24fe9b236b76fd3a3d7d18498d760cdd38813b2",
            "pseudo": "csurbier2",
            "firstName" : "christophe",
            "lastName":"Surbier",
            "street":"10 boulevard de magenta",
            "city":"Paris",
            "country":"France",
            "location":"{\"type\": \"Point\", \"coordinates\": [2.1711730954009556,41.384021579093975]}",
            "valide":"1"
        ]
        Alamofire.upload(
            multipartFormData: { multipartFormData in
                for (key, value) in parameters {
                    multipartFormData.append(value.data(using: String.Encoding.utf8)!, withName: key)
                }
                // Image
                multipartFormData.append(imageData, withName: "picture", fileName: "photo.png", mimeType: "image/png")
        },
            to: "http://votrenomdedomaine/api/appuser/",
            method:.post,
            headers:headers,
            encodingCompletion: { encodingResult in
                switch encodingResult {
                case .success(let upload, _, _):
                    upload.responseJSON { response in
                        debugPrint(response)
                    }
                case .failure(let encodingError):
                    print(encodingError)
                }
        }
        )
    }

Christophe Surbier, Freelance iOS