Question

502 Error when Uploading Photo with Multer?

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

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:

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

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