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:
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); Here is the code for post request:
router.post("/", (req, res) => { 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); } }); }) Here is the code for the front-end using React:
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 => { this.setState({ [e.target.name]: e.target.value }); }; onFileChange = e => { this.setState({ [e.target.name]: e.target.files[0] }) } onSubmit = e => { 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 => { console.log(res); this.setState({ image: "", title: "", isbn: "", author: "", description: "", published_date: "", publisher: "" }); this.props.history.push("/"); }) .catch(err => { console.log("Error in CreateBook!"); }); }; render() { return ( <div className="CreateBook"> <div className="container"> <div className="row"> <div className="col-md-8 m-auto"> <br /> <Link to="/" className="btn btn-outline-warning float-left"> Show BooK List </Link> </div> <div className="col-md-8 m-auto"> <h1 className="display-4 text-center">Add Book</h1> <p className="lead text-center">Create new book</p> <form noValidate onSubmit={this.onSubmit}> <div className="form-group"> <input type="file" placeholder="Browse Image" name="image" className="form-control" onChange={this.onFileChange} /> </div> <button type="button" className="btn btn-primary mb-3"> Upload </button> <br /> <div className="form-group"> <input type="text" placeholder="Title of the Book" name="title" className="form-control" value={this.state.title} onChange={this.onChange} /> </div> <br /> <div className="form-group"> <input type="text" placeholder="ISBN" name="isbn" className="form-control" value={this.state.isbn} onChange={this.onChange} /> </div> <div className="form-group"> <input type="text" placeholder="Author" name="author" className="form-control" value={this.state.author} onChange={this.onChange} /> </div> <div className="form-group"> <input type="text" placeholder="Describe this book" name="description" className="form-control" value={this.state.description} onChange={this.onChange} /> </div> <div className="form-group"> <input type="date" placeholder="published_date" name="published_date" className="form-control" value={this.state.published_date} onChange={this.onChange} /> </div> <div className="form-group"> <input type="text" placeholder="Publisher of this Book" name="publisher" className="form-control" value={this.state.publisher} onChange={this.onChange} /> </div> <input type="submit" className="btn btn-outline-warning btn-block mt-4" /> </form> </div> </div> </div> </div> ); } } export default CreateBook; I'll highly appreciate any suggestions. Thanks in advance.
