expo - Cannot upload file from React Native: "Network request failed"?

Question

When trying to upload a selected image from my React Native project I get a nondescript error message:

Network request failed

Seems to be a common issue, but most people are just forgetting their file types or are on Android and have an issue with Flipper. Nothing that has worked for anyone I've found with the same symptoms has worked for me.

Code:

  const localUri = result.uri;
  const filename = localUri.split("/").pop();

  const type = mime.lookup(localUri) || "image";

  const formData = new FormData();
  formData.append("file", { uri: localUri, name: filename, type });

  try {
    const file = await fetch(`${SERVER_URL}/api/upload`, {
      method: "POST",
      body: formData,
    }).then((res) => {
      console.log(res);
      return res.status === 200 ? res.text() : res.json();
    });
  } catch (e) {
    console.log(e);
  }

Considerations:

• Using a physical IOS device. Iphone.
• Using Expo 40.0.0 with corresponding RN SDK, not ejected.
• Using expo-image-picker to get image.
• Using NGROK to get requests through to my localhost server from my phone.
• All other requests to my server from React Native work fine, it's only when I try to uplaod a file
• Image renders fine from supplied URI, so it's getting the right source.
• Form Data source from above:

{ "name": "CAPS-FILE-NAME.jpg", "type": "image/jpeg", "uri": "file:///var/mobile/Containers/Data/Application/CAPS-PATHING/Library/Caches/ExponentExperienceData/project-src-pathing/ImagePicker/CAPS-FILE-NAME.jpg", }

Things tried:

• Using Content-Type header: "multipart/form-data"
• Using /private instead of file://
• Using Postman to hit my server through NGROK, which works
• Changing my Expo/RN to 38.0.0
• Getting base64 -> blob -> formData, same result
• Many other things I've forgotten now. If it's on Google results, I've tried it.

Answer 1

For anyone who gets stuck with this also, I switched to using XMLHttpRequest instead of fetch and it miraculously works now. Not sure why fetch is broken in RN, but at least there's a solution.