'How to POST nested Data that contains a File with Django Rest Framework?

I've been trying to post a nested object with one file and some data via django drf for a few days now. The goal is to create a story together with some images, one of these images being the title image of the story. Basically, I am able to post the story successfully with postman (see picture below). However, when I use my react js frontend for sending, I am not able to create the form data in a way that Django understands it. Django always returns the error story_media field is required. I suppose this is because Django does not understand the incoming data correctly.

class Story (models.Model):
    title = models.CharField(max_length=100,blank=True)
    author = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, null=True)

class Story_Media (models.Model):
    story = models.ForeignKey(Story,on_delete=models.CASCADE, null=True, related_name = 'story_media', related_query_name = 'story_media')
    file = models.FileField(upload_to='story_media/', null=True)
    isTitlePicture = models.BooleanField(blank=False, null=True) 
# Story  Story Media Serializer
class Story_Media_Serializer (serializers.ModelSerializer):

    class Meta:
        model = Story_Media
        fields =  ('id','file','isTitlePicture',)


# Story  Serializer
class StoryCreateUpdateSerializer (serializers.ModelSerializer):
    story_media = Story_Media_Serializer(many=True)

    class Meta:
        model = Story
        fields =  ('title','story_media',)

    def create(self, validated_data):
        current_user = self.context["request"].user
        story_media = validated_data.pop('story_media')
        
        story_instance = Story.objects.create(author=current_user, **validated_data)

        for story_media_data in story_media:
            Story_Media.objects.create(**story_media_data, story=story_instance)

# Story  Create View Set
class StoryCreateUpdateViewSet(viewsets.ModelViewSet):
    serializer_class = StoryCreateUpdateSerializer
    queryset = Story.objects.all()

This is how i create my form data in react js. In this example story_media_array contains only a single image object.

    // array that stores all the images
    let story_media_array = [];
 
    // single image object
    var image_object ={
     file: this.state.file[0], // some file
     isTitlePicture: "True"
    }
    
    // push image object in array
    story_media.push(image_object);

    let formdata = new FormData();
    
    // title
    formdata.append('title', "Test")
    // image
    formData.append('story_media', story_media_array)

However, as I wrote above, I am not able to create the form with the above code, it returns 'story_media field is required'. But it works with postman. I'm a bit lost at the moment, so I'm glad for any help.

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source