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