title: express post request redirect me to a json page instead of showing the success or error messages toast
body: <p>I'm making a crud application using MERN stack to practice my skills cause i'm new to this
  I'm trying to create a new product with an image in it and i use multer to handle the images
  i did my backend well and tested it on Postman and it works fine, but when i pass the data to the frontend (React and Redux) it also works fine but instead of showing me the success or error message with toastfy, the browser redirect me to a new page with json data i sent</p>
  
  <p>PS. i tried formik to handle my form state and errors and it didn't redirect me to the json page and it showed the errors messages i'm sending from the backend in the toast, but didn't work for me cause formik is really complicated working with files so i did it the simple way</p>
  
  <ul>
  <li>i use multer to handle images</li>
  <li>react for the frontend</li>
  <li>redux as a store for react</li>
  <li>react-toastify to show success and error messages</li>
  </ul>
  
  <p>// multer middleware to handle the image</p>
  
  <pre><code>const storage = multer.diskStorage({
      destination: function (req, file, cb) {
          cb(null, "./uploads/");
      },
      filename: function (req, file, cb) {
          cb(null, file.originalname);
      }
  });
  
  const fileFilter = (req, file, cb) =&gt; {
      // reject a file
      if (file.mimetype === "image/jpeg" || file.mimetype === "image/png") {
          cb(null, true);
      } else {
          cb(null, false);
      }
  };
  
  const upload = multer({ storage, fileFilter });
  </code></pre>
  
  <p>and here's the validation and working with the backend and it's an array of methods</p>
  
  <pre><code>const createProduct = [
  //validate product that it's not empthy
  // then sanitize it with trima and escape
  body("name")
      .isLength({ min: 5 })
      .withMessage("Must be at least 2 letters")
      .trim()
      .escape(),
  body("description")
      .isLength({ min: 20 })
      .withMessage("Must be at least 10 letters")
      .trim()
      .escape(),
  body("category")
      .isLength({ min: 1 })
      .withMessage("This field is required")
      .trim()
      .escape(),
  body("price")
      .isLength({ min: 1 })
      .withMessage("Must be at least 1 number")
      .isNumeric()
      .withMessage("Must be Numeric")
      .trim()
      .escape(),
  body("numberInStock")
      .isLength({ min: 1 })
      .withMessage("Must be at least 1 number")
      .isNumeric()
      .withMessage("Must be Numeric")
      .trim()
      .escape(),
  
  // continue process after validation
  (req, res, next) =&gt; {
      console.log(req.file);
  
      // get the validation errors from the request
      const errors = validationResult(req);
  
      // create new product after being validated and sanitized
      let newProduct = new Product({
          name: req.body.name,
          description: req.body.description,
          category: req.body.category,
          price: req.body.price,
          numberInStock: req.body.numberInStock,
          productImage: req.file.path
      });
  
      // if there are validation errors send them as json
      if (!errors.isEmpty()) {
  
          //i only show the first error
          let field = errors.errors[0].param;
          let message = errors.errors[0].msg;
          let errorMessage = field + " " + message;
  
          res.status(400).json({
              message: errorMessage
          });
      } else {
          newProduct.save(function (err, product) {
              if (err) {
                  console.log(err);
  
                  res.json({
                      message: "Couldn't create please try again"
                  });
              } else {
                  res.redirect({
                      message: "Created Successfully",
                      product
                  });
              }
          });
      }
  }
  ];
  </code></pre>
  
  <p>handling the route</p>
  
  <pre><code>router.post("/api/product/create",upload.single("productImage"), createProduct);
  </code></pre>
  
  <p>//add product action</p>
  
  <pre><code>export const addProduct = product =&gt; dispatch =&gt; {
  return new Promise((resolve, reject) =&gt; {
      axios
          .post("/api/product/create", product)
          .then(res =&gt; {
              let newProduct = res.data.product;
              let successMessage = res.data.message;
  
              dispatch(addProductSuccess(newProduct, successMessage));
              resolve(successMessage);
          })
          .catch(error =&gt; {
              console.log(error.message);
  
              dispatch(addProductFailure(error));
              reject(error.message);
          });
  });
  };
  
  const addProductSuccess = (product, successMessage) =&gt; {
      return {
          type: ADD_PRODUCT_SUCCESS,
          payload: {
              product,
              successMessage
          }
      };
  };
  
  const addProductFailure = error =&gt; {
      return {
          type: ADD_PRODUCT_FAILURE,
          payload: {
              error
          }
      };
  };
  </code></pre>
  
  <p>//Add product form</p>
  
  <pre><code>function AddProductForm() {
  // importing categories and laoding state from out store
  const { categories, error, loading } = useSelector(
      state =&gt; state.categoriesss
  );
  
  const [state, setState] = useState({
      name: "",
      description: "",
      category: "",
      price: "",
      numberInStock: "",
      productImage: ""
  });
  
  const handleChange = e =&gt; {
      const { name, value } = e.target;
      setState(prevState =&gt; ({
          ...prevState,
          [name]: value
      }));
  };
  
  // react redux method to dispatch our functions
  const dispatch = useDispatch();
  
  // fetch all the the categories with dispatch before our component render
  useEffect(() =&gt; {
      dispatch(fetchCategories());
  }, [dispatch]);
  
  
  // handle submit our form
  const handleSubmitt = product =&gt; {
  
      dispatch(addProduct(product))
          .then(res =&gt; {
              toast.success(res, {
                  position: toast.POSITION.BOTTOM_LEFT,
                  transition: Slide
              });
          })
          .catch(err =&gt; {
              toast.error(err, {
                  position: toast.POSITION.BOTTOM_LEFT,
                  autoClose: false
              });
          });
  };
  
  let newProduct = {
      name: state.name,
      description: state.description,
      category: state.category,
      price: state.price,
      numberInStock: state.numberInStock,
      productImage: state.productImage
  };
  
  return (
      &lt;Container&gt;
          &lt;form
              action='/api/product/create'
              method='post'
              enctype='multipart/form-data'
              onSubmit={() =&gt; handleSubmitt(newProduct)}&gt;
              &lt;div className='form-group'&gt;
                  &lt;input
                      className='form-control mb-2'
                      type='text'
                      placeholder='Enter Product name'
                      name='name'
                      required
                      onChange={handleChange}
                  /&gt;
              &lt;/div&gt;
              &lt;div className='form-group'&gt;
                  &lt;input
                      className='form-control mb-2'
                      as='textarea'
                      placeholder='Enter Product description'
                      name='description'
                      required
                      onChange={handleChange}
                  /&gt;
              &lt;/div&gt;
              &lt;div className='form-group'&gt;
                  &lt;select
                      className='custom-select mb-2'
                      name='category'
                      required
                      onChange={handleChange}&gt;
                      {loading &amp;&amp; &lt;option&gt;loading...&lt;/option&gt;}
                      {categories.map(cat =&gt; {
                          return (
                              &lt;option key={cat._id} value={cat._id}&gt;
                                  {cat.name}
                              &lt;/option&gt;
                          );
                      })}
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;div className='form-group'&gt;
                  &lt;input
                      className='form-control mb-2'
                      type='text'
                      placeholder='Enter Product price'
                      name='price'
                      required
                      onChange={handleChange}
                  /&gt;
              &lt;/div&gt;
              &lt;div className='form-group'&gt;
                  &lt;input
                      className='form-control mb-2'
                      type='text'
                      placeholder='Enter Product numberInStock'
                      name='numberInStock'
                      required
                      onChange={handleChange}
                  /&gt;
              &lt;/div&gt;
              &lt;div className='form-group'&gt;
                  &lt;input
                      className='custom custom-file mb-2'
                      type='file'
                      name='productImage'
                      required
                      onChange={handleChange}
                  /&gt;
              &lt;/div&gt;
              &lt;Button
                  variant='primary'
                  type='submit'
                  onClick={() =&gt; handleSubmitt(newProduct)}&gt;
                  Submit{" "}
              &lt;/Button&gt;{" "}
          &lt;/form&gt;
      &lt;/Container&gt;
      );
  }
  
  export default AddProductForm;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/MMccz.jpg" rel="nofollow noreferrer">results after the request is done with success</a></p>
  
  <p><a href="https://i.stack.imgur.com/Bf1TA.jpg" rel="nofollow noreferrer">results after the request is done with error</a></p>