Getting “cannot read property of undefined error” in my code of updating a form consisting of 2 images.(MERN)

I have been getting this error : TypeError: Cannot read property ‘itineraryImage’ of undefined

Would you please tell me if there is something wrong with the below coding.It seems that the problem is in the backend(Checked from Postman).

It seems that it is a problem with the image I am uploading here , it does not get fetched by the backend.

Backend Nodejs Coding

//Updating Itinerary Details

router.route("/update/:id" ,upload.fields([
    { name: 'itineraryImage', maxCount: 1 },
    { name: 'itineraryCoverImage', maxCount: 1 },
  ])).put(async(req,res) =>{
    const itinerary = req.params.id;

     const itineraryId = req.body.itineraryId;
     const itineraryDays = req.body.itineraryDays;
     const itineraryName = req.body.itineraryName;
     const itineraryDesc = req.body.itineraryDesc;
     const itineraryImage = req.files.itineraryImage[0].originalname;
     const itineraryCoverImage = req.files.itineraryCoverImage[0].originalname;
     const itineraryClass = req.body.itineraryClass;
     const itineraryPriceAdult = req.body.itineraryPriceAdult;
     const itineraryPriceChild = req.body.itineraryPriceChild;

         const itineraryDetails = {
             itineraryId,
             itineraryDays,
             itineraryName,
             itineraryDesc, 
             itineraryImage, 
             itineraryCoverImage, 
             itineraryClass, 
             itineraryPriceAdult,
             itineraryPriceChild 
         }

        const update = await Itinerary.findByIdAndUpdate(itinerary,itineraryDetails).then((req,res)=>{
            res.status(200).send({status : "Itinerary Updated!"})
        }).catch((err) =>{
            console.log(err);
            res.status(500).send({status : "Error in updating itinerary"});
        })
})

Frontend Coding(React)

import styles from '../assets/css/EditItinerary.module.css'
import IndexHeader from 'components/Headers/IndexHeader';
import IndexNavbar from 'components/Navbars/IndexNavbar';
import DemoFooter from 'components/Footers/DemoFooter';
import { useState } from 'react';
import { useEffect } from 'react';
import { useParams } from 'react-router';
import axios from 'axios';
import{
    Label, 
    Input,
    Button
}
from 'reactstrap'




