How to send a read-only value from a form?

Question

<form action="/upload" method="POST" enctype="multipart/form-data">
    <fieldset>
        <span>Event name</span>
        <input name = "name" type="text" class="form-control" value="<%= `${event.name}` %>" readonly>
    </fieldset>
    <fieldset>
        <span>File</span>
        <input name = "eventImage" type="file" class="form-control" id="name" placeholder="Event name..." required>
    </fieldset>
    <fieldset>
        <button type="submit" id="form-submit" class="btn">Add Event</button>
    </fieldset>
</form>

and first console.log(req.body.name) is getting undefined... How do i resolve it?

app.post("/upload", (req, res) => {
    console.log(req.body.name);  // output is undefined
    const storage = multer.diskStorage({
        destination: './public/images' + req.body.name,
        filename: function(req, file, cb){
            cb(null, file.originalname);
        }
    });

    const upload = multer({
        storage: storage,
    }).single('eventImage');

    upload(req, res, (err) => {
        if(err){
            console.log(err);
        }
        else{
            console.log(req.body.name); // output is correct
            console.log(req.file);
        }
     })
});

the first console.log(req.body.name) is outputting as undefined and other console.log are evaluating fine.. how to resolve it?

Answer 1

Try using this:

var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false })) // urlencoded
app.use(bodyParser.json()) // json

...
...

app.post("/upload", (req, res) => {
    console.log(req.body.name);
    console.log(req.file);
});

Answer 2

I had a similar issue which I had solved by passing the value through a hidden input but still keep the readonly field so users can see the data.

<form action="/upload" method="POST" enctype="multipart/form-data">
    <fieldset>
        <span>Event name</span>
        <input name="display_name" type="text" class="form-control" value="<%= `${event.name}` %>" readonly>
        <input name="name" type="hidden" value="<%= `${event.name}` %>">
    </fieldset>
    <fieldset>
        <span>File</span>
        <input name = "eventImage" type="file" class="form-control" id="name" placeholder="Event name..." required>
    </fieldset>
    <fieldset>
        <button type="submit" id="form-submit" class="btn">Add Event</button>
    </fieldset>
</form>

And then check your result

app.post("/upload", (req, res) => {
    console.log(req.body.name);
    console.log(req.file);
});