react-native: React Native 0.63.3 File upload gives "Network error" even if the request gives a 200 response.

Description

A normal form submission without file works perfectly fine, but when it comes to file uploads, fetch or axios returns a network error even if the answer from the server is a 200.

React Native version:

System:
    OS: macOS Mojave 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
    Memory: 87.15 MB / 8.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.7.5 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 19, 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.1
      System Images: android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
      Android NDK: 21.3.6528147
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  Languages:
    Java: 12.0.1 - /usr/bin/javac
    Python: 2.7.17 - /Users/daniel/opt/miniconda2/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.3 => 0.63.3
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Make a form with file upload:

const data = new FormData()
            data.append('subject_id', this.props.navigation.getParam('id'))
            data.append('name', this.state.title)
            data.append('progress', this.state.progress * 100)
            data.append('description', this.state.description)
            data.append('date', this.state.date)
            if(this.state.image != null){
                data.append('image', {
                    uri: this.state.image,
                    type: 'image/jpeg',
                    name: 'image'
                });
            }

            axios.post('https://site.com/api/auth/createTask', data, {
                headers: {
                    'Authorization': access,
                    "Content-Type": "multipart/form-data"
                },
            }).then(res => {
                this.setState({ secondaryLoader: false });
                this.props.navigation.navigate('ViewHW', { id: res.data.id })
            })

Use Android Simulator or Physical device, on build or release verison (does not really matter)
Submit the form
Cry because it doesn’t work

Expected Results

For the form to perform the .then

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

Already given above.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 24

Most upvoted comments

I have same issue in my react native application, I have two forms with the image in my app one is working perfectly but the second form giving a network error. I have already tried all the solution but not working I have also update react-native to 0.63.3

Hello! I found the only solution available:

Create a NEW react-native project from scratch, and transfer your files to that one (the components) and app.js, dont forget to install all the libraries you have on your current project in the new one and to apply all the Android configuration you had to the new one as well as on xcode.

dlogvin on Oct 5, 2020

This solution works perfectly fine:

Add this at the end of your file android/gradle.properties: FLIPPER_VERSION=0.52.1
Make sure you have these two lines in the dependencies section in android/app/build.gradle:
debugImplementation(“com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}”) { exclude group:‘com.facebook.flipper’ }

debugImplementation(“com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}”) { exclude group:‘com.facebook.flipper’ }

Siddharth2212 on Jan 4, 2021

@dlogvin I checked in my app, tried uploading an image file using fetch using react-native v0.63.3, android v7.1, v9. It is working as expected.

Try,

Clear android build directory, clear gradle cache folders
Remove node_modules
Try uploading the file only via form data, don’t add append any other data. Try if it works.
Visit your js code again

ravirajn22 on Sep 30, 2020

Here with same issus. I did all the things with flipper, but nothing change. The Network Error occured after i upload img. And I have two image uploader. one worked fine but another got this error. I tried to find difference between them. And at last I find the error one used image cropper and when I structure the FormData, I append the cropRect to the FormData. And after I stringified the cropRect, all the things be fine.

ahayaSKBINCN on Jan 29, 2021

Same issue here. Android and iOS

joaom182 on Nov 11, 2020