Django rest framework upload nested form data

Question

I have a front end react.js app that send a form data to a django rest framework end point. Basically, I want to create an order that consists of multiple ads, for now I am testing it using one ad. I am using a function that converts a javascript object to a FormData object from here https://gist.github.com/ghinda/8442a57f22099bdb2e34. As I understood from this function, the FormData object is just a text with a certain syntax, below are some object examples.

JavaScript object from browser console

{user_id: 'google-oauth2|117955176430010920035', fullname: 'Full Name', email: 'gmail@gmail.com', phone: '', ordertotalprice: 1950, …}
ads: Array(1)
0: {display: 1, firstday: '2021-12-2', lastday: '2021-12-15', duration: 13, image: File, …}
length: 1
lastIndex: (...)
lastItem: (...)
[[Prototype]]: Array(0)
email: "gmail@gmail.com"
fullname: "Full Name"
ordertotalprice: 1950
phone: "0000000"
user_id: "google-oauth2|11795517643001"
[[Prototype]]: Object

FormData Object from browser console using the gist.github link from above

user_id google-oauth2|117955176430010920035
index.js:25 fullname Full Name
index.js:25 email mail@gmail.com
index.js:25 phone 00000000
index.js:25 ordertotalprice 1950
index.js:25 ads[0][display] 1
index.js:25 ads[0][firstday] 2021-12-2
index.js:25 ads[0][lastday] 2021-12-15
index.js:25 ads[0][duration] 13
index.js:25 ads[0][image] File {name: 'Picture1.png', lastModified: 1637958641422, lastModifiedDate: Fri Nov 26 2021 22:30:41 GMT+0200 (Eastern European Standard Time), webkitRelativePath: '', size: 1094958, …}
index.js:25 ads[0][filetype] image/png
index.js:25 ads[0][originalname] Picture1.png
index.js:25 ads[0][price] 1950
index.js:25 ads[0][status] 0
index.js:25 ads[0][filehash] not available yet
index.js:25 ads[0][orderByNum] -1
index.js:25 ads[0][imgWidth] 1061
index.js:25 ads[0][imgHeight] 708

When sending this form data object to a Django-rest-framework api, it comes in this QueryDict format.

]}>

Django models

class OrdersDj(models.Model):
    id = models.CharField(primary_key=True, max_length=32, default=generate_uuid)
    user_id =  models.CharField(max_length=45, blank=True, null=True)
    # the rest of fields are in above objects

    class Meta:
        ordering = ["dateplaced"]

        

class AdsDj(models.Model):
    id = models.CharField(primary_key=True, max_length=32, default=generate_uuid)
    order = models.ForeignKey(OrdersDj,on_delete=models.CASCADE, blank=False, null=True)
    # the rest of fields are in above objects

The order object succeeds to be saved into the database but not the ads. Maybe the FormatData syntax is wrong but python cannot read the nested QueryDict objects. ads[0][property] maybe is wrong.

Django rest framework upload nested form data

0 Answers