Amplify-js: Problems uploading Video to s3 in angular app using Storage Library

[sergiorodriguez82]

Describe the bug
Im trying to upload a video (7MB) in angular app. The following errors show in console.

ConsoleLogger.js:107 [ERROR] 34:31.861 AWSS3ProviderManagedUpload - error happened while uploading a part. Cancelling the multipart upload RangeError: Offset is outside the bounds of the DataView
at DataView.setUint8 ()
at Object.fromBase64 (index.js:64)
at stream-collector.js:20
at step (tslib.es6.js:100)
at Object.next (tslib.es6.js:81)
at fulfilled (tslib.es6.js:71)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:386)
at Object.onInvoke (core.js:27815)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:385)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:143)

ConsoleLogger.js:107 [ERROR] 34:32.143 survey-add-edit - saveVideo error Error: Upload was cancelled.undefined
at AWSS3ProviderManagedUpload. (AWSS3ProviderManagedUpload.js:299)
at step (AWSS3ProviderManagedUpload.js:55)
at Object.throw (AWSS3ProviderManagedUpload.js:36)
at rejected (AWSS3ProviderManagedUpload.js:28)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:386)
at Object.onInvoke (core.js:27815)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:385)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:143)
at zone.js:891
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)

NO video is uploaded.
when trying to upload a image file, Image is uploade, but the following shows in console.

ConsoleLogger.js:107 [ERROR] 33:32.785 survey-add-edit - saveImage error RangeError: Offset is outside the bounds of the DataView
at DataView.setUint8 ()
at Object.fromBase64 (index.js:64)
at stream-collector.js:20
at step (tslib.es6.js:100)
at Object.next (tslib.es6.js:81)
at fulfilled (tslib.es6.js:71)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:386)
at Object.onInvoke (core.js:27815)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:385)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:143)

To Reproduce
Steps to reproduce the behavior:

I have a new angular 9 app.
I added auth and storage service.
When uploading imagen (png files) it works.

Expected behavior
A clear and concise description of what you expected to happen.
The file uploaded

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)

 saveImage(file: File, name: string) {
    return Storage.put('images/' + name, file, {
      contentType: 'image/*'
    });
  }

saveVideo(file: File, name: string) {
    return Storage.put('videos/' + name, file, {
      contentType: 'video'
    });
  }

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.
├─ @aws-amplify/[email protected]
├─ [email protected]
└─ [email protected]

The rare thing is I have a very similar app that uses aws-amplify 2.2.6 and it works like a charm.

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

[twkiiim]

+1
I've just encountered this same problem using "aws-amplify": "^3.0.12"

[twkiiim]

I've tested with the following versions:

• "aws-amplify": "^3.0.11"
• "aws-amplify": "^3.0.10"
• "aws-amplify": "^3.0.9"

and neither of them worked at all.
@sergiorodriguez82 said uploads of png images work, but I haven't had no luck.

This is definitely a super blocker for considering Amplify Storage.
Please get this issue prioritized.

[amirfarrahi]

same here. I did not have this issue but in the new version I am getting
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)

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

[carlhaynes]

Having the same error (but in react) after updating amplify to latest yesterday (was previously on a 1.x release!)

[juuyan]

I've tested with the following versions:

• "aws-amplify": "^3.0.11"
• "aws-amplify": "^3.0.10"
• "aws-amplify": "^3.0.9"

and neither of them worked at all.
@sergiorodriguez82 said uploads of png images work, but I haven't had no luck.

This is definitely a super blocker for considering Amplify Storage.
Please get this issue prioritized.

same here. Update the package to get rid of #5376 and now facing with this new issue....... : (

[mariomerlano]

Still having the same error in react.

• "aws-amplify": "^3.0.12"

Please get this issue prioritized.

[titiloxx]

I am having the same issue with version ^3.0.12.
Would be awesome if anyone have a solution for this

[masbaehr]

