amplify-js: Problems uploading Video to s3 in angular app using Storage Library
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 (<anonymous>) 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.<anonymous> (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 (<anonymous>) 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/ui-angular@0.2.6 ├─ aws-amplify-angular@4.1.9 └─ aws-amplify@3.0.12
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.
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 5
- Comments: 29 (3 by maintainers)
We just released a fix for this in aws-amplify@3.0.13. Please give that a try and let us know if it’s solved the issue for you.
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.
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 (<anonymous>) 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)); };
I’ve tested with the following versions:
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.
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.
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 )
Having the same error (but in react) after updating amplify to latest yesterday (was previously on a 1.x release!)