The code is forcing the user to change the image also when he want to change only other properties of his article
Question:
Hello everyone I have a blog platform, the user can add and edit blog. I used Django and Django Rest Framework to build the website, and for the frontend ReactJS. My problem is when I edit blog I couldn’t save the changes until I change the image.
in React edit.js
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
let ss = new FormData();
ss.append('title', formData.title);
ss.append('slug', formData.slug);
ss.append('content', formData.content);
ss.append('image', postimage.image[0]);
axiosInstance.patch(`admin/edit/`+ id + '/', ss, {
headers:{
Authorization: `JWT ${localStorage.getItem('refresh_token')}`
},
},)
};
Any hint or guidance will be really helpful for me to complete the project because I have been stuck in it for more than two weeks.
Answers:
The problem is with handleSubmit
, you cannot read the value of postimage
if it is null:
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
let ss = new FormData();
ss.append('title', formData.title);
ss.append('slug', formData.slug);
ss.append('content', formData.content);
if (postimage != null) {
ss.append('image', postimage.image[0]);
}
axiosInstance.patch(`admin/edit/`+ id + '/', ss, {
headers:{
Authorization: `JWT ${localStorage.getItem('refresh_token')}`
},
},)
.then((res) => {
// navigate('/admin/');
});
};
Remember to set required=False
for the image
field of BlogSerializer
.
Hello everyone I have a blog platform, the user can add and edit blog. I used Django and Django Rest Framework to build the website, and for the frontend ReactJS. My problem is when I edit blog I couldn’t save the changes until I change the image.
in React edit.js
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
let ss = new FormData();
ss.append('title', formData.title);
ss.append('slug', formData.slug);
ss.append('content', formData.content);
ss.append('image', postimage.image[0]);
axiosInstance.patch(`admin/edit/`+ id + '/', ss, {
headers:{
Authorization: `JWT ${localStorage.getItem('refresh_token')}`
},
},)
};
Any hint or guidance will be really helpful for me to complete the project because I have been stuck in it for more than two weeks.
The problem is with handleSubmit
, you cannot read the value of postimage
if it is null:
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
let ss = new FormData();
ss.append('title', formData.title);
ss.append('slug', formData.slug);
ss.append('content', formData.content);
if (postimage != null) {
ss.append('image', postimage.image[0]);
}
axiosInstance.patch(`admin/edit/`+ id + '/', ss, {
headers:{
Authorization: `JWT ${localStorage.getItem('refresh_token')}`
},
},)
.then((res) => {
// navigate('/admin/');
});
};
Remember to set required=False
for the image
field of BlogSerializer
.