Passer l'erreur de validation Multer au composant React

vous n'êtes pas obligé d'envoyer 500 codes d'état à la place, vous devez envoyer 400

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

L ' Erreur ne se résout pas en un json valide lorsqu'elle est transmise via res.json () et donc, elle est supprimée.

pour accéder au message "Essayez de télécharger un fichier .jpeg ou .png." , vous devez mettre à jour le code Multer comme ceci:

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

Voici comment j'ai pu y parvenir pour un microservice d'avatar que j'ai créé pour fonctionner avec mon application principale.

AVERTISSEMENT : Cette explication parcourt tout le flux, elle peut donc être longue et redondante si vous la comprenez déjà.

Créez une configuration axios. h2>

Tout d'abord, vous devez créer une configuration axios . Par défaut, axios n'affichera pas le err renvoyé par le serveur, à la place, il affichera simplement un objet Error générique. Vous devrez mettre en place un intercepteur

utils/axiosConfig.js[

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

Le flux du client au serveur vers le client.

Client

Un utilisateur soumet un formulaire avec formData et cela déclenche un créateur action :

uploadAvatar thunk action creator (qui est une promesse en attente d'une réponse ou erreur de notre serveur) :

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;

Serveur

La requête POST est sélectionnée par notre route express :

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

La requête atteint cette route: '/ api / avatar / create' , passe par une fonction middleware (voir ci-dessous) avant de passer par une autre fonction middleware saveImage , avant de finalement passer par un contrôleur create .

Client

Le serveur renvoie une réponse au client. La réponse de notre serveur passe par le axios configuration interceptor , qui détermine comment gérer la réponse ou l ' erreur qui a été renvoyé de notre serveur. Il transmettra ensuite la réponse ou error au .then () ou .catch () du Créateur de action . Le créateur de l ' action la transmet au réducteur , qui met à jour l'état de redux , qui met ensuite à jour le composant connect ed .

Configuration du serveur (microservice).

Partout où vous définissez vos middlewares express (ex: bodyParser , cors ou passeport etc.), vous voudrez créer une fonction middleware multer (chaque fois qu'un fichier est téléchargé, il passe par cette fonction premier):

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

services /saveImage.js (après avoir traversé la fonction middleware ci-dessus, le résultat est passé à cette fonction middleware saveImage )

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

Si ce qui précède passe, il passe ensuite req (qui contient req.file et toutes ses propriétés) au contrôleur create , qui dans mon cas, stocke un chemin vers le fichier (/uploads/name-of-file.ext), et un str pour récupérer l'image ( http: // localhost: 4000 / uploads / name-of- file.ext ) dans ma base de données. Dans mon cas, cette chaîne est ensuite renvoyée au client pour être stockée dans l'état redux, puis mise à jour en tant qu'avatar de l'utilisateur (lors du passage d'une chaîne dans un , il envoie une requête GET au microservice).

La validation échoue.

Disons à un utilisateur a essayé de télécharger une image .tiff . Il passe par notre fonction middleware express multer, qui déclenche l'erreur "Cette extension de fichier n'est pas acceptée!" , cette erreur est renvoyée via req.err code> à saveImage , qui renvoie le req.err comme: return res.status (400) .json ({err: req.err});

Du côté client, cet err traverse notre axios interceptor:

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

Le bloc catch du créateur d'action uploadAvatar est déclenché:

app.post('/api/avatar/create', saveImage, create);

Le réducteur prend le serveur err et le stocke dans l'état:

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

Un composant connect ed récupère cet état .server.error et l'affiche (ne vous inquiétez pas trop de la logique ici, juste que c'est un composant connecté affichant le state.server.error comme serverError code>):

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

Le résultat final est Cette extension de fichier n'est pas acceptée! co de> err est affiché à l'utilisateur: