CODEWITHSUNDEEP
node.jsreactjsmern
user14110207
user14110207

Reputation:

how to solve this Cannot POST error in MERN?

I am inserting two images along with the form data into MongoDB database. While both images are stored in my pc folder but all form data isn't uploading in the database.

error

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot POST /</pre>
</body>
</html>

in my console. Please help me how to solve that.

I have tried some previously asked question in stackOF.

app.js

const express = require("express")
const app = express()
const cors = require('cors');
const env = require("dotenv")

const port = 5000
env.config({path: "../server/config.env"})
require("../server/db/conn")
app.use(cors());
app.use(express.json())
app.use(require("../server/router/auth"))


app.listen(port, (err) => {
    if (err) {
        return console.error(err);
    }
    return console.log(`server is listening on ${port}`);
});

module.exports = "conn"

register.js(frontend)


const Register = () => {
    const [newUser, setNewUser] = useState({
        school: "",
        address: "",
        photo: "",
        photoone: ""
    });

    const handleSubmit = (e) => {
        e.preventDefault();
        const formData = new FormData();
        formData.append("school", newUser.school);
        formData.append("photo", newUser.photo);
        formData.append("photoone", newUser.photoone)
        formData.append("address", newUser.address);


        axios({
            method: "post",
            url: "/teacher",
            data: formData,
            headers: { "Content-Type": "multipart/form-data" },
        })
            .then((response) => {
                console.log(response)
            }).then((data) => {
                console.log(data)
            }).catch((error) => {
                if (error.response) {
                    console.log(error.response.data)
                }
            })
    };

    const handleChange = (e) => {
        setNewUser({ ...newUser, [e.target.name]: e.target.value });
    };

    const handlePhoto = (e) => {
        setNewUser({ ...newUser, photo: e.target.files[0] });
    };

    const handlePhotoone = (e) => {
        setNewUser({ ...newUser, photoone: e.target.files[0] });
    };

    return (
        <>
            <div className="container main">
                <div className="row">
                    <div className="col-sm-6 col-md-6 col-lg-6">
                        <form onSubmit={handleSubmit} encType="multipart/form-data">
                            <div class="mb-3">
                                <label class="form-label">
                                    Your school
                                </label>
                                <input
                                    type="text"
                                    class="form-control"
                                    id="exampleInputPassword1"
                                    id="school"
                                    name="school"
                                    value={newUser.school}
                                    onChange={handleChange}
                                />
                            </div>

                            <div class="input-group mb-3">
                                <input
                                    type="file"
                                    id="pic"
                                    accept=".png, .jpg, .jpeg"
                                    name="photo"
                                    onChange={handlePhoto} type="file" class="form-control" id="inputGroupFile02" />
                            </div>

                            <div class="input-group mb-3">
                                <input
                                    type="file"
                                    id="pic"
                                    placeholder="second photo"
                                    accept=".png, .jpg, .jpeg"
                                    name="photoone"
                                    onChange={handlePhotoone} type="file" class="form-control" id="inputGroupFile01" />
                            </div>





                            <div class="mb-3">
                                <label for="exampleInputEmail1" class="form-label">
                                    your address
                                </label>
                                <input
                                    type="text"
                                    id="address"
                                    name="address"
                                    value={newUser.address}
                                    onChange={handleChange}
                                    class="form-control"
                                    aria-describedby="emailHelp"
                                />


                            </div>
                            <button
                                value="register"

                                type="submit"
                                class="btn btn-primary"
                            >
                                Submit
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </>
    );
};

auth.js(backend)

const mongoose = require("mongoose")
const express = require("express")
const router = express()
require("../db/conn")
const User = require("../model/userSchema")
const Teacher = require("../model/userSchemaTeacher")
const multer = require('multer');
let path = require('path');
let fs = require("fs-extra");



const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        let schoolname = req.body.school;
        let path = `C:/Users/kumar/Desktop/mern/server/images/${schoolname}`;

        fs.mkdirsSync(path);
        cb(null, path);
        // cb(null, 'images');
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname);

    }
});


const fileFilter = (req, file, cb) => {
    const allowedFileTypes = ['image/jpeg', 'image/jpg', 'image/png'];
    if (allowedFileTypes.includes(file.mimetype)) {
        cb(null, true);
    } else {
        cb(null, false);
    }
}

let upload = multer({ storage, fileFilter });


router.route('/teacher').post(upload.fields([{
    name: "photo", maxCount: 1
}, {
    name: "photoone", maxCount: 1
}
])), (req, res) => {

    const school = req.body.school;
    const photo = req.file.filename
    const photoone = req.file.filename
    const address = req.body.address;


    const newUserData = {
        school,
        photo,
        photoone,
        address,

    }

    const newUser = new Teacher(newUserData);

    newUser.save()
        .then(() => res.json('User Added'))
        .catch((err) => {
            console.log(err);
        });
}

Please see how to solve that?

Upvotes: 1

Views: 1164

Answers (1)

Heartbit
Heartbit

Reputation: 1836

The route you are trying to POST your form data is not defined please set your route path like this:

router.post('/teacher',upload.fields([{
    name: "photo", maxCount: 1
}, {
    name: "photoone", maxCount: 1
}
]), (req, res) => {

    const school = req.body.school;
    const photo = req.files['photo'][0]
    const photoone = req.files['photoone'][0]
    const address = req.body.address;


    const newUserData = {
        school,
        photo,
        photoone,
        address,

    }

    const newUser = new Teacher(newUserData);

    newUser.save()
        .then(() => res.json('User Added'))
        .catch((err) => {
            console.log(err);
        });
})
...

Upvotes: 1

Related Questions