Here i have two component Child Component which passes text and image to the Parent component and Parent post the form But text is passed but image is getting error.

I am using Django as Backend I can provide it too if required. Its just a simple Django-Rest-Framework No validation.

Here when i console.log() p_details.Banner, p_imgs.Image both are providing an File

Though i am facing Error.

Banner
:
[‘The submitted data was not a file. Check the encoding type on the form.’]

product_image :”Image”: [
“No file was submitted.”
]

const Parent_Comp = ({p_details, p_imgs}) =>{

    const handleSubmit = async (event) => {
        event.preventDefault();

        const products = new FormData();
        Object.keys(p_details).forEach((key) => products.append(key, p_details[key]));
        var parentObj = [];

        for (var key in p_imgs.Image) {
            if (p_imgs.Image.hasOwnProperty(key)) {
                var file = p_imgs.Image[key];
                var nameWithKey = p_imgs.Name + "[" + key + "]";
                var obj = {
                    "Name": nameWithKey,
                    "image": file
                };
                parentObj.push(obj);
            }
        }
        products.append('product_image', JSON.stringify(parentObj));
        
        const productsObj = {};

        for (const [key, value] of products.entries()) {
            if (key === 'product_image') {
                productsObj[key] = JSON.parse(value);
            } else {
                productsObj[key] = value;
            }
        }

        console.log(productsObj);


        try {
            const res = await axios.post('http://127.0.0.1:8000/media/product/create/', productsObj, {
                 headers: {
                     'Accept': 'application/json',
                     'Content-Type': 'application/json', // Assuming you're sending JSON data
                     // Add any other headers if needed
                 }
            });
            console.log("Product Created Successfully");
        } catch (error) {
            console.log(error);
            console.log(error.response.data); // Accessing response data
        }
        
        
    };

    return(
    <>
            <form onSubmit={handleSubmit} encType="multipart/form-data">
                <Button type="submit">Submit</Button>
            </form>

    </>
    )
}

On both productsObj and formData (products) I am getting same error.