title: Pass Multer validation error to React Component
body: <p>I am learning <code>Multer</code> along with <code>Redux</code> and <code>React</code>. </p>
  
  <p>My <code>express</code> router is like </p>
  
  <pre><code>router.post('/upload', addressController.uploadImage);
  </code></pre>
  
  <p>My <code>Multer</code> code is like below</p>
  
  <pre><code>const uploadImage = (req, res, next) =&gt; {
  
      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) =&gt; {
          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;
          }
      });
  }
  </code></pre>
  
  <p>My Action is like below</p>
  
  <pre><code>export const uploadImage = (formData, id, config) =&gt; dispatch =&gt; {
    return Axios.post('/api/address/upload', formData, config)
      .then(response =&gt; {
        dispatch({
          type: 'uploadImage',
          payload: response.data
        });
      })
      .catch(error =&gt; {
        dispatch({
          type: 'uploadImage',
          payload: error // I would like to pass error through here.
        });
        return false;
      });
  };
  </code></pre>
  
  <p>My Reducer is like below</p>
  
  <pre><code>const addressReducer = (state = initialState, action) =&gt; {
      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;
      }
  };
  </code></pre>
  
  <p>I would like to get error in my component is like below</p>
  
  <pre><code>render() {
          console.log(this.props.uploadImage);
  }
  
  
  const mapStateToProps = state =&gt; ( {
      uploadImage: state.addressReducer.uploadImage
  } );
  
  
  export default connect(mapStateToProps)(ModalElement);
  </code></pre>
  
  <p>My console output is like below</p>
  
  <p><a href="https://i.stack.imgur.com/G05j1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G05j1.png" alt="enter image description here"></a></p>
  
  <p><strong>How can I get <code>Try to upload .jpeg or .png file.</code> error in my React component while I try to upload file without .jpeg and .png extension ?</strong> </p>