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

[ws8149]

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);       
      });
     
   };

[Bravo-Lin]

Maybe you can try to close your browser devtool , somtimes it will block the upload request

[ws8149]

Thanks but its also occurring on release builds

[ws8149]

This problem also occurs on a fresh clean react native project.

The dependencies used in the new project were

"axios": "0.19.2",

"react": "17.0.2",

"react-native": "0.67.4",

"react-native-image-picker": "3.4.0"

The code used was:

        const instance = axios.create({
          baseURL: ENV.API_URL,
          timeout: 10000,
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data',
            'X-AUTH-TOKEN': 'token',
            'Authorization': 'Bearer ${token}'
          },
        })

       const options = {
          quality: 0.6,
          mediaType: 'photo',
          maxWidth: 500,
          maxHeight: 500,
        }

        launchImageLibrary(options, async (file) => {
          
          const form = new FormData()

          const my_file = {
            uri: file.uri, type: file.type, name: file.fileName
          }

          form.append('file', my_file)

          await instance({                
            method: 'post',
            url: '/upload',
            data: form,          
            headers: {
              'Content-Type': 'multipart/form-data'
            },       
          }).then((res) => {
            console.log(res.data)    
            Alert.alert('TEST', 'UPLOAD SUCCESS')            
          }).catch((err) => {
            console.log(err)
            Alert.alert('TEST', 'UPLOAD FAILED')            
          })
        })

The error shown in the logs were
2022-03-17 10:52:00.969 I/ReactNativeJS: 'err: ', { [Error: Network Error] request: { UNSENT: 0, OPENED: 1, HEADERS_RECEIVED: 2, LOADING: 3, DONE: 4, readyState: 4, status: 0, timeout: 10000, withCredentials: true, upload: {}, _aborted: false, _hasError: true, _method: 'POST', _response: 'Stream Closed',

Does anyone know why the stream closes immediately on the first try?

[zgj0303]

"react-native": "0.65.1", Having the same problem as you ，did you solve it？

[ws8149]

No, I'm still having the same issue unfortunately.

[font-ds]

I solve this problem by using rn-fetch-blob.

[flyskywhy]

fixed TypeError: Network request failed when upload file to http not https with Android debug builds

[ishaqashraf]

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

[GaylordP]

Hello,

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

Thanks :)

[Killyannoor]

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

[Arek1020]

Hi,
any solutions? I have this same issue on android.

[Killyannoor]

@Arek1020 In my case, downgrading Axios worked. I downgraded to 0.24.0

[anikettari]

Same issue ! PLEASE HELP