title: Upload an image to MongoDB using Nodejs, Express, Mongoose and React
body: <p>I'm working on a simple web app to practice my newly developed skills in web development. I'm trying to upload some information on a book with its' image to MongoDB using Nodejs, Express, Mongoose and React. So far, I was able to upload all the info to MongoDB by clicking a submit button. But whenever I'm trying to add an image to the mongoose schema, post request is not working. I couldn't figure out the problem with my code.
  Here is the code for Book model:</p>
  
  <pre><code>const mongoose = require("mongoose");
  
  const BookSchema = new mongoose.Schema({
    image: {
      data: Buffer,
      contentType: String
    },
    title: {
      type: String,
      required: true
    },
    isbn: {
      type: String,
      required: true
    },
    author: {
      type: String,
      required: true
    },
    description: {
      type: String
    },
    published_date: {
      type: Date
    },
    publisher: {
      type: String
    },
    updated_date: {
      type: Date,
      default: Date.now
    }
  });
  
  module.exports = Book = mongoose.model("book", BookSchema);
  </code></pre>
  
  <p>Here is the code for post request:</p>
  
  <pre><code>router.post("/", (req, res) =&gt; {
    var title= req.body.title;
    var isbn = req.body.isbn;
    var author = req.body.author;
    var description = req.body.description;
    var published_date= req.body.published_date;
    var publisher = req.body.publisher;
    var updated_date = req.body.updated_date;
  
    var imgPath = req.file.path;
    var image = Book.image.data = fs.readFileSync(imgPath);
    Book.image.contentType = 'image/jpg';
  
    var newBook = {image: image, title: title, isbn: isbn, author: author, description: description, 
    published_date: published_date, publisher: publisher, updated_date: updated_date};
    Book.create(newBook, function(err, newlyCreated){
      if (err) {
          console.log(err);
      } else {
          console.log(newlyCreated);
      }
   });
  
  })
  </code></pre>
  
  <p>Here is the code for the front-end using React:</p>
  
  <pre><code>import React, { Component } from "react";
  import { Link } from "react-router-dom";
  import "../App.css";
  import axios from "axios";
  
  class CreateBook extends Component {
    constructor() {
      super();
      this.state = {
        image: "",
        title: "",
        isbn: "",
        author: "",
        description: "",
        published_date: "",
        publisher: ""
      };
      this.onFileChange = this.onFileChange.bind(this);
      this.onSubmit = this.onSubmit.bind(this);
    }
  
    onChange = e =&gt; {
      this.setState({ [e.target.name]: e.target.value });
    };
  
    onFileChange = e =&gt; {
      this.setState({ [e.target.name]: e.target.files[0] })
    }
  
    onSubmit = e =&gt; {
      e.preventDefault();
      const formdata = new FormData()
  
      formdata.append('image', this.state.image)
      formdata.append('title', this.state.title);
      formdata.append('isbn', this.state.isbn,);
      formdata.append('author', this.state.author);
      formdata.append('description', this.state.description);
      formdata.append('published_date', this.state.published_date);
      formdata.append('publisher', this.state.publisher);
  
  
      axios
        .post("http://localhost:8082/api/books", formdata)
        .then(res =&gt; {
          console.log(res);
          this.setState({
            image: "",
            title: "",
            isbn: "",
            author: "",
            description: "",
            published_date: "",
            publisher: ""
          });
          this.props.history.push("/");
        })
        .catch(err =&gt; {
          console.log("Error in CreateBook!");
        });
    };
  
    render() {
      return (
        &lt;div className="CreateBook"&gt;
          &lt;div className="container"&gt;
            &lt;div className="row"&gt;
              &lt;div className="col-md-8 m-auto"&gt;
                &lt;br /&gt;
                &lt;Link to="/" className="btn btn-outline-warning float-left"&gt;
                  Show BooK List
                &lt;/Link&gt;
              &lt;/div&gt;
              &lt;div className="col-md-8 m-auto"&gt;
                &lt;h1 className="display-4 text-center"&gt;Add Book&lt;/h1&gt;
                &lt;p className="lead text-center"&gt;Create new book&lt;/p&gt;
  
                &lt;form noValidate onSubmit={this.onSubmit}&gt;
                  &lt;div className="form-group"&gt;
                    &lt;input
                      type="file"
                      placeholder="Browse Image"
                      name="image"
                      className="form-control"
  
                      onChange={this.onFileChange}
                    /&gt;
                  &lt;/div&gt;
                  &lt;button type="button" className="btn btn-primary mb-3"&gt;
                    Upload
                  &lt;/button&gt;
                  &lt;br /&gt;
                  &lt;div className="form-group"&gt;
                    &lt;input
                      type="text"
                      placeholder="Title of the Book"
                      name="title"
                      className="form-control"
                      value={this.state.title}
                      onChange={this.onChange}
                    /&gt;
                  &lt;/div&gt;
                  &lt;br /&gt;
  
                  &lt;div className="form-group"&gt;
                    &lt;input
                      type="text"
                      placeholder="ISBN"
                      name="isbn"
                      className="form-control"
                      value={this.state.isbn}
                      onChange={this.onChange}
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className="form-group"&gt;
                    &lt;input
                      type="text"
                      placeholder="Author"
                      name="author"
                      className="form-control"
                      value={this.state.author}
                      onChange={this.onChange}
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className="form-group"&gt;
                    &lt;input
                      type="text"
                      placeholder="Describe this book"
                      name="description"
                      className="form-control"
                      value={this.state.description}
                      onChange={this.onChange}
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className="form-group"&gt;
                    &lt;input
                      type="date"
                      placeholder="published_date"
                      name="published_date"
                      className="form-control"
                      value={this.state.published_date}
                      onChange={this.onChange}
                    /&gt;
                  &lt;/div&gt;
                  &lt;div className="form-group"&gt;
                    &lt;input
                      type="text"
                      placeholder="Publisher of this Book"
                      name="publisher"
                      className="form-control"
                      value={this.state.publisher}
                      onChange={this.onChange}
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;input
                    type="submit"
                    className="btn btn-outline-warning btn-block mt-4"
                  /&gt;
                &lt;/form&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default CreateBook;
  </code></pre>
  
  <p>I'll highly appreciate any suggestions. Thanks in advance.</p>