How to upload an image to django from an html input file

I am developing a web service on django with frontend on react. I ran into a problem that I can't upload an image to django. Below is my component code where I'm trying to download it:

export function ProviderRegistration(){
    const[logoField, setLogoField] = useState()
    const token = useSelector((state) => state.user.token)
    const [cookie, setCookie] = useCookies(['auth'])

    const confirm = () => {`/providers/?username=${cookie.auth.login}`, 
            photo : logoField
        { "headers" : { "Authorization" : "token " + token }})
        .then(res => console.log(res))
        .catch(err => console.log(err))

        <div className="registration-provider-container">
            <div className="registration-title">Provider registration</div>
            <input type="file" className="registration-logo-add" onChange={(e) => setLogoField(}/>
            <button className="registration-confirm" onClick={() => confirm()}>Confirm</button>

And the endpoint processing this request

class Providers(viewsets.ModelViewSet):
    filterset_class = ProvidersFilter
    queryset = Provider.objects.all()
    permission_classes = [IsAuthenticatedOrReadOnly, IsProviderPermission, IsOneToOneProviderPermission]
    def get_serializer_class(self):
        if self.action == 'list':
            return GetProviderSerializer
            return PutProviderSerializer

    def create(self, request):
        username = request.GET.get('username', '')
        user = User.objects.get(username=username).pk{'user' : user})
        return super().create(request)

When I try to upload an image, django returns the following error:

"The submitted data was not a file. Check the encoding type on the form."

And I haven't found a way to correctly upload an image to django using Ajax. I also output what my browser sends to the server:

{photo : 'C:\\fakepath\\magnit.jpg'}
Back to Top