Sending FormData to express backend isnt working | SpeakJS | Page 1

copper perch Dec 25, 2022, 1:32 AM

#

I have a form with inputs and a submit button. the inputs all have the name attribute. my event listener does work on form submit. however, i cant seem to get the data of the form in order to send it through a fetch

#

FRONTEND: 

async function uploadForm(form) {
    const data = new FormData(form);
    
    const response = await fetch("/register", {
        method: "POST",
        body: JSON.stringify(data)
    });

    return response.json();
}

RegisterForm.addEventListener("submit", async (event) => {
    event.preventDefault();
    
    const data = await uploadForm(RegisterForm);
}


BACKEND:
app.post("/register", (req, res) => {
    console.log(req.body.username) // -> undefined
    res.json("Received")
});

desert salmon Dec 25, 2022, 1:40 AM

#

are you sure you are sending a body value with the name "username"?

#

it looks like you are just sending some data to the backend

copper perch Dec 25, 2022, 1:40 AM

#

the form data

desert salmon Dec 25, 2022, 1:40 AM

#

but are you calling it correctly

#

?

copper perch Dec 25, 2022, 1:41 AM

#

which has an input with the name "username"

#

what do you mean

desert salmon Dec 25, 2022, 1:41 AM

#

instead of

mossy gulch Dec 25, 2022, 1:41 AM

#

you don't need to stringify formdata

copper perch Dec 25, 2022, 1:42 AM

#

true anyways still get undefined

mossy gulch Dec 25, 2022, 1:43 AM

#

did you set up the body parser on your server?

copper perch Dec 25, 2022, 1:43 AM

#

yes

#

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
``` these are the two lines i used

desert salmon Dec 25, 2022, 1:44 AM

#

body: JSON.stringify(data)

try

body: {
  username: "yourdata" 
}

mossy gulch Dec 25, 2022, 1:44 AM

#

well it should show an empty object instead of undefined 🤔

#

oh wait you logged .username nvm

copper perch Dec 25, 2022, 1:44 AM

#

its undefined because im trying to access the property

#

yea

desert salmon Dec 25, 2022, 1:44 AM

#

try my fix above

copper perch Dec 25, 2022, 1:44 AM

#

it is empty though if i just do "req.body"

#

@desert salmon ive done that before it does work

#

its something wrong with my form data

desert salmon Dec 25, 2022, 1:44 AM

#

yeah

#

but i learned you should always specify and transfer data that way

#

so you know where the problem lies

mossy gulch Dec 25, 2022, 1:45 AM

#

you either use formdata or stringify a js object

#

passing an object doesn't work

copper perch Dec 25, 2022, 1:46 AM

#

i just want the form data

mossy gulch Dec 25, 2022, 1:49 AM

#

what does your form look like?

#

do the inputs have names?

copper perch Dec 25, 2022, 1:49 AM

#

#

yes

#

<input
  autocomplete="off"
  name="email"
  placeholder="Email Address"
  type="email"
  class="form-control"
/>
``` this is an example of one of the three

mossy gulch Dec 25, 2022, 11:30 PM

#

did you solve this @copper perch? no solution but curious what the issue was

#

sounds like the backend is working correct, if the form contains an input with a name username, I would expect body: new FormData(form) to work

#Sending FormData to express backend isnt working