function EditItinerary(){

    

    const [itineraryId ,setitineraryId] = useState("");
    const [itineraryDays , setitineraryDays] = useState("");
    const [itineraryName , setitineraryName] = useState("");
    const [itineraryDesc , setitineraryDesc] = useState("");
    const [Filename1 , setitineraryImage] = useState("");
    const [Filename2 , setitineraryCoverImage] = useState("");
    const [itineraryClass , setitineraryClass] = useState("");
    const [itineraryPriceAdult , setitineraryPriceAdult] = useState("");
    const [itineraryPriceChild , setitineraryPriceChild] = useState("");

    const {id} = useParams();

    const onChangeFile = e =>{
        setitineraryImage(e.target.files[0]);
    }
    const onChangeFile2 = e =>{
        setitineraryCoverImage(e.target.files[0]);
    }

    useEffect(()=>{
        axios.get(`http://localhost:8070/itineraries/get/${id}`).then((res) =>[

        console.log(res.data),
        setitineraryId(res.data.itineraryId),
        setitineraryName(res.data.itineraryName),
        setitineraryDays(res.data.itineraryDays),
        setitineraryDesc(res.data.itineraryDesc),
        setitineraryClass(res.data.itineraryClass),
        setitineraryPriceAdult(res.data.itineraryPriceAdult),
        setitineraryPriceChild(res.data.itineraryPriceChild),
        setitineraryCoverImage(res.data.itineraryCoverImage),
        setitineraryImage(res.data.itineraryImage)


    ]).catch((err)=>{
        console.log(err);
        })
    } , []);



    function updateData(e){
        e.preventDefault();

        const formData = new FormData();


        formData.append("itineraryId" , itineraryId);
        formData.append("itineraryDays" , itineraryDays);
        formData.append("itineraryName" , itineraryName);
        formData.append("itineraryDesc" , itineraryDesc);
        formData.append("itineraryImage" , Filename1);
        formData.append("itineraryCoverImage" , Filename2);
        formData.append("itineraryClass" , itineraryClass);
        formData.append("itineraryPriceAdult" , itineraryPriceAdult);
        formData.append("itineraryPriceChild" , itineraryPriceChild);

        axios.put(`http://localhost:8070/itineraries/update/${id}` , formData , {headers: {'Content-Type': 'multipart/form-data'}}).then(() =>{
            alert("Itinerary Updated!");
        }).catch((err) =>{
            console.log(formData);
            console.log(err);
        })

    }

    return(

        <>
        <IndexHeader />
        <IndexNavbar />
        <div style = {{paddingTop : "50px"}} className = {styles.body}>
            <br/><br/><h3 className = {styles.header} style = {{textAlign : 'center'}}>Edit Tour Itinerary Details</h3><br/><br/>
            <div className = {styles.FormContainer}>
            <form onSubmit = {updateData} encType = "multipart/form-data">

                <Label for = "ItineraryID">Itinerary ID</Label><br/>
                <Input type = 'text' name = "ItineraryID" placeholder = "Enter Itinerary ID" value = {itineraryId}
                onChange = {(e) =>{
                    setitineraryId(e.target.value);
                }}
                ></Input><br/>

                <Label for = "ItineraryName">Itinerary Name</Label><br/>
                <Input type = 'text' name = "ItineraryName" placeholder = "Enter Itinerary Name" value = {itineraryName}
                onChange = {(e)=>{
                    setitineraryName(e.target.value);
                }}
                ></Input><br/>

                <Label for = "ItineraryDays">Itinerary Duration</Label><br/>
                <Input type = 'number' name = "ItineraryDuration" placeholder = "Enter Duration of the Itinerary" value = {itineraryDays}
                onChange = {(e) =>{
                    setitineraryDays(e.target.value);
                }}
                ></Input><br/>

                <Label for = "ItineraryDescription">Itinerary Description</Label><br/>
                <Input type = "text" name = "ItineraryDescription" placeholder = "Enter Itinerary Description" value = {itineraryDesc}
                onChange = {(e)=>{
                    setitineraryDesc(e.target.value);
                }}
                ></Input><br/>

                <Label for = "ItineraryImage">Itinerary Image</Label><br/>
                <Input type = "file" filename = "itineraryImage" accept = "image/*" className = "form-control-file"
                onChange = {onChangeFile}
                ></Input><br/>

                <Label for = "CardImage">Image for Card</Label><br/>
                <Input type = "file" filename = "itineraryCoverImage" accept = "image/*" className = "form-control-file"
                onChange = {onChangeFile2}
                /><br/>

                <Label for = "ItineraryClass">Select Itinerary Class</Label><br/>
                <Input type = "select" name = "ItineraryClass" value = {itineraryClass}
                onChange = {(e) =>{
                    setitineraryClass(e.target.value);
                }}
                >
                    <option>Deluxe</option>
                    <option>Standard</option>
                </Input>

                <Label for = "ItineraryPriceA">Itinerary Price for Adults</Label><br/>
                <Input type = "String" name = "ItineraryPriceA" placeholder = "Enter Itinerary Price for Adults" value = {itineraryPriceAdult} 
                onChange = {(e) =>{
                    setitineraryPriceAdult(e.target.value);
                }}
                />

                <Label for = "ItineraryPriceC">Itinerary Price for Children</Label><br/>
                <Input type = "String" name = "ItineraryPriceC" placeholder = "Enter Itinerary Price for Children" value = {itineraryPriceChild}
                onChange = {(e)=>{
                    setitineraryPriceChild(e.target.value);
                }}
                />

                <Button type = "submit" color = "warning" style = {{float:'right' , margin : "5px" }} >Edit Itinerary</Button>

            </form>    
            </div>
        </div>   
        <DemoFooter />
    </>
    );
}

export default EditItinerary;



Thank you for your attention !

Answer

Move the upload.fields call into put function like this:

 router.route("/update/:id").put(upload.fields([
        { name: 'itineraryImage', maxCount: 1 },
        { name: 'itineraryCoverImage', maxCount: 1 },
      ]), async(req,res) =>{
        const itinerary = req.params.id;
    
         const itineraryId = req.body.itineraryId;
         const itineraryDays = req.body.itineraryDays;
         const itineraryName = req.body.itineraryName;
         const itineraryDesc = req.body.itineraryDesc;
         const itineraryImage = req.files.itineraryImage[0].originalname;
         const itineraryCoverImage = req.files.itineraryCoverImage[0].originalname;
         const itineraryClass = req.body.itineraryClass;
         const itineraryPriceAdult = req.body.itineraryPriceAdult;
         const itineraryPriceChild = req.body.itineraryPriceChild;
    
             const itineraryDetails = {
                 itineraryId,
                 itineraryDays,
                 itineraryName,
                 itineraryDesc, 
                 itineraryImage, 
                 itineraryCoverImage, 
                 itineraryClass, 
                 itineraryPriceAdult,
                 itineraryPriceChild 
             }
    
            const update = await Itinerary.findByIdAndUpdate(itinerary,itineraryDetails).then((req,res)=>{
                res.status(200).send({status : "Itinerary Updated!"})
            }).catch((err) =>{
                console.log(err);
                res.status(500).send({status : "Error in updating itinerary"});
            })
    })

If this does nor work, see this

https://codesandbox.io/s/setup-basic-file-upload-with-node-js-server-9f5oe?file=/index.js:688-802