Home > front end >  Cannot read properties of undefined (reading 'buffer')
Cannot read properties of undefined (reading 'buffer')

Time:10-19

I have been working on a project and I want to upload PDF to it. For handling POST request in the backend, I used multer library for uploading files. I tested this http://localhost:3000/schedule/upload endpoint in the postman, and it is working fine, apparently while requesting this same endpoint from Front-end it is giving this error Cannot read properties of undefined (reading 'buffer'). I searched all over the internet and I couldn't able to find a single solution to this problem. So, if someone has any idea what is going wrong here, Please tell me. It will be a great help to me.

Client-side Code

const saveFile = async () => {

        let file = document.getElementById("fileInp").files[0];
        console.log('inside  '   file)
        let formdata = new FormData();
        
        formdata.append("schedule", file);
        

        const config = {
            url : '/schedule/upload',
            method : 'post',
            data :  {
                filename : 'schedule',
                formdata
            },
            headers : {
                Authorization : `Bearer ${token}`,
                "Content-Type": "multipart/form-data"
            }
        }

        try {
           const res = await axios(config);
           console.log(res.data);
        } catch (e) {
            console.log(e);
        }
        return;
    }

Server-side Code


const upload = multer({
    limits : 1000000
})

fileRouter.post("/schedule/upload",auth,upload.single("schedule"),async(req,res)=>{
    await File.findOneAndUpdate({fileName : "schedule"},{fileName : req.body.filename, file : req.file.buffer},{upsert : true}).exec();
    res.status(200).send("Schedule uploaded");
})

CodePudding user response:

It means the file is not parsed, which means the request is not correct. Change data property to include only formData, no need to include filename, it's already within formData, and multipart header is also not needed.

Try changing config variable to this:

const config = {
    url: '/schedule/upload',
    method: 'post',
    data: formdata,
    headers: {
        Authorization: `Bearer ${token}`
    }
}
  • Related