react-native: Unable to upload image file on first try getting TypeError: Network Request Failed

Description

This issue only occurs on Android devices after updating React Native from v0.63.4 to v0.65.1. For some strange reason, the first attempt at uploading a image file will immediately fail with the error TypeError: Network Request Failed.

If it does fail on the first try, the second or third will succeed. Does anyone know why does this happen or how I can investigate this further? Sometimes this issue does not even happen at all.

Version

0.65.1

Output of npx react-native info

npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/react-native-info - Not found npm ERR! 404 npm ERR! 404 ‘react-native-info@latest’ is not in the npm registry. npm ERR! 404 You should bug the author to publish it (or use the name yourself!) npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\ws8149\AppData\Roaming\npm-cache_logs\2022-01-25T12_34_29_576Z-debug.log Install for [ ‘react-native-info@latest’ ] failed with code 1

Steps to reproduce

  1. Use an Android device
  2. Perform an image file upload

Snack, code example, screenshot, or link to a repository

const handleUpload = async (file) => {
    const form = new FormData()

    form.append('file', {
      uri: file.uri, type: file.type, name: file.name
    })

    const token = await getItem(storageKey.token)

     let req_headers = {
       'Content-Type': 'multipart/form-data',
      'Accept': 'application/json',
       Authorization: `Bearer ${token}`,       
     };     

     fetch(`${API_URL}/upload`, {
      method: 'POST',
      body: form,
      headers: req_headers
    })
      .then((response) => response.json())
      .then((response) => {
        console.log('response', response);
      })
      .catch((error) => {
        console.log('error', error);       
      });
     
   };

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 19 (1 by maintainers)

Most upvoted comments

add 'Content-Type': 'multipart/form-data' in your headers will resolve the issue

Same issue ! PLEASE HELP

Hello,

I have exactly the same problem with axios@0.27.2 and react-native@0.70.6, have you found a solution ?

Thanks 😃

@GaylordP Hey, we’re experiencing this same issue. Have you found a way to resolve this yet?

Thanks but its also occurring on release builds