What is the best method for sending a POST request with nested data, including files such as images, to django REST utilizing nested serializers?
If we have the following JavaScript object:
bookData: {
title: 'Anne of Green Gables',
coverImage: File(123456),
pages: 123,
author: {
name: 'Lucy Maud Montgomery',
born: 1874,
profilepicture_set: [
{file: File(234567), description: 'Young L. M. Montgomery'},
{file: File(234568), description: 'Old L. M. Montgomery}
],
quote_set: [
{text: "I'm so glad I live in a world where there are Octobers."},
{text: "True friends are always together in spirit."},
]
},
}
The goal is to send this data via a POST request to our django REST API (note that VueJS is used on the front end).
# views.py
class CreateBookView(generics.CreateAPIView):
serializer_class = CreateBookSerializer
queryset = Book.objects.all()
# serializers.py
class CreateBookSerializer(serializers.ModelSerializer):
author = CreateAuthorSerializer()
class Meta:
model = Book
fields = ('title', 'pages', 'author')
@transaction.atomic
def create(self, validated_data):
author_data = validated_data.pop('author')
uploader = self.context['request'].user
book = Book.objects.create(uploader=uploader, **validated_data)
Author.objects.create(book=book, **author_data)
return book
# models.py
class AuthorManager(models.Manager):
def create(self, **author_data):
quotes_data = author_data.pop('quote_set')
photos_data = author_data.pop('profilepicture_set')
author = Author(**author_data)
author.save()
for quote_data in quotes_data:
Quote.objects.create(author=author, **quote_data)
for photo_data in photos_data :
ProfilePicture.objects.create(author=author, **photo_data)
return author
## Omitting details on CreateAuthorSerializer, Quote and ProfilePicture Managers as they mirror the above logic.
## Assume each Author corresponds to only one Book (OneToOneField).
<hr>
<p><strong>UPDATE</strong> </p>
<p>We can provide insight into how the data is sent from the front end using VueJS.</p>
<pre><code>sendData(){
var fd = new FormData()
var bookData = {
title: this.$store.getters.title, # 'Anne of Green Gables"
coverImage: this.$store.getters.coverImage, # File(somesize)
pages: this.$store.getters.pages, # 123
author: this.$store.getters.author, # nested object
...
}
fd = objectToFormData(bookData, fd) # external function, see below
this.$http.post('api/endpoint/create/', fd, headers: {
'Content-Type': 'multipart/form-data',
'X-CSRFToken': Cookies.get('csrftoken'),
}
}).then(...)
}
The sendData() function is executed upon button click. The objectToFormData refers to an external library obtained through npm, which flattens the nested object structure into a form format.
However, the issue arises when examining the structure of request.data, particularly its difference from the original bookData structure. This discrepancy causes problems with the REST serializer, most notably due to the absence of the author field (since the object has been flattened).
<QueryDict: {
'title': ['Anne of Green Gables'],
'coverImage':[InMemoryUploadedFile: cover.jpg (image/jpeg)],
'pages': ['123'],
'name': ['Lucy Maud Montgomery'],
'born': ['1874'],
'profilepicture_set[][description]': ['Young L. M. Montgomery', 'Old L. M. Montgomery'],
'profilepicture_set[][file]': [
InMemoryUploadedFile: young.jpg (image/jpeg),
InMemoryUploadedFile: old.jpg (image/jpeg)
],
'quote_set[][text]': [
"I'm so glad I live in a world where there are Octobers.",
"True friends are always together in spirit."
]
}>
This leads us to explore potential solutions, such as overriding the create() function.
class CreateBookView(generics.CreateAPIView):
(...)
def create(self, request, *args, **kwargs):
book_data = {}
book_data['title'] = request.data['title']
book_data['pages'] = request.data['pages']
book_data['cover_image'] = request.data['coverImage']
book_data['author'] = {}
book_data['author']['name'] = request.data['name']
book_data['author']['born'] = request.data['born']
(...)
serializer = self.get_serializer(data=book_data)
(...)
While the above approach is functional, it may not be efficient for complex models with extensive fields and multiple layers of nesting, as shown in the simplified book/author example.
In light of this challenge, what would be the recommended course of action? Should the methodology of POSTing be altered to achieve a more favorable request.data format or is there a practical solution to address the current formatting complexities?