This is my register page and here ı m handling multipart form ...
import React, { useEffect, useState } from "react";
import { Next } from "react-bootstrap/esm/PageItem";
import { Link } from "react-router-dom";
import CheckedCompany from "./includes/CheckedCompany";
import axios from "axios";
export default function Sigin() {
const [companyType, setCompanyType] = useState(false);
const clickHandlerCompanyType = (event) => {
setCompanyType(!companyType);
console.log("Im here");
};
const [checked, setchecked] = useState(false);
const checkedPerson = (event) => {
setchecked(!checked);
};
const [name, setName] = useState("");
const [surname, setSurname] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [image, setImage] = useState("");
const submitHandler = (e) => {
axios({
url: "http://localhost:5000/user/register",
method: "POST",
data: {
name,
surname,
email,
password,
userType: checked ? "2" : "1",
image,
},
headers: {
"Content-Type": "multipart/form-data",
},
withCredentials: true,
crossDomain: true,
})
.then((res) => console.log(res))
.catch((err) => console.log(err));
};
return (
<div class="container pt-5 mb-2">
<div class="row">
<div class=" container col-md-12 ">
<div class=" container card my-1">
<h5 class="card-title text-center">Yeni Kayıt</h5>
<div class="card-body">
<div className="row ">
<div className="col-6 ps-5">
<div class="mb-3 form-check">
{" "}
<label class="form-check-label" for="exampleCheck2">
Bireysel
</label>
<input
checked={!checked}
onChange={checkedPerson}
type="radio"
class="form-check-input"
name="flexRadioDefault"
/>
</div>
</div>
<div className="col-6 ps-5">
<div class="mb-3 form-check">
<input
onChange={checkedPerson}
type="radio"
class="form-check-input"
name="flexRadioDefault"
></input>
<label class="form-check-label" for="exampleCheck2">
İşletme
</label>
</div>
</div>
</div>
<form onSubmit={submitHandler}>
<div class="mb-3">
<label for="formFile" class="form-label">
Resim
</label>
<input
class="form-control"
type="file"
name="image"
onChange={(e) => {
setImage(e.target.files[0]);
console.log(e.target.files[0]);
}}
/>
</div>
<div class="mb-3">
<label for="name" class="form-label">
Adınız
</label>
<input
type="text"
class="form-control"
name="name"
onChange={(e) => setName(e.target.value)}
></input>
</div>
<div class="mb-3">
<label for="surname" class="form-label">
Soyadınız
</label>
<input
type="text"
class="form-control"
name="surname"
onChange={(e) => setSurname(e.target.value)}
></input>
</div>
<div class="mb-3">
<label for="email" class="form-label">
E-posta adresiniz
</label>
<input
type="email"
class="form-control"
name="email"
onChange={(e) => setEmail(e.target.value)}
></input>
</div>
<div className="mb-3">
{" "}
<label for="password" class="form-label">
Şifre
</label>
<input
type="password"
class="form-control"
name="password"
aria-describedby="passwordHelp"
onChange={(e) => setPassword(e.target.value)}
/>
</div>
{checked
? CheckedCompany({
companyType,
clickHandlerCompanyType,
setCompanyType,
})
: null}
<div class="mb-3">
<div id="passwordHelp" class="form-text">
<a href="#">şifremi unuttum</a>
</div>
</div>
<div class="mb-3 form-check">
<input
type="checkbox"
class="form-check-input"
id="exampleCheck1"
></input>
<label class="form-check-label" for="exampleCheck1">
<a href="#"> Bireysel Üyelik Sözleşmesini ve Ekleri'ni</a>{" "}
Kabul ediyorum
</label>
</div>
<div class="mb-3 form-check">
<input
type="checkbox"
class="form-check-input"
id="exampleCheck2"
></input>
<label class="form-check-label" for="exampleCheck2">
İletişim bilgilerime kampanya, tanıtım ve reklam içerikli
ticari elektronik ileti gönderilmesine, bu amaçla kişisel
verilerimin işlenmesine ve tedarikçilerinizle paylaşılmasına
izin veriyorum
</label>
</div>
<p class="card-text text-center">
<button type="submit" class="btn btn-primary">
Üye Ol
</button>
</p>
</form>
</div>
</div>
<div class="card">
<div class="card-body">
Bu sayfadaki bilgiler 4teker.com üyeliği için alınmaktadır.
Kişisel verilerin korunması hakkında detaylı bilgiye{" "}
<a href="#">buradan</a> ulaşabilirsiniz.
</div>
</div>
</div>
</div>
</div>
);
}
I'm sending the form with axios to api
const express = require("express");
const app = express();
const cors = require("cors");
const cookieParser = require("cookie-parser");
const session = require("express-session");
const mongoDbStore = require("connect-mongodb-session")(session);
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
require("dotenv").config();
const port = process.env.PORT;
//Routes
const postRoutes = require("./routes/post.route");
const userRoutes = require("./routes/user.route");
//Middlewares
const store = new mongoDbStore({
uri: process.env.ATLAS_URI,
collection: "Sessions",
});
const multer = require("multer");
const path = require("path");
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "./public/img/");
},
filename: function (req, file, cb) {
cb(
null,
file.fieldname + "-" + Date.now() + path.extname(file.originalname)
);
},
});
app.use(express.static("public"));
app.use(multer({ storage }).single("image"));
app.use(
session({
secret: "keyboard cat",
resave: false,
saveUninitialized: false,
cookie: {
maxAge: 36000000,
},
store,
})
);
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(cors({ credentials: true, origin: "http://localhost:3000" }));
app.use(express.json());
//DB
const uri = process.env.ATLAS_URI;
mongoose.connect(uri, {
useNewUrlParser: true,
useUnifiedTopology: true,
useCreateIndex: true,
});
const connection = mongoose.connection;
connection.once("open", () => {
console.log("Db is connected");
});
app.use("/user", userRoutes);
app.use("/post", postRoutes);
app.listen(port, () => {
console.log("Port 5000 is listening...");
});
I mean there shouldnt be any problem ,but there it is :d Can you guys help me ? Btw error is on below.
Error: Multipart: Boundary not found
at new Multipart (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\busboy\lib\types\multipart.js:58:11)
at Multipart (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\busboy\lib\types\multipart.js:26:12)
at Busboy.parseHeaders (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\busboy\lib\main.js:71:22)
at new Busboy (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\busboy\lib\main.js:22:10)
at multerMiddleware (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\multer\lib\make-middleware.js:33:16)
at Layer.handle [as handle_request] (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\express\lib\router\index.js:317:13)
at C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\express\lib\router\index.js:284:7
at Function.process_params (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\express\lib\router\index.js:335:12)
at next (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\express\lib\router\index.js:275:10)
at serveStatic (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\serve-static\index.js:75:16)
at Layer.handle [as handle_request] (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\express\lib\router\index.js:317:13)
at C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\express\lib\router\index.js:284:7
at Function.process_params (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\express\lib\router\index.js:335:12)
at next (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\express\lib\router\index.js:275:10)
