Bonjour tout le monde,

J'ai vraiment besoin de votre aide.

J'essaie de mettre en place un formulaire d'inscription sur ReactJS ou les utilisateur pourrons choisir un image (avatar) et l'envoyer vers le backend qui est gérer par Django.

Pour effectuer cela, j'utilise l'outil Django-Rest-Framework qui nous permet d'envoyer des requete Rest vers le serveur.

L'envoie des données coté front se fait via Axios.

Le probleme est qu'à chaque envoi, j'obtiens cette foutue erreur "The submitted data was not a file. Check the encoding type on the form"

Voici mon code :

model.py

from django.db import models
from django.db.models.signals import post_save
from django.contrib.auth.models import AbstractUser


class User(AbstractUser):
    pictureImage = models.ImageField(blank=True,null=True, verbose_name="pictureImage")

serializer.py

from api.models import User
from django.contrib.auth.password_validation import validate_password
from rest_framework_simplejwt.serializers import TokenObtainPairSerializer
from rest_framework import serializers
from rest_framework_simplejwt.serializers import TokenObtainPairSerializer
import base64
from uuid import uuid4
from django.core.files.base import ContentFile

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('id', 'pictureImage')


class MyTokenObtainPairSerializer(TokenObtainPairSerializer):
    @classmethod
    def get_token(cls, user):
        token = super().get_token(user)
        return token


class RegisterSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('id','pictureImage')

    def create(self, validated_data):
        user = User.objects.create(
            pictureImage=validated_data['pictureImage']
        )
        
        user.save()

        return user

view.py

from django.shortcuts import render
from api.models import User
from api.serializer import MyTokenObtainPairSerializer, RegisterSerializer
from rest_framework.decorators import api_view
from rest_framework.response import Response
from rest_framework_simplejwt.views import TokenObtainPairView
from rest_framework import generics
from rest_framework.permissions import AllowAny
from rest_framework.decorators import api_view

class MyTokenObtainPairView(TokenObtainPairView):
    serializer_class = MyTokenObtainPairSerializer

class RegisterView(generics.CreateAPIView):
    queryset = User.objects.all()
    permission_classes = (AllowAny,)
    serializer_class = RegisterSerializer

@api_view(['GET'])
def getRoutes(request):
    routes = [
        '/api/token/',
        '/api/register/',
        '/api/token/refresh/'
    ]
    return Response(routes)

Pour le front,, je vous met une capture d'ecran de mon code (Register.js) car je ne parviens pas à rajouter le code ; Je suis systematiquement bloqué lorsque j'essaie

J'ai essayé de passer par la methode FormData() et de rajouter le type encType="multipart/form-data" mais cela n'a pas résolu mon probleme.

J'obtiens toujours l'erreur en question

Pouvez-vous m'aider, je suis vraiment désespéré.

Merci d'avance