I am able to save the data without the image field. I am new to react so don't know pretty much about this type of problems. What is the problem with the image field?? this isn't showing me any error just my image data is not saving. I am sharing all my code it will be really helpful if you guys help me out.
#models.py
class Test(models.Model):
full_name = models.TextField(max_length=200, blank=True, null=True)
image = models.ImageField(null=True, blank=True)
address = models.TextField(max_length=200, blank=True, null=True)
def __str__(self):
return str(self.id)
#views.py
@api_view(['POST'])
def add(request):
data = request.data
test = Test.objects.create(
full_name = data['full_name'],
address = data['address'],
)
serializer = TestSerializer(test, many=False)
return Response(serializer.data)
#this is screen for react page
import React from 'react';
class Test extends React.Component{
constructor(){
super();
this.state={
full_name:'',
image: '',
address:''
}
this.changeHandler=this.changeHandler.bind(this);
this.submitForm=this.submitForm.bind(this);
}
// Input Change Handler
changeHandler(event){
this.setState({
[event.target.name]:event.target.value
});
}
// Submit Form
submitForm(){
fetch('http://127.0.0.1:8000/api/orders/test',{
method:'POST',
body:JSON.stringify(this.state),
headers:{
'Content-type': 'application/json; charset=UTF-8',
},
})
.then(response=>response.json())
.then((data)=>console.log(data));
this.setState({
full_name:'',
image: '',
address:''
});
}
render(){
return (
<table className="table table-bordered">
<tbody>
<tr>
<th>Full Name</th>
<td>
<input value={this.state.full_name} name="full_name" onChange={this.changeHandler} type="text" className="form-control" />
</td>
</tr>
<tr>
<th>Voucher</th>
<td>
<input value={this.state.image} name="image" onChange={this.changeHandler} type="file" className="form-control" />
</td>
</tr>
<tr>
<th>Address</th>
<td>
<input value={this.state.address} name="address" onChange={this.changeHandler} type="text" className="form-control" />
</td>
</tr>
<tr>
<td colSpan="2">
<input type="submit" onClick={this.submitForm} className="btn btn-dark" />
</td>
</tr>
</tbody>
</table>
);
}
}
export default Test;
