Pass Multer validation error to React Component - node.js

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

Answer 3

Here's how I was able to accomplish it for an avatar microservice I created to work alongside my main application.
WARNING: This explanation goes through the entire flow, so it may be lengthy and redundant if you already understand it.
Create an axios configuration.
First, you must create an axios configuration. By default axios won't show the err returned by the server, instead, it'll just display a generic Error object. You'll need to set up an interceptor.
utils/axiosConfig.js
import get from 'lodash/get';
import axios from 'axios';
export const avatarAPI = axios.create({
baseURL: 'http://localhost:4000/api/', // this makes it easier so that any request will be prepended with this baseURL
});
avatarAPI.interceptors.response.use(
response => response, // returns the server response
error => {
const err = get(error, ['response', 'data', 'err']); // this checks if "error.response.data.err" is present (this is the error returned from the server); VERY IMPORTANT: this "err" property is specified in our express middlewares/controllers, so please pay attention to the naming convention.
return err ? Promise.reject(err) : Promise.reject(error.message); // if the above is present, return the server error, else return a generic Error object
},
);
The flow from client to server back to client.
Client
A user submits a form with formData and this triggers an action creator:
uploadAvatar thunk action creator (which is a promise waiting for a response or error from our server):
import { avatarAPI } from '../utils/axiosConfig'; // import the custom axios configuration that was created above
import * as types from 'types';
const uploadAvatar = formData => dispatch =>
avatarAPI
.post(`avatar/create`, formData) // this makes a POST request to our server -- this also uses the baseURL from the custom axios configuration, which is the same as "http://localhost:4000/api/avatar/create"
.then(({ data }) => {
dispatch({ type: types.SET_CURRENT_AVATAR, payload: data.avatarurl });
})
.catch(err => // this will return our server "err" string if present, otherwise it'll return a generic Error object. IMPORTANT: Just in case we get a generic Error object, we'll want to convert it to a string (otherwise, if it passes the generic Error object to our reducer, stores it to redux state, passes it to our connected component, which then tries to display it... it'll cause our app to crash, as React can't display objects)
dispatch({ type: types.SERVER_ERROR, payload: err.toString() }),
);
Server
The POST request gets picked up by our express route:
app.post('/api/avatar/create', saveImage, create);
The request hits this route: '/api/avatar/create', passes through a middleware function (see below) before passing through another saveImage middleware function, before finally passing through to a create controller.
Client
The server sends a response back to the client. The response from our server passes through the axios configuration interceptor, which determines how to handle the response or the error that was returned from our server. It'll then pass the response or error to the .then() or .catch() of the action creator. The action creator hands it off to the reducer, which updates redux state, which then updates the connected component.
Server (microservice) setup.
Wherever you're defining your express middlewares (ex: bodyParser, cors or passport etc.), you'll want to create a multer middleware function (any time a file is uploaded, it passes through this function first):
middlewares/index.js
app.use(cors({ origin: "http://localhost:3000" }));
app.use(bodyParser.json());
app.use(
multer({
limits: {
fileSize: 10240000,
files: 1,
fields: 1
},
fileFilter: (req, file, next) => {
if (!/\.(jpe?g|png|gif|bmp)$/i.test(file.originalname)) {
req.err = "That file extension is not accepted!"; // this part is important, I'm attaching the err to req (which gets passed to the next middleware function => saveImage)
next(null, false);
}
next(null, true);
}
}).single("file")
);
...etc
services/saveImage.js (after passing through the middleware function above, the result gets passed to this saveImage middleware function)
const fs = require("fs");
const sharp = require("sharp");
const { createRandomString } = require('../../utils/helpers');
module.exports = (req, res, next) => {
// if the file failed to pass the middleware function above, we'll return the "req.err" as "err" or return a string if "req.file" is undefined. In short, this returns an "error.response.data.err" to the client.
if (req.err || !req.file) {
return res.status(400).json({ err: req.err || "Unable to process file." });
}
const randomString = createRandomString();
const filename = `${Date.now()}-${randomString}-${req.file.originalname}`;
const filepath = `uploads/${filename}`;
const setFile = () => {
req.file.path = filepath;
return next();
};
/\.(gif|bmp)$/i.test(req.file.originalname)
? fs.writeFile(filepath, req.file.buffer, (err) => {
if (err) return res.status(400).json({ "Unable to process file." });
setFile();
})
: sharp(req.file.buffer)
.resize(256, 256)
.max()
.withoutEnlargement()
.toFile(filepath)
.then(() => setFile());
};
If the above passes, it then passes req (which contains req.file and all its properties) to the create controller, which in my case, stores a path to the file (/uploads/name-of-file.ext), and a string to retrieve the image (http://localhost:4000/uploads/name-of-file.ext) to my database. In my case, that string is then sent back to the client to be stored to redux state and then updated as the user's avatar (when passing a string into an <img src={avatarurl} alt="avatarurl.png" />, it makes a GET request back to the microservice).
The validation fails.
Lets say a user tried to upload a .tiff image. It passes through our express multer middleware function, which triggers the "That file extension is not accepted!" error, this error is returned via req.err to saveImage, which returns the req.err as: return res.status(400).json({ err: req.err });
On our client-side, that err flows through our axios interceptor:
avatarAPI.interceptors.response.use(
response => response,
error => {
const err = get(error, ['response', 'data', 'err']); // this checks if "error.response.data.err" is present; which it is, and is now "That file extension is not accepted!"
return err ? Promise.reject(err) : Promise.reject(error.message); // that err string gets returned to our uploadAvatar action creator's "catch" block
},
);
The uploadAvatar action creator's catch block is triggered:
.catch(err => // our server "err" is passed to here from the interceptor
dispatch({ type: types.SERVER_ERROR, payload: err.toString() }), // then that "err" is passed to a reducer
);
The reducer picks up the server err and stores it to state:
import * as types from 'types';
const serverInitialState = {
error: '',
message: '',
};
const ServerReducer = (state = serverInitialState, { payload, type }) => {
switch (type) {
case types.RESET_SERVER_MESSAGES:
return { ...state, error: '' };
case types.SERVER_ERROR:
return { ...state, error: payload }; // the server err is stored to redux state as "state.server.error"
case types.SERVER_MESSAGE:
return { ...state, message: payload };
default:
return state;
}
};
export default ServerReducer;
A connected component retrieves this state.server.error and displays it (don't worry too much about the logic here, just that it's a connected component displaying the state.server.error as serverError):
class RenderMessages extends Component {
shouldComponentUpdate = nextProps =>
this.props.serverError !== '' ||
nextProps.serverError !== '' ||
this.props.serverMessage !== '' ||
nextProps.serverMessage !== '';
componentDidUpdate = () => {
const { serverError, serverMessage } = this.props;
if (serverError || serverMessage) {
const notification = serverError
? serverErrorMessage(serverError)
: serverSuccessMessage(serverMessage);
this.renderNotification(...notification);
}
};
renderNotification = ({ noteType, description }) => {
notification[noteType]({
message: noteType === 'error' ? 'Error' : 'Update',
description,
icon: descriptionLayout(noteType),
});
setTimeout(() => this.props.resetServerMessages(), 3000);
};
render = () => null;
}
export default connect(
state => ({
serverError: state.server.error, // retrieving the error from redux state
serverMessage: state.server.message,
}),
{ resetServerMessages },
)(RenderMessages);
The final result is That file extension is not accepted! err is being displayed to the user: