ReactJS Upload picture (multer), store in MySQL, then display it - mysql

Question

Im using reactJs,
Im working in localhost.
I managed to upload the picture,
Impossible to display the picture after the upload.
I managed to show the post data but not the picture
Here how I tried to display the picture :
{/* <img src="./16644430197124927082.png" alt='postimage'/> */}
{/* <img src={`${SERVER}`} alt="postimage"/> */}
{/* <img src={`${req.protocol}://${req.get('host')}/images/16644430197124927082.png`} /> */}
<div> <img src={val.image} alt="postphoto" /> </div>
Post.js (to get the data)
const express = require('express')
const router = express.Router()
const db = require('../config/db')
const multer = require('multer');
const path = require('path');
const fs = require('fs');
const { resolve } = require('path');
var storage = multer.diskStorage({
destination: 'client/src/images/',
filename: function (req, file, callback) {
callback(null, Date.now() + file.originalname);
}
});
var upload = multer({ storage: storage });
router.post('/upload', upload.single("file"), function (req, res, file) {
console.log(req.file, req.body);
const post = req.body.name;
const image = `${req.protocol}://${req.get('host')}/src/images/${req.file.filename}`;
console.log(image);
const username = req.body.username;
db.query(
"INSERT INTO post (post, image, username) VALUES (?, ?, ?);", [post, image, username],
(err, results) => {
console.log(err);
res.send(results);
}
);
});
router.get("/", (req, res) => {
db.query(
"SELECT * FROM socialmedia.post;",
(err, results) => {
console.log(err);
res.send(results);
}
);
});
Home.js (to display the data)
function Home() {
const [uploads, setUploads] = useState([]);
const [likes, setLikes] = useState([]);
useEffect(() => {
if (!localStorage.getItem("loggedIn")) {
localStorage.setItem("loggedIn", false);
}
}, []);
const getData = () => {
Axios.get("http://localhost:3001/post").then((response) => {
setUploads(response.data);
// response.data.map((val)=> {
// setLikes([...likes, val.likes]);
// });
});
console.log(likes);
}
useEffect(() => {
if (localStorage.getItem("loggedIn") === "true") {
getData(); } else {
alert("vous devez être connecté pour afficher ce contenu!");
window.location.href = "/login";
}
}, []);
const likePost = (id) => {
Axios.post("http://localhost:3001/post/like", { userLiking: localStorage.getItem('username'), postid: id }).then((response) => {
console.log("You liked this post", response);
getData();
});
};
const editPost = (id) => {
window.location.href = `/edit/${id}`;
console.log(id);
};
return (
<div className='home'>
{uploads.map((val) => {
return (
<div className='post'>
<div className='user'>{val.username}</div>
<div className='content'>{val.post}</div>
{/* <img src="./16644430197124927082.png" alt='postimage'/> */}
{/* <img src={`${SERVER}`} alt="postimage"/> */}
{/* <img src={`${req.protocol}://${req.get('host')}/images/16644430197124927082.png`} /> */}
<div> <img src={val.image} alt="postphoto" /> </div>
<ThumbUpAltIcon
id="likeButton"
onClick={() => {
likePost(val.id);
}}
/>
{val.likes}
<button onClick={() => {
editPost(val.id);
}}>modifier ce post</button>
{/* <div><img src="./../images/1665482108659ae7dcd7bcb1861f88999f1277775df23.jpg" alt="postphoto" /> </div> */}
</div>
)
})}
</div>
)
};
export default Home