Search code examples
reactjsamazon-web-servicesreact-nativeamazon-s3xmlhttprequest

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


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.


Solution

  • 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'
        }
    
        // ...
    }