Storage.get no longer working after V5.3.23 update

[BuildingFiles]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React Native

Amplify APIs

Storage

Amplify Version

v5

Amplify Categories

storage

Backend

Amplify CLI

Environment information

# Put output below this line
  System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
    Memory: 43.65 GB / 63.89 GB
  Binaries:
    Node: 20.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 129.0.6668.70
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @aws-amplify/cli: ^12.8.2 => 12.8.2
    @aws-amplify/react-native: ^1.1.5 => 1.1.5
    @babel/core: ^7.12.9 => 7.20.12
    @babel/plugin-proposal-export-namespace-from: ^7.18.9 => 7.18.9
    @expo/config-plugins: ~6.0.0 => 6.0.2
    @react-native-async-storage/async-storage: 1.17.11 => 1.17.11
    @react-native-community/netinfo: 9.3.7 => 9.3.7
    @react-native-masked-view/masked-view: 0.2.8 => 0.2.8
    @react-native-picker/picker: 2.4.8 => 2.4.8
    @react-navigation/bottom-tabs: ^5.11.15 => 5.11.15
    @react-navigation/drawer: ^5.12.9 => 5.12.9
    @react-navigation/native: ^5.9.8 => 5.9.8
    @react-navigation/stack: ^5.14.9 => 5.14.9
    @types/react: ~18.0.24 => 18.0.27
    HelloWorld:  0.0.1
    aws-amplify: ^5.3.23 => 5.3.23
    aws-amplify-react-native: ^7.0.2 => 7.0.2
    axios: ^0.21.4 => 0.21.4 (1.7.7, 0.26.1)
    crypto-secure-random-digit: ^1.0.10 => 1.0.10
    expo: ^48.0.21 => 48.0.21
    expo-checkbox: ~2.3.1 => 2.3.1
    expo-constants: ~14.2.1 => 14.2.1 (14.3.0)
    expo-document-picker: ~11.2.2 => 11.2.2
    expo-file-system: ~15.2.2 => 15.2.2 (15.3.0)
    expo-gl: ~12.4.0 => 12.4.0
    expo-media-library: ~15.2.3 => 15.2.3
    expo-sharing: ~11.2.2 => 11.2.2
    expo-status-bar: ~1.4.4 => 1.4.4
    expo-three: ^7.0.0 => 7.0.0
    expo-updates: ~0.16.4 => 0.16.4
    graphql: ^15.8.0 => 15.8.0
    jszip: ^3.10.1 => 3.10.1
    jszip-utils: ^0.1.0 => 0.1.0
    moment: ^2.29.4 => 2.29.4
    moment-timezone: ^0.5.40 => 0.5.40
    react: 18.2.0 => 18.2.0 (17.0.1)
    react-devtools: ^4.28.0 => 4.28.0
    react-dom: 18.2.0 => 18.2.0
    react-moment: ^1.1.3 => 1.1.3
    react-native: 0.71.14 => 0.71.14
    react-native-gesture-handler: ~2.9.0 => 2.9.0
    react-native-get-random-values: ~1.9.0 => 1.9.0
    react-native-pinch-zoom-responder: ^0.1.2 => 0.1.2
    react-native-reanimated: ~2.14.4 => 2.14.4
    react-native-screens: ~3.20.0 => 3.20.0
    react-native-web: ~0.18.9 => 0.18.12
    react-native-webview: 11.26.0 => 11.26.0
    regenerator-runtime: ^0.13.11 => 0.13.11
    sharp-cli: ^2.1.0 => 2.1.0
    three: ^0.145.0 => 0.145.0
    typescript: ^4.6.3 => 4.9.5
  npmGlobalPackages:
    @aws-amplify/cli: 12.12.6
    @expo/ngrok: 4.1.0
    cordova: 10.0.0
    eas-cli: 12.4.1
    npm-check-updates: 17.1.2
    npm: 10.8.3
    react-devtools: 5.3.1
    sharp-cli: 2.1.0
    typescript: 4.5.4

Describe the bug

After upgrading AWS-Amplify from Version 5.0.11 to 5.3.23 all our file download and several in app file loading systems stopped working.

When executing

const result = await Storage.get(fileKey, { download: true });

TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
Or
TypeError: Failed to execute 'createObjectURL' on 'URL': parameter 1 is not of type 'Blob'.
depending on which file file reading method we tried.

The problem appears to be that result.Body now has 3 sub functions, .text() .json() and .blob(). Which matches what is shown in the documentation for V6 but does not for V5.

Expected behavior

Storage.get should be returning "result.Body" as a blob, Not as a parent for 3 sub functions.

Reproduction steps

1. Install aws-amplify 5.3.23: $ npm i aws-amplify@5.3.23
2. run code snippet below

Code Snippet

Code compliant with V5 documentation that reproduces the Issue.

export async function download(fileKey, filename) {
  const result = await Storage.get(fileKey, { download: true });
  console.log(result)
  const url = URL.createObjectURL(result.Body);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename || 'download';
  const clickHandler = () => {
    setTimeout(() => {
      URL.revokeObjectURL(url);
      a.removeEventListener('click', clickHandler);
    }, 150);
  };
  a.addEventListener('click', clickHandler, false);
  a.click();
  return a;
}

