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.

Thanks

Answer 1

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.