502 Error when Uploading Photo with Multer?


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") }


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, + "-" + 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)


_/* Multer for Photos */_
const multer = require('multer');
const upload = multer({
    fileFilter: postsController.imageFilter

_// Create Posts_'/post/newPost', [upload.single('photo'),
check("title", "A title is required and must be at least 5 characters long")
    .isLength({ min: 5 })
check("category", "A category is required")
check("post", "A post is required and must be at least 5 characters long")
    .isLength({ min: 5 })
], (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) {
        return res.status(400).json({ errors: errors.array() })
    } else {

        const post = {
            user: req.body.user,
            title: req.body.title,
            category: req.body.category,

        if (req.file) {

   = req.file.filename

            .then((post) => {
            }).catch((err) => {



const CreatNewPost = () => {

    const { user } = useSelector((state) => state.auth)

    const { register, handleSubmit, reset, formState: { errors } } = useForm({
        defaultValues: {
            user: user ? : 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);

        (_async_ () => {
            try {
                await`${process.env.REACT_APP_URL}/api/blog/post/newPost`, formData)
                toast.success("View your profile for your new post!")
            } catch (error) {
                if (error.response) setErrorsServer(;
                toast.error("Unable to create new post")
        if (errorsServer) setErrorsServer('')


    return (

                    p: 5,
                    boxShadow: 2,
                    borderRadius: 2,
                    '& button': { my: 3 },

                <h1 _className_="createTitle">New Post</h1>

                <form _className_="postForm" _onSubmit_={handleSubmit(submitNewPost)}>
                    {errorsServer && => (
                        <div _className_="errorMsg" _key_={error.param}>

                    {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>}
                    { && <Alert _severity_="error"><AlertTitle>Error</AlertTitle><span>Posts must be at least 5 characters long</span></Alert>}

                        {...register("title", { required: true, minLength: 5 })}

                    <FormControl _fullWidth_ _margin_="normal">
                        <InputLabel _htmlFor_="category" >Select...</InputLabel>
                            {...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>

                    <label _htmlFor_="photo">Upload Photo:

                        _label_="Blog Post"
                        _placeholder_="Write New Post"
                        {...register("post", { required: true, minLength: 5 })}
                    <Button _className_="submitFormBtn" _type_="submit" _variant_="contained" _color_="success" _endIcon_={<SendIcon />} _fullWidth_>Submit</Button>


Submit an answer

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!

Sign In or Sign Up to Answer

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.

Bobby Iliev
Site Moderator
Site Moderator badge
April 14, 2023

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:

tail -100 /var/log/nginx/error.log

You can also take a look at the following tutorial on how to troubleshoot common Nginx problems:

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!



Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

card icon
Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Sign up
card icon
Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We’d like to help.

Learn more
card icon
Become a contributor

You get paid; we donate to tech nonprofits.

Learn more
Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow – whether you’re running one virtual machine or ten thousand.

Learn more ->
DigitalOcean Cloud Control Panel