Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – File Upload React Fetch to ExpressJS Server "fails" even though upload is succesfull

having a bug that I can’t wrap my brain around and hoping someone can assist.

I have a React module that does the following with a file:

async function uploadFile(file, typeSent) {
        console.log("SENT FILE:")
        console.log(file)
        let formInfo = new FormData();
        formInfo.append("file", file)
        formInfo.append("name", file.name)

        const requestOptions2 = {
            method: "POST",
            body: formInfo,
            redirect: "follow"
        };

        console.log("ATTEMPTING UPLOAD:")
        await fetch("https://blah.herokuapp.com/upload-files", requestOptions2)
            .then((response) => response.json())
            .then((response) => {
                console.log("UPLOAD RESULT: ")
                console.log(response)
            })
            .catch((error) => {
                console.log("Upload error?")
                console.error(error)
            });
}

this succesfully sends the file to the server, which has a very simple axios function to upload the file:

await axios(config)
            .then(function (response) {
                console.log(JSON.stringify(response.data));
                res.status(200).send({response: response.data})
            })
            .catch(function (error) {
                console.log(error);
                res.status(400).send({errormsg: error.message})
            });

this all works, the server uploads the image and returns a response, however upon performing that fetch within the React module it immediately errors out and provides the following error:

TypeError: Failed to fetch
    at main.js:2:553951
    at c (main.js:2:543956)
    at Generator._invoke (main.js:2:543709)
    at Generator.next (main.js:2:544319)
    at mu (main.js:2:549193)
    at i (main.js:2:549397)
    at main.js:2:549458
    at new Promise (<anonymous>)
    at main.js:2:549337
    at te (main.js:2:554346)

which yeah isn’t too helpful since it’s being minimized by webpack. The file still uploads but the actual response never hits React again, making it "impossible" to actually use the response back from the server…

So, I’m wondering if someone could kindly let me know what I’m missing / having a senior moment on.

I appreciate your help!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Turns out it's a CORS error, as discovered by orengatigno at GitHub

    https://github.com/axios/axios/issues/4420


  2. 0

    The error is about TypeError, Which means, the arguments passed to the fetch is incompatible or not an expected type. So check the arguments passed to the fetch is correct like headers is not passed to the requestOptions

    Updated Code:

    let formInfo = new FormData();
      formInfo.append("file", file);
      formInfo.append("name", file.name);

      const requestOptions = {
        method: "POST",
        headers: {
          // Add any additional headers here if needed, e.g., authorization headers
          // 'Authorization': 'Bearer YOUR_TOKEN_HERE'
        },
        body: formInfo,
        redirect: "follow"
      };

      console.log("ATTEMPTING UPLOAD:");

      const response = await fetch("https://blah.herokuapp.com/upload-files", requestOptions);

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const result = await response.json();
      console.log("UPLOAD RESULT: ");
      console.log(result);
      setResponse(result);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search