Multer only parsing multipart/form-data from postman, not from actual form

Question

I found this question from over a year ago that exactly matches mine, but no answers.

Postman curl:

curl --location --request POST 'http://127.0.0.1:8080/register' \
--header 'Cookie: connect.sid=s%3AZpgwFoDrgb23EX1DPXnehAB4REEoFFRS.s2%2B12XeRx9ugG2E6WtmGbxJmPv9y13unu2EdsUYdS8M' \
--form 'username="bob"' \
--form 'email="bob@bob.com"' \
--form 'password="password"' \
--form 'confirmPassword="password"' \
--form 'image=@"/C:/Users/<me>/Pictures/My Headshot.jpg"'

front-end EJS:

<form action="/register" method="POST" id="register-form" enctype="multipart/form-data">
                <div class="input-group mb-3">
                    <label for="username" class="form-label input-group-text">Username</label>
                    <input type="text" class="form-control" id="username" placeholder="ILuvBooks101" value="<%= typeof username !== 'undefined' ? username: '' %>">
                </div>
                <div class="input-group mb-3">
                    <label for="email" class="form-label input-group-text">Email address</label>
                    <input type="email" class="form-control" id="email" placeholder="name@example.com" value="<%= typeof emailAddress !== 'undefined' ? emailAddress: '' %>">
                </div>
                <div class="input-group mb-3">
                    <label for="password" class="form-label input-group-text">Password</label>
                    <input type="password" class="form-control" id="password">
                </div>
                <div class="input-group mb-3">
                    <label for="confirmPassword" class="form-label input-group-text">Confirm Password</label>
                    <input type="password" class="form-control" id="confirmPassword">
                </div>
                <div class="input-group mb-3">
                    <label for="profilePicture" class="form-label input-group-text">Profile Picture</label>
                    <input class="form-control" type="file" id="image">
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>

From Postman, everything works fine, but when testing the actual app's form, I get undefined for req.file and {} for req.body

Any insight would be appreciated!

Answer 1

.......... I forgot to set the name attribute of the fields in the form. Works fine now. It's always the simple things, isn't it?