title: How to resolve post request failure ReactJS and ExpressJS
body: <p>so I am learning on how Express and Mongoose works so I am trying to make a Post request to the server-side and then save the contents to the MongoDB so I do not know the is no error that is thrown but when I check the DB it creates an entry but only with empty entries, nothing that is coming from the client-side/form is being saved by to the data base</p>
  <p>when I console log out the data received on the server side this what I am getting:</p>
  <p><code>Results:  { _id: 5f49d245afcfaa2168ad4d3f, __v: 0 }</code></p>
  <p>Just this empty entry with an Id</p>
  <p><strong>Code to my server-side:</strong></p>
  <pre><code>//Initializing all dependencies
  const express = require(&quot;express&quot;);
  const mongoose = require(&quot;mongoose&quot;);
  const bodyParser = require(&quot;body-parser&quot;);
  const app = express();
  const cors = require(&quot;cors&quot;);
  
  app.use(cors());
  //Getting the body-paser set up for post request
  app.use(bodyParser.json());
  
  //Making a connection to DB via mongoose
  mongoose.connect(&quot;mongodb://localhost:27017/LectureVideos&quot;, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  });
  
  /* 
    - Creating my database schema that will be having the following contents
    ----&gt;Schema:
    -------&gt;1. lecturer : type --&gt; String
    -------&gt;2. module   : type --&gt; String
    -------&gt;3. video    : type --&gt; Buffer/File
  */
  const lectureSchema = mongoose.Schema({
    lecturer: String,
    module: String,
    video: {
      data: Buffer,
      contentType: String,
    },
  });
  
  const LectureVideos = mongoose.model(&quot;LectureVideos&quot;, lectureSchema);
  
  app.post(&quot;/upload-lecture/&quot;, (request, response) =&gt; {
    const addLectureVideo = new LectureVideos({
      lecturer: request.body.lecturer,
      module: request.body.module,
      video: request.body.video,
    });
  
    addLectureVideo.save((error, data) =&gt; {
      if (error) {
        return console.log(error);
      }
      console.log(data);
    });
  });
  
  app.listen(3001);
  </code></pre>
  <p><strong>Code to my client-side where the uploading system is handled</strong></p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  class Upload extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        lecturer: &quot;&quot;,
        module: &quot;&quot;,
        video: null,
      };
      this.handleChange = this.handleChange.bind(this);
      this.uploadVideo = this.uploadVideo.bind(this);
    }
  
    handleChange(e) {
      this.setState({
        [e.target.id]: e.target.value,
      });
    }
  
    uploadVideo(e) {
      e.preventDefault();
      const form_data = new FormData();
      form_data.append(&quot;lecturer&quot;, this.state.lecturer);
      form_data.append(&quot;module&quot;, this.state.module);
      form_data.append(&quot;video&quot;, this.state.video);
      const url = &quot;http://127.0.0.1:3001/upload-lecture/&quot;;
      axios
        .post(url, form_data)
        .then((response) =&gt; {
          console.log(response);
        })
        .catch((error) =&gt; {
          console.log(error);
        });
    }
  
    render() {
      return (
        &lt;div className=&quot;form__container&quot;&gt;
          &lt;form className=&quot;form&quot; onSubmit={this.uploadVideo}&gt;
            &lt;h3&gt;Lecturer&lt;/h3&gt;
            &lt;input
              type=&quot;text&quot;
              id=&quot;lecturer&quot;
              onChange={this.handleChange}
              placeholder=&quot;Lecturer&quot;
            /&gt;
  
            &lt;h3&gt;Module&lt;/h3&gt;
            &lt;input
              type=&quot;text&quot;
              id=&quot;module&quot;
              onChange={this.handleChange}
              placeholder=&quot;module&quot;
            /&gt;
  
            &lt;h3&gt;Video&lt;/h3&gt;
            &lt;input type=&quot;file&quot; id=&quot;video&quot; onChange={this.handleChange} /&gt;
  
            &lt;button onClick={this.uploadVideo}&gt;Upload Video&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Upload;
  </code></pre>