EDIT
I removed app.use(fileUpload());. So it finally worked.
But unfortunately in the folder images of the backend I only get these files c43jnfeh734hdfudf.
For this reason, nothing is displayed in the frontend.
const imagePath = req.file.path
const description = req.file.originalname
console.log(imagePath)
console.log(description)
images\c43jnfeh734hdfudf
empty
I have a problem. I would like to save images with a fixed URL on my server.
I found the following code snippet, but unfortunately it doesn't work.
I get the following error in the backend: 'TypeError: Cannot read property 'path' of undefined'.
The following values are 'undefined'. const imagePath = req.file.path const description = req.body.description
How can I save an image as a URL on the server?
Here is the tutorial, where I found the code snippet https://github.com/meech-ward/sammeechward.com_mdx/blob/master/content/articles/uploading-images-express-and-react/index.mdx
React
import { useState } from 'react'
import axios from 'axios'
export default function App() {
const [file, setFile] = useState()
const [description, setDescription] = useState("")
const [image, setImage] = useState()
const submit = async event => {
event.preventDefault()
const formData = new FormData()
formData.append("image", file)
formData.append("description", description)
const result = await axios.post('/api/images', formData, { headers: {'Content-Type': 'multipart/form-data'}})
setImage(result.data.imagePath)
}
return (
<div className="App">
<form onSubmit={submit}>
<input
filename={file}
onChange={e => setFile(e.target.files[0])}
type="file"
accept="image/*"
></input>
<input
onChange={e => setDescription(e.target.value)}
type="text"
></input>
<button type="submit">Submit</button>
</form>
{ image && <img src={image}/>}
</div>
)
}
Backend
const express = require('express')
const fs = require('fs')
const multer = require('multer')
const upload = multer({ dest: 'images/' })
const app = express()
// app.use('/images', express.static('images'))
app.get('/images/:imageName', (req, res) => {
// do a bunch of if statements to make sure the user is
// authorized to view this image, then
const imageName = req.params.imageName
const readStream = fs.createReadStream(`images/${imageName}`)
readStream.pipe(res)
})
app.post('/api/images', upload.single('image'), (req, res) => {
const imagePath = req.file.path
const description = req.body.description
// Save this data to a database probably
console.log(description, imagePath)
res.send({description, imagePath})
})
app.listen(8080, () => console.log("listening on port 8080"))
routes/Test.js
const express = require("express");
const router = express.Router();
module.exports = router;
const auth_util = require("../utilities/auth_util");
const pgclient = require("../app");
const multer = require('multer')
const upload = multer({ dest: 'images/' })
// app.use('/images', express.static('images'))
router.get('/images/:imageName', (req, res) => {
// do a bunch of if statements to make sure the user is
// authorized to view this image, then
const imageName = req.params.imageName
const readStream = fs.createReadStream(`images/${imageName}`)
readStream.pipe(res)
})
router.post('/api/images', upload.single('image'), (req, res) => {
console.log(req.file)
console.log(req.files)
const imagePath = req.file.path
const description = req.body.description
// Save this data to a database probably
console.log(description, imagePath)
res.send({ description, imagePath })
})
// added the lines below
const path = require("path");
router.use(express.static(path.join(__dirname, 'build')));
router.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.js
const express = require("express");
const cors = require("cors");
//const fileUpload = require("express-fileupload");
const session = require("express-session");
const { Pool } = require("pg");
const app = express();
app.use(express.json());
//app.use(fileUpload());
//------------------------------CORS settings------------------------------
var whitelist = [
"http://localhost:3000",
"http://localhost:3001",
];
var corsOptions = {
credentials: true,
exposedHeaders: ["set-cookie"],
origin: function (origin, callback) {
if (whitelist.indexOf(origin) !== -1 || !origin) {
callback(null, true);
} else {
// callback(null, true)
callback(new Error("Not allowed by CORS!!"));
}
},
};
app.options("*", cors(corsOptions));
const pgclient = new Pool({
user: process.env.DB_USER,
host: process.env.DB_HOST,
database: process.env.DB_DATABASE,
password: process.env.DB_PASSWORD,
port: process.env.DB_PORT,
});
module.exports = pgclient;
app.set("trust proxy", 1);
const testRoute = require("./routes/test");
app.use("/test", cors(corsOptions), testRoute);
app.get("/", cors(corsOptions), (req, res, next) => {
res.send("Welcome");
});
module.exports = app;
