'Send multiple files from express server to rest api

I am trying to send multiple files from react to express server and then to microservice. The problem is that my express server is getting crashed whenever I try to upload multiple files.

Here is my express.js side code:

router.post("/upload-files", upload.array("file[]"), async function (req, res) {

  
  let check = new FormData();
  // check = req.files;
  const file = req.files;
  // console.log("DATA------------------------>", file);
  // check.append("file", file.buffer, file.originalname);

  
  
  await axios.post(
    constants.URL2 +":9095/upload-files", check, 
    {
      headers: {
        ...check.getHeaders(),
      },
    })
    .then((res) => {
      return res;
    })
    .then((result) => {
      res.send(result.data);
    });
});

Here is my React.js side code:

  update = () => {
    if (this.isValidForm()) {
      $(".loader").css({ display: "block" });
      $(".overlay").css({ display: "block" });
      // const obj = {
      //   fullName: this.state.fullName,
      // };
      var formData = new FormData();
      const size = this.state.fileData;

      for (let i = 0; i < size.length; i++) {
        console.log(this.state.fileData[i]);
        formData.append("file[]", this.state.fileData[i]);
      }

      // formData.append("files", this.state.fileData);

      

      const updateRequest = {
        method: "POST",
        headers: {
          // "Content-Type": "application/json",
          Authorization:
        },
        // body: JSON.stringify(obj),
           body: formData
      };

      fetch(URL.BASE_URL + "upload-file", updateRequest)
        .then((res) => {
          if (res.status == 401) {
            this.props.GETLOGGEDINUSER(null);
            this.props.history.push("/");
          } else {
            return res.json();
          }
        })
        .then((res) => {
          if (res.statusCode == 0) {
            this.props.history.push({
              pathname: "/newScreen",
              state: { notification: "File uploaded Successfully" },
            });
            toast.success("File uploaded Successfully");
            $(".loader").css({ display: "none" });
            $(".overlay").css({ display: "none" });
          } else {
            toast.error(res.message);
            $(".loader").css({ display: "none" });
            $(".overlay").css({ display: "none" });
          }
        });
    } else {
    }
  };

I tried many ways to solve this but none of them works.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source