Multi tool use

Django Rest Framework parsing an array of FormData

Here is my Serializer class. I am hoping to have one to many relationship with UserSerializer to SnapCapsulesSerializer. I have allow for SnapCapsule to be added to UserSerializer, so each User will have access to its snapcapsule. Here is the link I am referencing on creating relational Serializers.
http://www.django-rest-framework.org/api-guide/relations/#writable-nested-serializers

class UserSerializer(serializers.HyperlinkedModelSerializer):
snapcapsules = SnapCapsuleSerializer(
many=True,
read_only=True,
allow_null=True,
)

class Meta:
model = User
fields = ('snapcapsules', 'url', 'username', 'email', 'password')
write_only_fields = ('password',)

def create(self, validated_data):
user = User.objects.create(
username=validated_data['username'],
email=validated_data['email'],
)

user.set_password(validated_data['password'])
user.save()

return user

def update(self, instance, validated_data):
assert (validated_data), "No data recieved."
for capsule in validated_data.get("snapcapsules", ):
snapcapsulea = instance.snapcapsules
snapcapsule = SnapCapsule.object.create(user=instance.username,
**capsule)
snapcapsule.save()
snapcapsules.append(snapcapsule)
instance.snapcapsules = snapcapsule
instance.save()

return instance


Here is frontend request. For whatever reason, django validatedData is empty when sending sending the request in this format. I believe FormData does know what to do with an Array. (MyForm is a installed FormData class) I tried JSON.stringify(capsule) as well, and it did not work. Can I append an array to 'formdata' in javascript?

export default class CapsuleForm extends React.Component {
constructor (props) {
super(props);

this.state = {
userUrl: this.props.auth.domain + "/users/" + this.props.userID + "/",
dateToPost: moment().add(1, "m"),
image: null,
caption: "",
redirect: false,
invalidFormSubmit: false
};

this.handleChange = this.handleChange.bind(this);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.handleDateChange = this.handleDateChange.bind(this);
}


handleFormSubmit(e) {
e.preventDefault();

var capsule = new MyForm();
capsule.append("dateToPost", this.state.dateToPost.format());
capsule.append("image", this.state.image);
capsule.append("caption", this.state.caption);

var snapcapsules = new MyForm();

snapcapsules.append("snapcapsules", [capsule])

axios.patch(this.state.userUrl, snapcapsules)
.then(() => {
this.setState({redirect: true})
}).catch(err =>{
alert(err);
})
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.