Hi,
I keep receiving the below error when I want to create a new post. I see that the photo uploads successfully to my “public/images” but I can’t successfully create a new post.
Could it be an issue with my droplet? I have already increased file size in nginx, increased timeout in nginx, tried different browsers, I did a console.log for req.file and it exists, and I did a console.log of post and it does show that an object is created (referring to PostService line in API). I’m not sure where the error could be.
r.js:247 POST http://DO droplet/api/blog/post/newPost 502 (Bad Gateway) dispat
Post Model
const Schema = mongoose.Schema
let postSchema = new Schema({
user: { type: Schema.Types.ObjectId, ref: 'User' },
title: { type: String, minLength: 5, required: true },
category: { type: String, required: true },
photo: { type: String },
post: { type: String, minLength: 5, required: true },
timestamp: { type: String, default: () => moment().format("MMMM Do YYYY, h:mm:ss a") }
})
PostController
const Post = require('../models/postSchema')
const multer = require('multer');
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'public/images')
},
filename: function (req, file, cb) {
cb(null, Date.now() + "-" + file.originalname)
}
})
const imageFilter = function (req, file, cb) {
if (file.originalname.match(/\.(jpg|jpeg|png|gif)$/)) {
cb(null, true);
} else {
cb(new Error("OnlyImageFilesAllowed"), false);
}
}
class PostService {
_// create_
_static_ create(obj) {
let post = new Post(obj)
return post.save()
}
}
API
_/* Multer for Photos */_
const multer = require('multer');
const upload = multer({
storage: postsController.storage,
fileFilter: postsController.imageFilter
});
_// Create Posts_
router.post('/post/newPost', [upload.single('photo'),
check("title", "A title is required and must be at least 5 characters long")
.not()
.bail()
.isEmpty()
.bail()
.isLength({ min: 5 })
.bail()
.trim(),
check("category", "A category is required")
.not()
.bail()
.isEmpty()
.bail(),
check("post", "A post is required and must be at least 5 characters long")
.not()
.bail()
.isEmpty()
.bail()
.isLength({ min: 5 })
.bail()
.trim(),
], (req, res, next) => {
const errors = validationResult(req)
if (!errors.isEmpty()) {
_// If there are errors, delete any uploaded files_
if (req.file) {
fs.unlink(req.file.path, (err) => {
if (err) {
console.error(err)
}
})
}
return res.status(400).json({ errors: errors.array() })
} else {
const post = {
user: req.body.user,
title: req.body.title,
category: req.body.category,
post: req.body.post
};
if (req.file) {
post.photo = req.file.filename
}
PostService.create(post)
.then((post) => {
res.status(201);
res.json(post);
}).catch((err) => {
fs.unlink(req.file.path)
console.log(err)
});
}
});
FRONTEND
const CreatNewPost = () => {
const { user } = useSelector((state) => state.auth)
const { register, handleSubmit, reset, formState: { errors } } = useForm({
defaultValues: {
user: user ? user.currentUser.id : null,
title: "",
category: "",
post: "",
photo: ""
}
});
const [errorsServer, setErrorsServer] = useState("")
const submitNewPost = (data) => {
const formData = new FormData()
formData.append('user', data.user);
formData.append('title', data.title);
formData.append('category', data.category);
formData.append('post', data.post);
formData.append('photo', data.photo[0]);
(_async_ () => {
try {
await axios.post(`${process.env.REACT_APP_URL}/api/blog/post/newPost`, formData)
toast.success("View your profile for your new post!")
reset()
} catch (error) {
if (error.response) setErrorsServer(error.response.data.errors);
toast.error("Unable to create new post")
}
})();
if (errorsServer) setErrorsServer('')
}
return (
<Box
_display_="flex"
_direction_="column"
_alignItems_="center"
_justifyContent_="center">
<Grid
_container_
_width_={700}
_direction_="column"
_alignItems_="center"
_justifyContent_="center"
_className_="formPostContainer"
_sx_={{
p: 5,
boxShadow: 2,
borderRadius: 2,
'& button': { my: 3 },
}}
>
<h1 _className_="createTitle">New Post</h1>
<form _className_="postForm" _onSubmit_={handleSubmit(submitNewPost)}>
{errorsServer && errorsServer.map((error) => (
<div _className_="errorMsg" _key_={error.param}>
<div>{error.msg}</div>
</div>
))}
{errors.title && <Alert _severity_="error"><AlertTitle>Error</AlertTitle> <span>Titles must be at least 5 characters long</span></Alert>}
{errors.category && <Alert _severity_="error"><AlertTitle>Error</AlertTitle><span>A category must be selected.</span></Alert>}
{errors.post && <Alert _severity_="error"><AlertTitle>Error</AlertTitle><span>Posts must be at least 5 characters long</span></Alert>}
<TextField
_id_="title"
_type_="text"
_name_="title"
_label_="Title"
_placeholder_="Title"
_fullWidth_
_margin_="normal"
{...register("title", { required: true, minLength: 5 })}
/>
<FormControl _fullWidth_ _margin_="normal">
<InputLabel _htmlFor_="category" >Select...</InputLabel>
<Select
_name_="category"
_id_="category"
_variant_="outlined"
_defaultValue_=""
{...register("category", { required: true })}
>
<MenuItem _value_="physical">Physical</MenuItem>
<MenuItem _value_="creative">Creative</MenuItem>
<MenuItem _value_="mental">Mental</MenuItem>
<MenuItem _value_="food">Food</MenuItem>
<MenuItem _value_="collecting">Collecting</MenuItem>
<MenuItem _value_="games+puzzles">Games+Puzzles</MenuItem>
</Select>
</FormControl>
<label _htmlFor_="photo">Upload Photo:
<input
_type_="file"
_name_="photo"
_id_="photo"
_className_="photo"
{...register("photo")}
/>
</label>
<TextField
_id_="post"
_name_="post"
_label_="Blog Post"
_placeholder_="Write New Post"
_fullWidth_
_multiline_
_margin_="normal"
_rows_={20}
{...register("post", { required: true, minLength: 5 })}
/>
<Button _className_="submitFormBtn" _type_="submit" _variant_="contained" _color_="success" _endIcon_={<SendIcon />} _fullWidth_>Submit</Button>
</form>
</Grid>
</Box>
);
}
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.
Hi there,
The error you’re encountering is a 502 Bad Gateway error, which typically indicates a problem with the backend server. Usually in such cases it is best to check your server error logs to see the actual error that is causing the problem rather than the generic 502 error.
For example, if you are using Nginx, you can start by checking the error log with:
You can also take a look at the following tutorial on how to troubleshoot common Nginx problems:
https://www.digitalocean.com/community/tutorials/how-to-troubleshoot-common-nginx-errors
This is not necessarily a problem with Nginx itself, but by checking the Nginx error log you should be able to find the actual error and go from there.
Another thing that you could check is that your backend server (Node.js/Express) is running on the correct port that you’ve specified.
Once you find the actual error, feel free to share it here as well so I could advise you further!
Best,
Bobby