React Native S3 image upload returns "Stream Closed" using XHR

Question

After updating React Native version to latest 0.63.2 and trying to upload the image to S3 bucket XHR returns error Stream Closed image upload was working fine with version 0.61.5

The Code

uploadProfile({ variables: { filetype: mime } }).then(
      ({ data: { uploadUserProfile } }) => {
        const { presignedUrl, url } = uploadUserProfile;

        console.log('presignedUrl', { presignedUrl, url });
        // uploading to s3 bucket
        const xhr = new XMLHttpRequest();
        xhr.open('PUT', presignedUrl);

        xhr.onreadystatechange = async function () {
          if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
              updateAccount({
                variables: {
                  data: {
                    profile: url,
                  },
                },
              });
            } else {
              if (/Request has expired/g.test(xhr.response))
                Toast({ message: 'slow network connection' });
              else {
                console.log({
                  response: xhr.response,
                  responseText: xhr.responseText,
                  status: xhr.status,
                });
                Toast({ message: 'internal server error' });
                await report({
                  error: {
                    response: xhr.response,
                    responseText: xhr.responseText,
                    status: xhr.status,
                  },
                }); // reporting error
              }
            }
          }
        };

        xhr.setRequestHeader('Content-Type', mime);
        xhr.send({ uri: path, type: mime });

        setLoading(false);
      },
    );

When the user wants to upload a profile image first App send a request to the server and get return the pre-signed URL and upload from client-side this how App was working.

user_2384283 · Answer

I upgraded Flipper to version 0.51.2 and it worked for me.

Go to android/gradle.properties and add this line

FLIPPER_VERSION=0.52.1

You should have the following lines in your android/app/build.gradle

dependencies {
    // ....

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
      exclude group:'com.facebook.fbjni'
    }

    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'
    }

    // ...
}

user_11000016 · Answer

upgrading flipper version solves the issue for me, If upgrading flipper version doesn't solve for you then try this solution.

Whoever is still struggling with this issue. it's happening because of Flipper network plugin. I disabled it and things work just fine.

My workaround to make this work is commenting outline number 43

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            @Override
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

in this file android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

found this answer link

React Native S3 image upload returns "Stream Closed" using XHR

2 Answers