upload image file from react to nodejs - node.js

Question

This is react code
import React, { Component } from "react";
import Webcam from "react-webcam";
import * as faceapi from "face-api.js";
import { browserHistory } from "react-router";
import axios from "axios";
export default class WebCamPicure extends Component {
constructor() {
super();
this.state = {
selectedFile: null
};
fileSelectedHandler = (event) => {
console.log(event.target.files[0]);
this.setState({
selectedFile: event.target.files[0]
});
};
fileUploadHandler = () => {
const fd = new FormData();
fd.append("image", this.state.selectedFile, this.state.selectedFile.name);
fetch("http://localhost:5000/upload", {
method: "POST",
headers: { "Content-Type": "multipart/form-data" },
mode: "no-cors",
body: fd
});
};
render() {
return (
<div
className="App"
style={{
display: "flex",
flexDirection: "column",
alignItems: "center"
}}
>
<div class="upload">
<input type="file" onChange={this.fileSelectedHandler} />
<button onClick={this.fileUploadHandler}>upload</button>
</div>
</div>
);
}
}
this is node server code
const express = require("express");
var mysql = require("mysql");
const axios = require("axios");
var connection = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database: "expression_detection"
});
connection.connect((err) => {
if (!!err) {
console.log("error");
} else {
console.log("connected");
}
});
const app = express();
app.get("/api/customers", (req, res) => {
const customer = [
{ id: 1, firstname: "jhon", lastname: "doe" },
{ id: 2, firstname: "praveen", lastname: "smith" },
{ id: 3, firstname: "kumar", lastname: "swason" }
];
res.json(customer);
});
app.get("/", (req, res) => {
connection.query("SELECT * FROM individual_result", (error, row, fields) => {
if (!!error) {
console.log("Error in the query");
} else {
console.log("seccessful query");
console.log(row);
}
});
res.json("hello");
});
app.post("/upload", (req, file, res) => {
console.log("got it");
console.log(req);
// console.log(res);
});
const port = 5000;
app.listen(port, () => {
console.log("server started on port " + port);
});
I am trying upload image to nodejs server but i not able to recevie the upload file in server.I uploaded my code above please help me to solve this.now i need to get the uploaded file in server and store in database
I am trying upload image to nodejs server but i not able to recevie the upload file in server.I uploaded my code above please help me to solve this.now i need to get the uploaded file in server and store in database

Answer 1

You will need to configure a dedicated handler to work with multipart/form-data.
You can use multer.
Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files.