ReactJS Axios pass data and upload image using Multer

Question

Good day, I am making a registration form in ReactJS the registration form has fields of firstname, lastname, email, password, birthday, and upload image. I managed to make the image uploaded in the server however I can't add other fields firstname, lastname, email, password and birthday, it has an error of Illegal arguments: undefined, string, may I know what I have been doing wrong? Thank you.

ReactJS submit event

import React, { Component } from "react";
import { Link } from "react-router-dom";

import DatePicker from "react-datepicker";
import moment from "moment";

import axios from "axios";

class Register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: moment(),
      firstname: "",
      lastname: "",
      email: "",
      password: "",
      dateofbirth: "",
      receipt: "",
      description: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.fileSelectHandler = this.fileSelectHandler.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    });
  }

  fileSelectHandler = event => {
    this.setState({
      receipt: event.target.files[0]
    });
  };

  onChange(e, date) {
    switch (e.target.name) {
      case "receipt":
        this.setState({ receipt: e.target.files[0] });
        break;
      default:
        this.setState({ [e.target.name]: e.target.value });
    }
    e.preventDefault();
  }

  onSubmit(e) {
    e.preventDefault();
    const { description, receipt } = this.state;
    const bodyFormData = new FormData();

    bodyFormData.append("receipt", receipt);

    bodyFormData.append("description", description);

    bodyFormData.append("firstname", this.state.firstname);
    bodyFormData.append("lastname", this.state.lastname);
    bodyFormData.append("password", this.state.password);
    bodyFormData.append("email", this.state.email);

    const newUser = {
      firstname: this.state.firstname,
      lastname: this.state.lastname,
      email: this.state.email,
      password: this.state.password,
      dateofbirth: document.getElementById("date").value
    };

    axios
      .post("/api/users/register", bodyFormData, newUser, {
        headers: {
          accept: "application/json",
          "Accept-Language": "en-US,en;q=0.8"
        }
      })
      .then(function(res) {
        console.log(res.data);
      })
      .catch(err => console.log(err));

    console.log(bodyFormData);
  }

  render() {
    return (
      <div className="container_child signup_container">
        <div className="signup_thumbnail">
          <div className="thumbnail__content">
            <h1 className="heading-primary">this is overlay with image</h1>
            <h2 className="heading-secondary">
              this is overlay with imagessss
            </h2>
          </div>
          <div className="signup__overlay" />
        </div>
        <div className="container_child signup_form">
          <form onSubmit={this.onSubmit} encType="multipart/form-data">
            <div className="form-group">
              <label htmlFor="username">Firstname</label>
              <input
                className="form-control"
                type="text"
                name="firstname"
                id="firstname"
                placeholder="Juan"
                value={this.state.firstname}
                onChange={this.onChange}
              />
            </div>
            <div className="form-group">
              <label htmlFor="lastname">Last Name</label>
              <input
                className="form-control"
                type="text"
                name="lastname"
                id="last-name"
                placeholder="Dela Cruz"
                value={this.state.lastname}
                onChange={this.onChange}
              />
            </div>
            <div className="form-group">
              <label htmlFor="prcid">Email</label>
              <input
                className="form-control"
                type="email"
                name="email"
                id="email"
                placeholder="juan@gmail.com"
                value={this.state.email}
                onChange={this.onChange}
              />
            </div>
            <div className="form-group">
              <label htmlFor="prcid">Password</label>
              <input
                className="form-control"
                type="password"
                name="password"
                id="password"
                value={this.state.password}
                onChange={this.onChange}
              />
            </div>

            <div className="form-group">
              <label htmlFor="prcid">Birthday:</label>
              <DatePicker
                id="date"
                selected={this.state.startDate}
                onChange={this.handleChange}
              />;
            </div>

            <div className="form-group">
              <div
                className="mdl-textfield mdl-js-textfield mdl-textfield--file is-upgraded"
                data-upgraded=",MaterialTextfield"
              >
                <input
                  className="mdl-textfield__input"
                  placeholder="File"
                  type="text"
                  id="uploadFile"
                  name="description"
                  value={this.state.description}
                  onChange={this.onChange}
                  //readonly="true"
                />
                <div className="">
                  <input
                    type="file"
                    ref="files"
                    id="uploadBtn"
                    name="receipt"
                    onChange={this.onChange}
                  />
                </div>
                {/* // <Dropzone onDrop={this.onDrop}>
                  //   <div>Try dropping some files here, or click to select files to upload.</div>
                  // </Dropzone> */}
              </div>
            </div>
            <div className="m-t-lg">
              <ul className="list-inline">
                <li>
                  <input
                    className="btn btn--form"
                    type="submit"
                    value="Register"
                  />
                </li>
                <li>
                  <Link to="/login">I am already a member</Link>
                </li>
              </ul>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default Register;

Answer 1

it may help you

Append the other fields with form data it works for me.

import React, { Component } from 'react';
import './test.css';
import 'font-awesome/css/font-awesome.min.css';
import Header from "../header/header";
import Sidebar from "../sidebar/sidebar";
import axios from "axios/index";
class AddTest extends Component {
    constructor(){
        super();
        this.state={
            categoryData:[],
            courseData:[],
            category:'',
            course:'',
            testFile:null,
            categoryE:'',
            courseE:'',
            testFileE:'',
            ErrorStatus:''

        };
        this.handleFile = this.handleFile.bind(this);
        this.handleCat = this.handleCat.bind(this);
        this.handleCourse = this.handleCourse.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleCat(e){
        e.preventDefault();
        this.setState({category:e.target.value});
        this.setState({ErrorStatus:''});
        this.setState({categoryE:''});
        let res = this.menu.value;
        axios({
            method: 'get',
            url: 'http://localhost:7777/api/getCourse/title/'+res,
        })
            .then((response) => {
                this.setState({courseData:response.data});
            })
            .catch((e) =>
            {
                this.setState({success:'Alert: Something went wrong'});
            });
    }
    handleCourse(e){
        let cour = this.course.value;
        this.setState({course:e.target.value});
        this.setState({courseE:''});
    }

    handleFile(e){
        this.setState({ testFile: e.target.files[0] });
        this.setState({testFileE:''});

    }
    validate = () => {
        let isError = false;
        const errors = {};
        if(this.state.category==='')
        {
            isError = true;
            errors.categoryE = 'Please select category';
        }
        if(this.state.course==='')
        {
            isError = true;
            errors.courseE = 'Please select course';
        }
        if(this.state.testFile===null)
        {
            isError = true;
            errors.testFileE = 'Please Select a File';
        }

        if(isError){
            this.setState({
                ...this.state,
                ...errors
            })
        }

        return isError;
    }
    handleSubmit(e)
    {
        e.preventDefault();
        const err = this.validate();
        if(!err)
        {
            var formData = {
                category:this.state.category,
                course:this.state.course,
            };
            const {category,course} = this.state;
            let fd = new FormData();
            fd.append('Test',this.state.testFile,this.state.testFile.name);
            fd.append('category',category);
            fd.append('course',course);
            console.log(fd);
           axios({
                method: 'post',
                url: 'http://localhost:7777/api/uploadTest',
                data: fd,
            })
                .then((response) => {
                    if(response.data=='Success')
                    {
                        alert('Test has been Added..!!');

                    }
                    else
                    {
                        alert('Something went wrong');
                        this.setState({category:''});
                    }
                    // this.setState({success:'Alert: '+response.data});
                })
                .catch((e) =>
                {
                    console.error(e);
                    this.setState({success:'Alert: Something went wrong'});
                });
        }
    }
    componentWillMount(){
        axios({
            method: 'get',
            url: 'http://localhost:7777/api/getCategory',
        })
            .then((response) => {
                this.setState({categoryData:response.data});
            })
            .catch((e) =>
            {
                console.error(e);
                this.setState({success:'Alert: Something went wrong'});
            });
    }
    render() {
        return (
            <div className="AddCourseCategory">
                <Header/>
                <section>
                    <div className="mainwrapper">
                        <Sidebar/>

                        <div className="mainpanel">
                            <div className="pageheader">
                                <div className="media">
                                    <div className="pageicon pull-left">
                                        <i className="fa fa-home"></i>
                                    </div>
                                    <div className="media-body">
                                        <ul className="breadcrumb">
                                            <li><a href="#"><i className="glyphicon glyphicon-home"></i></a></li>
                                            <li>Dashboard</li>
                                            <li>Manage Test</li>
                                        </ul>
                                        <h4>Upload Test</h4>
                                    </div>
                                </div>
                            </div>
                            <div className="contentpanel">
                                <div className="col-sm-5 col-sm-offset-3">
                                    <form encType="multipart/form-data" onSubmit={this.handleSubmit} className="form-horizontal form-bordered" method="post">
                                        <div className="form-group">
                                            <select ref = {(input)=> this.menu = input}  onChange={this.handleCat} className="form-control" name="category" data-toggle="tooltip" data-trigger="hover"
                                                    className="form-control tooltips" title="Select Course Category">
                                                <option selected disabled>Select Category</option>
                                                {
                                                    this.state.categoryData.map((item, index) =>(
                                                        <option key={index} value={item.category}>{item.category}</option>
                                                    ))
                                                }
                                            </select>
                                            <span className='field-error'>{this.state.categoryE}</span>
                                        </div>
                                        <div className="form-group">
                                        <select ref = {(input)=> this.course = input} onChange={this.handleCourse} className="form-control" name="course" data-toggle="tooltip" data-trigger="hover"
                                        className="form-control tooltips" title="Select Course ">
                                        <option selected disabled>Select Course</option>
                                        {
                                        this.state.courseData.map((item, index) =>(
                                        <option key={index} value={item.title}>{item.title}</option>
                                        ))
                                        }
                                        </select>
                                        <span className='field-error'>{this.state.courseE}</span>
                                        </div>
                                        <div className="form-group">
                                            <input onChange={this.handleFile} name="testFile"  type="file" placeholder="Select File Here"
                                                   title="Upload Test Here"
                                                   data-toggle="tooltip" data-trigger="hover"
                                                   className="form-control tooltips"/>
                                            <span className='field-error'>{this.state.testFileE}</span>
                                        </div>
                                        <div className="form-group">
                                            <button type="submit" className="btn btn-info">Save</button>
                                        </div>
                                    </form>
                                </div>
                            </div>


                        </div>
                    </div>

                </section>

            </div>
        );
    }
}

export default AddTest;

Answer 2

You're using document.getElementById to get the value of the date, why don't you try using this.state.startDate Since react DOM is virtual and not the real DOM, the value you'd be getting through document.getElementById would be null

const newUser = {
  firstname: this.state.firstname,
  lastname: this.state.lastname,
  email: this.state.email,
  password: this.state.password,
  dateofbirth: this.state.startDate
};