Pass Multer validation error to React Component

Question

I am learning Multer along with Redux and React.

My express router is like

router.post('/upload', addressController.uploadImage);

My Multer code is like below

const uploadImage = (req, res, next) => {

    const storage = multer.diskStorage({
        destination: function(req, file, cb) {
            cb(null, './uploads/');
        },
        filename: function(req, file, cb) {
            cb(null, Date.now() + '-' + file.originalname);
        }
    });

    const fileFilter = (req, file, cb) => {
        if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
            cb(null, true);
        } else {
            cb(new Error('Try to upload .jpeg or .png file.'), false);
        }
    };

    const upload = multer({
        storage: storage,
        limits: {
            fileSize: 1024 * 1024 * 5
        },
        fileFilter: fileFilter
    }).single('addressImage');

    upload(req, res, function(error) {
        if (error) {
            // An error occurred when uploading
            res.status(500).json({
                message: error // I would like to send error from Here.
            });
            console.log(error);
        } else {
            if (req.file.filename === res.req.res.req.file.filename) {
                res.status(200).json({
                    message: 'File uploaded',
                    file: req.file.filename
                });
            }
            return;
        }
    });
}

My Action is like below

export const uploadImage = (formData, id, config) => dispatch => {
  return Axios.post('/api/address/upload', formData, config)
    .then(response => {
      dispatch({
        type: 'uploadImage',
        payload: response.data
      });
    })
    .catch(error => {
      dispatch({
        type: 'uploadImage',
        payload: error // I would like to pass error through here.
      });
      return false;
    });
};

My Reducer is like below

const addressReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'getAddresses': {
            return {
                ...state,
                controlModal: action.payload.valueModal,
                address: action.payload.addressData
            };
        }
        case 'uploadImage': {
            return {
                ...state,
                uploadImage: action.payload 
            };
        }
        default:
            return state;
    }
};

I would like to get error in my component is like below

render() {
        console.log(this.props.uploadImage);
}


const mapStateToProps = state => ( {
    uploadImage: state.addressReducer.uploadImage
} );


export default connect(mapStateToProps)(ModalElement);

My console output is like below

How can I get Try to upload .jpeg or .png file. error in my React component while I try to upload file without .jpeg and .png extension ?

Answer 1

you don't have to send 500 status code instead you should send 400

 res.status(400).json({
            message: error // I would like to send error from Here.
        });

Answer 2

The Error does not resolve to a valid json when it is passed through the res.json() and thus, it is stripped out.

So, to access the message "Try to upload .jpeg or .png file.", you should update the Multer code like this:

if (error) {
    // An error occurred when uploading
    res.status(500).json({
        /** error.message => "Try to upload .jpeg or .png file." */
        message: error.message // I would like to send error from Here.
    });
    console.log(error);
}

If you try to upload the file using Postman, you would have the following API response:

{
    "message": "Try to upload .jpeg or .png file."
}

Once you have that, you can change your dispatch() like:

.catch(error => {
    dispatch({
        type: "uploadImage",
        /** error.data is the response. We want the `message` property from it */
        payload: error.data.message // I would like to pass error through here.
    });
    return false;
});