Unable to send formdata to node server using Angular

Question

I'm trying to create one registration page in angular after applying validation and I send it to the server and save it into mongodb.

I have try like this

  register_user() {
    const data = this.register_form.getRawValue();

    const formData: FormData = new FormData();

    formData.append('name', data.name);
    formData.append('email', data.email);
    formData.append('password', data.password);
    // formData.append('image', this.image);
    formData.append('gender', 'Male');

    formData.forEach((value, key) => {
      console.log(value);
    });

    this.user_service.create_user(formData).subscribe((res) => {
      console.log(res);
    });
  }

service

  create_user(data: FormData) {
    return this.http.post(`${environment.BASE_URL}/user/create-user`, data, {
      headers: { 'Content-Type': 'multipart/form-data' },
    });
  }

Node server

// required Route
const User = require('./Routes/user');

// Using middle ware
app.use(cors());
app.use(
  express.urlencoded({
    extended: true,
  })
);
app.use(express.json());

app.use('/user', User);

app.listen(PORT, () => console.log(`App started on http://localhost:${PORT}`));

router.post('/create-user', async (req, res) => {
  console.log(req.body);
  let { name, email, gender, mobile_no, password } = req.body;

  try {
    if (
      !(name && email && gender && mobile_no && password && password.length > 8)
    ) {
      throw new Error(
        `All fields are required name: ${name} , email: ${email} , gender: ${gender} , MobileNo: ${mobile_no} .Password length must be greater then 8 character`
      );
    }
    password = bcrypt.hashSync(password, parseInt(process.env.BCRYPT_SALT));

    // let response = await USER.create({ name, email, gender, mobile_no });
    const token = await jwt.sign(
      { name, email, mobile_no, user_id: response._id },
      process.env.JWT_KEY
    );

    response = response.toObject();
    response['token'] = token;

    res.status(200).json({ err: 0, message: 'User Created', response });
  } catch (error) {
    res.status(404).json({ err: 1, message: error.message, error });
  }
});

On the server in request body I'm getting empty object {}

But I try to send normal Js object it works fine.

How can I solve this problem? Does formdata require any other module to be install or imported in app.module.ts?

Onur Özkır · Answer 1 · 2021-05-21T10:19:35.797

You should use multiparty. This is the most convenient way you can receive the FormData data you send to the back-end.

const multiparty = require('multiparty');

router.post('/create-user', async (req, res) => {
    const form = new multiparty.Form();

    // catch formData event
    form.parse(req, (err, fields, files) => {
        let {name, email, gender, mobile_no, password} = fields;
        try {
            if (
                !(name && email && gender && mobile_no && password && password.length > 8)
            ) {
                throw new Error(
                    `All fields are required name: ${name} , email: ${email} , gender: ${gender} , MobileNo: ${mobile_no} .Password length must be greater then 8 character`
                );
            }
            password = bcrypt.hashSync(password, parseInt(process.env.BCRYPT_SALT));

            // let response = await USER.create({ name, email, gender, mobile_no });
            const token = await jwt.sign(
                {name, email, mobile_no, user_id: response._id},
                process.env.JWT_KEY
            );

            response = response.toObject();
            response['token'] = token;

            res.status(200).json({err: 0, message: 'User Created', response});
        } catch (error) {
            res.status(404).json({err: 1, message: error.message, error});
        }
    });
});

Unable to send formdata to node server using Angular

1 Answers1