Amplify-js: can not upload file to s3 with storage in react

[amirfarrahi]

Describe the bug
01:05.773 AWSS3Provider - error uploading RangeError: Offset is outside the bounds of the DataView
at DataView.setUint8 ()
at Object.fromBase64 (index.ts:75)
at stream-collector.ts:17
at step (tslib.es6.js:100)
at Object.next (tslib.es6.js:81)
at fulfilled (tslib.es6.js:71)
To Reproduce
Steps to reproduce the behavior:

try to use storage.put on 3.0.12 to upload a file to s3 bucket.

Expected behavior
files gets uploaded and secret key gets returned

Code Snippet
Please provide a code snippet or a link to sample code of the issue you are experiencing to help us reproduce the issue. (Be sure to remove any sensitive data)

Storage.put(this.file.name, this.file, {
level: "private",
contentType: "text/plain",
})
.then((result) => console.log(result))
.catch((err) => console.log(err));
};

Screenshots

What is Configured?
If applicable, please provide what is configured for Amplify CLI:

• Which steps did you follow via Amplify CLI when configuring your resources.
• Which resources do you have configured?
  
  
  
  • If applicable, please provide your aws-exports file:
    
    const awsmobile = { "aws_project_region": "us-east-1", "aws_cognito_identity_pool_id": "us-east-1:xxx-xxxx-xxxx-xxxx-xxxxxxxx", "aws_cognito_region": "us-east-1", "aws_user_pools_id": "us-east-1_xxx", "aws_user_pools_web_client_id": "xxxx", "oauth": {} };
  
  
  • If applicable, please provide your manual configuration example:
    
    { Auth: { identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', region: 'XX-XXXX-X', identityPoolRegion: 'XX-XXXX-X', userPoolId: 'XX-XXXX-X_abcd1234', userPoolWebClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3', mandatorySignIn: false, authenticationFlowType: 'USER_PASSWORD_AUTH', oauth: { domain: 'your_cognito_domain', scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'], redirectSignIn: 'http://localhost:3000/', redirectSignOut: 'http://localhost:3000/', responseType: 'code' // or 'token', note that REFRESH token will only be generated when the responseType is code } } }
  
  
• If applicable, provide more configuration data, for example for Amazon Cognito, run aws cognito-idp describe-user-pool --user-pool-id us-west-2_xxxxxx (Be sure to remove any sensitive data)

Environment

npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

_You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app._

[carlhaynes]

Can confirm, updated to latest amplify yesterday and can no longer upload files in react. All was working fine before the update.

Am just uploading an image to a s3 bucket and get the same error

Same error on both my phone and laptop.

[WARN] 43:49.698 AWSS3Provider - error uploading RangeError: Offset is outside the bounds of the DataView
    at DataView.setUint8 (<anonymous>)
    at Object.fromBase64 (index.js:76)
    at stream-collector.js:32
    at step (tslib.es6.js:200)
    at Object.next (tslib.es6.js:131)
    at fulfilled (tslib.es6.js:86)

[24jr]

Ahh thought I was going crazy. Yeah same for me. I'm using vue but same thing. Glad to know it is prob just amplify update and will be fixed hopefully pretty quickly. Also same as this issue #5873

[Amplifiyer]

Can someone confirm that they seeing this issue only in Chrome but works fine in firefox and edge/IE? The issue seems to be how browsers implement FileReader.readAsDataURL(). On firefox, for an empty blob (case for a successful S3 PUT request) I'm seeing FileReader.readAsDataURL() returns data:application/octet-stream;base64, while on chrome it returns data:. This causes issues with parsing the actual result here. On chrome when it doesn't find a , it leaves the input as is which later cannot be decoded since : is not a base64 character.

Both IE and edge seems to return null for empty blobs so it shouldn't create any issues.

Tested with the following code in the 4 browsers

var testBlob = new Blob([]) // and again with non empty Blob(["a"])
var fileReader = new FileReader();
fileReader.onloadend = () => { console.log(fileReader.result) }
fileReader.readAsDataURL(testBlob);

Resulted in following observations
Blob | Firefox(72.0.2) | Chrome (81) | Edge(44) | IE (11)
------------ | ------------ | ------------- | ------------ | -------------
Empty | data:application/octet-stream;base64, | data: | null | null
Non empty | data:application/octet-stream;base64,YQ== | data:application/octet-stream;base64,YQ== | data:;base64,YQ== | data:;base64,YQ==

I'll create an issue with aws-sdk team to fix this.

[HySoaKa]

Can someone confirm that they seeing this issue only in Chrome but works fine in firefox and edge/IE? The issue seems to be how browsers implement FileReader.readAsDataURL(). On firefox, for an empty blob (case for a successful S3 PUT request) I'm seeing FileReader.readAsDataURL() returns data:application/octet-stream;base64, while on chrome it returns data:. This causes issues with parsing the actual result here. On chrome when it doesn't find a , it leaves the input as is which later cannot be decoded since : is not a base64 character.

Both IE and edge seems to return null for empty blobs so it shouldn't create any issues.

Tested with the following code in the 4 browsers

var testBlob = new Blob([]) // and again with non empty Blob(["a"])
var fileReader = new FileReader();
fileReader.onloadend = () => { console.log(fileReader.result) }
fileReader.readAsDataURL(testBlob);

Resulted in following observations

Blob Firefox(72.0.2) Chrome (81) Edge(44) IE (11)
Empty data:application/octet-stream;base64, data: null null
Non empty data:application/octet-stream;base64,YQ== data:application/octet-stream;base64,YQ== data:;base64,YQ== data:;base64,YQ==
I'll create an issue with aws-sdk team to fix this.

I confirm ! It works fine in firefox.

[amirfarrahi]

it does not work in safari

[omar-dulaimi]

It doesn't work in Firefox either, complains about "Region is missing"

[haleyngonadi]

It's working in Firefox for me but doesn't work in Chrome or Safari. So weird!

[Amplifiyer]

This has been fixed, please see #5873 and upgrade aws-amplify to latest version.