Manual configuration

No response

Additional configuration

{
    "UserPool": {
        "Id": "us-east-1_xxx",
        "Name": "xxx",
        "Policies": {
            "PasswordPolicy": {
                "MinimumLength": 8,
                "RequireUppercase": false,
                "RequireLowercase": false,
                "RequireNumbers": false,
                "RequireSymbols": false,
                "TemporaryPasswordValidityDays": 7
            }
        },
        "LambdaConfig": {
            "DefineAuthChallenge": "arn:aws:lambda:us-east-1:Challenge-dev",
            "CreateAuthChallenge": "arn:aws:lambda:us-east-1:Challenge-dev",
            "VerifyAuthChallengeResponse": "arn:aws:lambda:us-east-1:Challenge-dev"
        },
        "LastModifiedDate": "2022-10-25T09:57:39.781000-04:00",
        "CreationDate": "2021-04-16T16:34:22.580000-04:00",
        "SchemaAttributes": [
            {
                "Name": "sub",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": false,
                "Required": true,
                "StringAttributeConstraints": {
                    "MinLength": "1",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "name",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "given_name",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "family_name",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "middle_name",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "nickname",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "preferred_username",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "profile",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "picture",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "website",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "email",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": true,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "email_verified",
                "AttributeDataType": "Boolean",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false
            },
            {
                "Name": "gender",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "birthdate",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "10",
                    "MaxLength": "10"
                }
            },
            {
                "Name": "zoneinfo",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "locale",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "phone_number",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "phone_number_verified",
                "AttributeDataType": "Boolean",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false
            },
            {
                "Name": "address",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "updated_at",
                "AttributeDataType": "Number",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "NumberAttributeConstraints": {
                    "MinValue": "0"
                }
            },
            {
                "Name": "custom:Projects",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "1",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "custom:Managing",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "1",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "custom:Owned",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "1",
                    "MaxLength": "256"
                }
            },
            {
                "Name": "custom:Owner",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "1",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "custom:Following",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "1",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "custom:Bookmarked",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "1",
                    "MaxLength": "2048"
                }
            }
        ],
        "AutoVerifiedAttributes": [
            "email"
        ],
        "UsernameAttributes": [
            "email"
        ],
        "SmsVerificationMessage": "Your verification code is {####}",
        "EmailVerificationMessage": "Your verification code is {####}",
        "EmailVerificationSubject": "Your verification code",
        "VerificationMessageTemplate": {
            "SmsMessage": "Your verification code is {####}",
            "EmailMessage": "Your verification code is {####}",
            "EmailSubject": "Your verification code",
            "DefaultEmailOption": "CONFIRM_WITH_CODE"
        },
        "SmsAuthenticationMessage": "Your authentication code is {####}",
        "MfaConfiguration": "OPTIONAL",
        "EstimatedNumberOfUsers": 6,
        "EmailConfiguration": {
            "EmailSendingAccount": "COGNITO_DEFAULT"
        },
        "SmsConfiguration": {
            "SnsCallerArn": "arn:aws:iam::xxx:role/xxx",
            "ExternalId": "xxx_role_external_id"
        },
        "UserPoolTags": {},
        "Domain": "auth.xxx.com",
        "CustomDomain": "auth.xxx.com",
        "AdminCreateUserConfig": {
            "AllowAdminCreateUserOnly": false,
            "UnusedAccountValidityDays": 7
        },
        "UsernameConfiguration": {
            "CaseSensitive": false
        },
        "Arn": "arn:aws:cognito-idp:us-east-1:xxx:userpool/us-east-1_xxx",
        "AccountRecoverySetting": {
            "RecoveryMechanisms": [
                {
                    "Priority": 1,
                    "Name": "verified_email"
                },
                {
                    "Priority": 2,
                    "Name": "verified_phone_number"
                }
            ]
        }
    }
}

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

Temporary workaround I came up with after much testing, reviewing the V6 documentation, and applying its response processing to V5.

export async function download(fileKey, filename) {
  const result = await Storage.get(fileKey, { download: true });
  console.log(result)
  const blob = await result.Body.blob(); // Fix await for the result.Body.blob() response containing the data.
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename || 'download';
  const clickHandler = () => {
    setTimeout(() => {
      URL.revokeObjectURL(url);
      a.removeEventListener('click', clickHandler);
    }, 150);
  };
  a.addEventListener('click', clickHandler, false);
  a.click();
  return a;
}

[HuiSF]

Thanks for reporting this issue! We will look into this.

[HuiSF]

It looks like the react-native-url-polyfill couldn't look up the BlobModule from react-native NativeModule and it throws, will look into a solution for this.

Update: this issue is actually reproducible with both Amplify v5 and v6, but only on Android.
Update2: the error I encountered while testing on Android is actually different from the issue that the OP posted. (I will handle this separately)

[HuiSF]

Hi @BuildingFiles since I saw expo in your dependencies list, could you confirm, were seeing this issue while building with expo-go, or were you running the native app directly? And it looks like you are developing a web app using expo, correct? (the code example you pasted is Web specific.)

I can produce a similar error with expo@51 using expo Web while I couldn't get a Web app using expo@48 to run. However, Amplify JS doesn't support expo Web, nor React Native Web.