uploading image from react frontend to django backend. Image stuck in

I am trying to implement edit profile in my app. I am uploading the picture from my react frontend, and then sending the request to my django server. When i print(request.FILES) i see the picture {'profile_image': [<InMemoryUploadedFile: Youssef-001.jpg (image/jpeg)>]}>

The issue is I am having trouble saving it to my ProjectForm I created.

Please see my code below:

views.py

@api_view(['POST'])
def editAccount(request, email):

    profile = Profile.objects.get(email=email)
    form = ProfileForm(instance=profile)

    if request.method == 'POST':
        print(request.FILES)
        form = ProfileForm(request.POST, request.FILES, instance=profile)
        form.save()

        return Response()

forms.py

class ProfileForm(ModelForm):
    class Meta:
        model = Profile
        fields = ['name', 'username', 'bio', 'profile_image']

    def __init__(self, *args, **kwargs):
        super(ProfileForm, self).__init__(*args, **kwargs)

EditAccount.jsx

    const handleSubmit = () => {
        console.log(profile.profile_image)

        const profileUploadData = new FormData()
        profileUploadData.append('name', profile.name)
        profileUploadData.append('email', profile.email)
        profileUploadData.append('username', profile.username)
        profileUploadData.append('bio', profile.bio)
        profileUploadData.append('profile_image', profile.profile_image, profile.profile_image.name)

        fetch(`http://127.0.0.1:8000/api/profile-edit/${userContextEmail}`, {
            method: "POST",
            body: profileUploadData
        })
    }

In terms of setting.py and routes etc I have configured it in the conventional way using static folder in base directory. I have been stuck on this issue for a long time and any help would be greatly appreciated. Thank you

source https://stackoverflow.com/questions/73492978/uploading-image-from-react-frontend-to-django-backend-image-stuck-in-inmemoryu