Image upload error 'Check the encoding type on the form.'

Question

In my project, i need to upload an image as an avatar for my players as shown in my models.py :

class Player(models.Model):
    number = models.IntegerField()
    photo = models.ImageField(upload_to=upload_path, null=True, blank=True)
    firstname = models.CharField(max_length=24)
    lastname = models.CharField(max_length=24)
    tag = models.CharField(max_length=8, blank=True)
    color = models.CharField(max_length=10, null=True, blank=True)
    selected = models.BooleanField(null = False, blank=True)
    post = models.ForeignKey(Post, on_delete=models.SET_NULL, null=True)

    def __str__(self):
        return "#{}".format(
            self.number,
        )

I'm using angular to send my image using :

& in my typescript

  onNewPlayerPhotoChanged(event) {
    this.newPlayerPhoto = event.target.files[0];
  }

then on my submit button i got

  createPlayer() {
    this.newPlayer.selected = false;
    this.newPlayer.photo = this.newPlayerPhoto;
    this.newPlayer.post_id = parseInt(this.newPlayerPost, 10);
    this.playerService.create(this.newPlayer).subscribe(
      res => {
        this.getPlayerList();
        this.openNewModal = false;
        this.alertService.success('Joueur créé avec succès !');
        setTimeout(() => this.alertService.clear(), 2000);
      },
      error => {
        this.alertService.error(error);
        setTimeout(() => this.alertService.clear(), 2000);
      }
    );
  }

But i got the error : photo: ["The submitted data was not a file. Check the encoding type on the form."]

Here is my **views.py : **


class PlayerViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows Player to be viewed or edited.
    """

    parser_classes = [JSONParser]

    queryset = Player.objects.all()
    serializer_class = PlayerSerializer
    permission_classes = [IsAuthenticated, HasPermission, ]

    def post(self, request, *args, **kwargs):
        return HttpResponse({"message":request.FILES}, status=200)
        print(request.FILES)
        print(request.data)
        photo = request.FILES['photo']
        firstname = request.data['firstname']
        lastname = request.data['lastname']
        number = request.data['number']
        tag = request.data['tag']
        color = request.data['color']
        selected = request.data['selected']
        post = request.data['post']
        Player.objects.create(photo=photo, firstname=firstname, lastname=lastname, number=number, tag=tag, color=color,
                              selected=selected, post=post)
        return HttpResponse({'message':"Player created"}, status=200)

& my serializers.py :

class PlayerSerializer(serializers.ModelSerializer):
    post = PostSerializer(many=False, read_only=True)
    post_id = serializers.PrimaryKeyRelatedField(source='post', write_only=True, queryset=Post.objects.all(),)

    class Meta:
        model = Player
        fields = '__all__'

I followed that tutorial https://www.youtube.com/watch?v=-36YauTh4Ts but he doesn't encouter that error,

if anyone could help, it would be much appreciated. Thank you !

EDIT : I tried to use FileUploadParser & MultiPartParser as parser in my views but none of them would work either, FileUploadParser would return me an error saying the filename was needed and the MultiPartParser would return me an error syaing that he was receiving JSON.

Image upload error 'Check the encoding type on the form.'

0 Answers