I am trying to send the form data with text and file inputs. By using multer i am able to only fetch file not the text data. Here is the form
import React from 'react'
const Addplayer=()=>{
return(
<>
<h1>Add player here</h1>
<form method='POST' enctype='multipart/form-data'>
<label>Enter the team name
<input type="text" name='tn' placeholder='Team name'/>
</label>
<br></br><br></br><br></br>
<label>Enter the player name
<input type="text" name='pn' placeholder='Player name'/>
</label>
<br></br><br></br><br></br>
<label>Enter the player age
<input type="number" name='pa' placeholder='Player age'/>
</label>
<button type="submit">Submit</button>
</form>
</>
)
}
I am using the multer middleware to fetch the file but i text fields of these form are not able to accessed in request body.
See this example from the Multer docs (it says req.body will hold the text fields, if there were any, so the other fields are in req.body):
const express = require('express')
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })
const app = express()
app.post('/profile', upload.single('avatar'), function (req, res, next) {
// req.file is the `avatar` file
// req.body will hold the text fields, if there were any
})
PS. This comment has got a point:
How is the form submitted to the server? I don't see an action in your form element.
An action attribute (docs) specifies the URL the data should be sent to. In this case, you should set your Express.js endpoint here.