Same. To be honest a lot of problems with amplify recently :/ To be honest the whole amplify lib should be marked as alpha or beta, as it is no where near production ready state. I'm considering to just use the aws sdk and move away from amplify. Especially moving to the internal use of sdk v3 which is BETA was a bad choice imho. ( See: https://github.com/aws/aws-sdk-js-v3 )

[HySoaKa]

I have the same issues in chrome. But it works fine in Firefox.

[masbaehr]

I don't understand why rolling back to 3.0.11 still keeps the bugged aws-sdk gamma version in the node_repo even if i delete the node_modules and reinstall :/

[juuyan]

I don't understand why rolling back to 3.0.11 still keeps the bugged aws-sdk gamma version in the node_repo even if i delete the node_modules and reinstall :/

@masbaehr Facing with the same issue... I ve tried to roll back to 3.0.8, which I believe I made the update from... Yet the issue is kept....... Wondering why and whether I have missed something..

[masbaehr]

It was still working in 3.0.11 for sure, so no need to go back that far. But the strange thing is @aws-sdk in node_modules should be 1.0.0.beta5 and not 1.0.0.gamma.1

[masbaehr]

As a quick and dirty solution i found that manually editing package-lock.json with the old versions of the aws-sdk will work (if you had a git repo it should be easy to rollback:

[HySoaKa]

@masbaehr A quicker solution maybe to just rollback fetch-http-handler to 1.0.0-beta.2
Or use another browser while waiting for a fix.

[balajee]

i suspect this could be related to recent upgrade of aws-sdk as well.

[masbaehr]

Yes as i said it is related. Rolling back to beta5 instead of gamma1 will solve the issue. I think Amplify should decide to test the aws-sdk more often and have some unit testing before just updating blindly :P Also as i said before - the inclusion of a beta dependency is not a good choice. I think they should have sticked with stable v2 or at least make amplify v3 beta , and continue to maintain amplify v2 until sdk-v3 is stable enough for daily usage. As of now - at least that's my personal opinion amplify use has become a nightmare. Each update means "Lets pray and hope for the best" ;-) (Sorry for ranting a bit: All aside the project is still very good and useful ;-)

[amirfarrahi]

not sure why they push these updates. I am reconsidering amplify as this is not acceptable

[balajee]

@masbaehr could you please explain more about package-lock.json override... because when i change and re-run it will override... so not sure what you are referring to package-lock.json fix... it will be very very helpful for everyone if you explain more until AWS fix it.

[masbaehr]

first make sure in package.json you have "aws-amplify": "^3.0.11",
then make sure your package-lock.json file does NOT contain any entry with "1.0.0-gamma" if it does replace it with the previous version. If you did not commit your lock file it means manual work because not every previous version has the same beta tag number.

It may also work if you delete the package-lock.json file and node_modules and do "npm install" again. So it might be worth a try. maybe it will recreate the lock file with the correct older sdk v3

[24jr]

I on the other hand am thankful aws amplify exists and realize that with new technology will come issues and I'd rather they continue to improve rather than stay stagnant. I mean they can't know every detail I'm sure they tried to test everything. I'll take the occasional error in exchange for the ease of use and great features they continue to provide

[lukeramsden]

While I agree with the previous commenter, I think #5854 should be reversed for now, as it's breaking core functionality in the most popular browser - not exactly a niche and obscure issue.

[sammartinez]

All,

Wanted to provide an update on this, we are currently working with AWS SDK JS team to get this resolved and get a release out. Will provide an update later on today once we have one. Thanks for your patience.

[iartemiev]

We just released a fix for this in [email protected].
Please give that a try and let us know if it's solved the issue for you.

[juuyan]

@iartemiev Have just tested. It solved the issue! Thanks.

[lukeramsden]

Seems to work for me too, thanks guys. This issue can probably be closed now, although I'd guess some NPM package deprecations are in order.

[iartemiev]

Thank you for confirming!

[kierancrown]

Can confirm upgrade to [email protected] has worked. Will take precautions next time I look to upgrade the lib!

[JasonZhang91503]

Thanks, 3.0.13 works for me.