CODEWITHSUNDEEP
node.jsreactjsexpressmulter
Süleyman Ali Akpınar
Süleyman Ali Akpınar

Reputation: 1472

Unexpected field error from Multer while file uploading

Hi I want to create a file upload API with react and express. So, I used muster. But when I send to axis request from client I get an error from server.

Error:

MulterError: Unexpected field

my Express server code snipped like that:

const storage = multer.diskStorage({
    destination : '/',
    filename(req,file,cb){
        const newFileName = `${uuid()}-${file.originalname}`
        cb(null,newFileName);
    }
})

const uploadVideoFile = multer({
    storage : storage
}).single("videofile");

app.post('/upload', uploadVideoFile, (req,res)=>{
    if(req.file){
        const filename = req.file.filename;
        const {title , description} = req.body;

        open(oAuth.generateAuthUrl({
            access_type : 'offline',
            scope : 'https://googleapis.com/auth/youtube.upload',
            state : JSON.stringify({
                filename, title, description
            })
        }))
    }
})

And my react client like that:

    const[form,setForm] = React.useState({
        title : "",
        description : "",
        file : null
    })

    function handleChange(event){
        const inputValue = event.target.name === "file" ? event.target.files[0] : event.target.value;

        setForm({
            ...form,
            [event.target.name] : inputValue
        })
    }

    function handleSubmit(event){
        event.preventDefault();
        
        const videoData = new FormData();
        videoData.append("videoFile", form.file);
        videoData.append("title", form.title);
        videoData.append("description", form.description);

        axios.post('http://localhost:3000/upload', videoData).then(response=>{
            console.log(response.data)
        })
    }

    return (
    <div>
        <h1>Youtube Upload Service</h1>
        <form onSubmit={handleSubmit}>
            <div>
                <input onChange={handleChange} type="text" name="title" autoComplete="off" placeholder="Title"/>
            </div>
            <div>
                <textarea onChange={handleChange} type="text" name="description" autoComplete="off" placeholder="Description"/>
            </div>
            <div>
                <input onChange={handleChange} accept="video/mp4" type="file" name="file" placeholder="Video File"/>
            </div>
            <button type="submit">Upload Video</button>
        </form>
    </div>
        )
}

Why I'm getting this error? How can I solve this?

Upvotes: 2

Views: 3387

Answers (1)

Maxim Orlov
Maxim Orlov

Reputation: 2582

When Multer sees a file it checks whether the name of the file input matches exactly what you've configured. It's also case sensitive.

You've configured Multer to accept a single file input named "videofile": .single("videofile"). In the frontend however, you're naming it "videoFile" (with capital F): videoData.append("videoFile", form.file);. Since "videofile" !== "videoFile", Multer throws an unexpected field error.

Renaming either of the two to match the other should fix your issue. To understand how Multer works and how you can avoid this error in the future, I recommend reading this article: Fix "Unexpected field" Error From Multer

Upvotes: 2

Related Questions