Menu
In my code i want to send a image as response on button click. But the problem is that it shows that there is no image like that. Also i am saving image at that time only by user and it is being saved in a folder names images in public folder. That's working fine. I want my image to be printed that is being submitted by user.
Here is my Home.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="/Css/style.css">
</head>
<body>
<form action='/post' method="POST" enctype="multipart/form-data">
<input type="file" name="image" style="width:300px; border: 1px solid #ccc;"><br><br>
<button type="submit" class="btn">Upload</button>
<div id="x"></div>
</form>
<script type="text/javascript">
</script>
</body>
</html>
And here is my index.js:
const express = require('express')
const app = express()
const bodyparser = require('body-parser')
const fileUpload = require('express-fileupload')
const mysql = require('mysql')
app.use(express.static("./public"))
app.set('view engine', 'ejs')
app.use(bodyparser.json())
app.use(bodyparser.urlencoded({
extended: true
}))
app.use(fileUpload())
const db = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database: "testing"
})
db.connect(function (err) {
if (err) {
return console.error('error: ' + err.message);
}
console.log('Connected to the MySQL server.');
})
app.get("/", (req, res) => {
res.render('Home');
})
app.post("/post", (req, res) => {
var file = req.files.image
if (file.mimetype == "image/jpeg" || file.mimetype == "image/png" || file.mimetype == "image/gif") {
var imageName = file.name;
console.log(imageName);
var imgsrc = 'http://127.0.0.1:3000/images/' + imageName
var insertData = "INSERT INTO users_file(file_src)VALUES(?)"
db.query(insertData, [imgsrc], (err, result) => {
if (err) throw err
file.mv('public/images/' + imageName)
res.send("<img src=`public/images/${imageName}`>")
})
}
}
329
asked Jan 18 '26 12:01
Try using res.sendFile(filepath) as response
file.mv() is asynchronous function. That's why it shows "no such file"
.
here is what your /post should look like:
app.post("/post", (req, res) => {
var file = req.files.image
if (file.mimetype == "image/jpeg" || file.mimetype == "image/png" || file.mimetype == "image/gif") {
var imageName = file.name;
console.log(imageName);
var imgsrc = 'http://127.0.0.1:3000/images/' + imageName
var insertData = "INSERT INTO users_file(file_src)VALUES(?)"
db.query(insertData, [imgsrc], async (err, result) => { // <-- notice the async here
if (err) throw err
await file.mv('public/images/' + imageName); // <-- added await
res.sendFile(`public/images/${imageName}`); // <-- here send the file directly
})
}
})
**
If you want to use res.send() instead of res.sendFile(); you can try following:
app.post("/post", (req, res) => {
var file = req.files.image
if (file.mimetype == "image/jpeg" || file.mimetype == "image/png" || file.mimetype == "image/gif") {
var imageName = file.name;
console.log(imageName);
var imgsrc = 'http://127.0.0.1:3000/images/' + imageName
var insertData = "INSERT INTO users_file(file_src)VALUES(?)"
db.query(insertData, [imgsrc], async (err, result) => { // <-- notice the async here
if (err) throw err
await file.mv('public/images/' + imageName); // <-- added await
res.send(`<img src="public/images/${imageName}">`); //<-- edited this line
})
}
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
