Amplify-js: Error in Uploading file to S3 Bucket

Created on 2 Apr 2020  Â·  46Comments  Â·  Source: aws-amplify/amplify-js

I tried to upload the file to S3 Bucket using the below code

RNFS.readFile(this.state.photo.uri, 'base64').then((res) => {
Storage.put(filename, base64.decode(res)).then((stored) => {
console.log('stored', JSON.stringify(stored))
}).catch(err => {
console.log(err)
});
}).catch(err => console.log(err))

It gave me AWSS3Provider - error uploading [Error: Request failed with status code 403].

But if I remove base64.decode(res) and run the below code it upload an file on S3{this file didn't open}

RNFS.readFile(this.state.photo.uri, 'base64').then((res) => {
Storage.put(filename, res).then((stored) => {
console.log('stored', JSON.stringify(stored))
}).catch(err => {
console.log(err)
});
}).catch(err => console.log(err))

Can you please help... I've to upload the files directly from mobile app{React-Native} to AWS S3.

React Native Storage
Source
picture sandeepsingh91
👍6

Most helpful comment

Hi everyone, as suggested in the aws-sdk issue https://github.com/aws/aws-sdk-js-v3/issues/1078, please try using Buffer.from() instead of base64.decode() as follows and let us know the results

RNFS.readFile(this.state.photo.uri, 'base64')
  .then(res => {
    Storage.put(filename, Buffer.from(res, 'base64'))
      .then(stored => {
        console.log('stored', JSON.stringify(stored));
      })
      .catch(err => {
        console.log(err);
      });
  })
  .catch(err => console.log(err));

We are trying to figure out the root cause with using base64 library.

picture Amplifiyer on 9 Apr 2020
🚀1 🎉1 👍1

All 46 comments

@sandeepsingh91 Can you please provide your environment information with the following command: 

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

This will help us with understanding your issue more so. Thanks ahead of time

sammartinez picture sammartinez on 2 Apr 2020

I'm getting 403 errors using Storage.put now that I have updated to the latest aws-amplify js code. It worked fine before.

Let me know what data you need, I'm happy to help. This currently has me blocked...

here is the result of npx envinfo:

  System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 193.01 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 13.8.0 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 79.1.2.43
    Chrome: 80.0.3987.149
    Firefox: 74.0
    Safari: 13.1
  npmPackages:
    @aws-amplify/pushnotification: ^3.0.4 => 3.0.4 
    @babel/core: ^7.9.0 => 7.9.0 
    @babel/runtime: ^7.9.2 => 7.9.2 
    @bam.tech/react-native-make: ^2.0.0 => 2.0.0 
    @react-native-community/art: ^1.2.0 => 1.2.0 
    @react-native-community/eslint-config: ^1.0.0 => 1.0.0 
    @react-native-community/masked-view: ^0.1.7 => 0.1.7 
    @react-native-community/netinfo: ^5.7.0 => 5.7.0 
    @react-native-community/push-notification-ios: ^1.1.1 => 1.1.1 
    @react-native-community/slider: ^2.0.9 => 2.0.9 
    @react-native-firebase/analytics: ^6.3.4 => 6.3.4 
    @react-native-firebase/app: ^6.3.4 => 6.3.4 
    @react-native-firebase/crashlytics: ^6.3.4 => 6.3.4 
    @react-navigation/native: ^5.1.4 => 5.1.4 
    @react-navigation/stack: ^5.2.9 => 5.2.9 
    @testing-library/react-native: ^5.0.3 => 5.0.3 
    @types/i18n-js: ^3.0.1 => 3.0.1 
    @types/jest: ^25.1.5 => 25.1.5 
    @types/lodash.memoize: ^4.1.6 => 4.1.6 
    @types/react-native: ^0.62.1 => 0.62.1 
    @types/react-native-vector-icons: ^6.4.5 => 6.4.5 
    @types/react-native-video: ^5.0.1 => 5.0.1 
    @types/react-test-renderer: ^16.9.2 => 16.9.2 
    @types/uuid: ^7.0.2 => 7.0.2 
    @typescript-eslint/eslint-plugin: ^2.26.0 => 2.26.0 
    @typescript-eslint/parser: ^2.26.0 => 2.26.0 
    amazon-cognito-identity-js: ^4.2.0 => 4.2.0 
    apollo-cache-inmemory: ^1.6.5 => 1.6.5 
    apollo-client: ^2.6.8 => 2.6.8 
    apollo-link: ^1.2.13 => 1.2.13 
    aws-amplify: ^3.0.4 => 3.0.4 
    aws-appsync-auth-link: ^2.0.1 => 2.0.1 
    aws-appsync-subscription-link: ^2.0.1 => 2.0.1 
    babel-jest: ^25.2.6 => 25.2.6 
    eslint: ^6.8.0 => 6.8.0 
    eslint-plugin-react-hooks: ^3.0.0 => 3.0.0 
    graphql-tag: ^2.10.3 => 2.10.3 
    i18n-js: ^3.5.1 => 3.5.1 
    jest: ^25.2.6 => 25.2.6 
    libphonenumber-js: ^1.7.49 => 1.7.49 
    lodash.memoize: ^4.1.2 => 4.1.2 
    metro-react-native-babel-preset: ^0.59.0 => 0.59.0 
    react: ^16.13.1 => 16.13.1 
    react-apollo: ^3.1.3 => 3.1.3 
    react-devtools: ^4.6.0 => 4.6.0 
    react-hook-form: ^5.2.0 => 5.2.0 
    react-native: ^0.62.0 => 0.62.0 
    react-native-camera: ^3.21.0 => 3.21.0 
    react-native-default-preference: ^1.4.2 => 1.4.2 
    react-native-gesture-handler: ^1.6.1 => 1.6.1 
    react-native-get-random-values: ^1.3.1 => 1.3.1 
    react-native-localize: ^1.3.4 => 1.3.4 
    react-native-orientation-locker: ^1.1.8 => 1.1.8 
    react-native-progress: ^4.1.0 => 4.1.0 
    react-native-reanimated: ^1.7.1 => 1.7.1 
    react-native-rename: ^2.4.1 => 2.4.1 
    react-native-root-toast: ^3.2.0 => 3.2.0 
    react-native-safe-area-context: ^0.7.3 => 0.7.3 
    react-native-screens: ^2.4.0 => 2.4.0 
    react-native-splash-screen: ^3.2.0 => 3.2.0 
    react-native-thumbnail: https://github.com/ALJAZEERAPLUS/react-native-thumbnail.git => 1.1.4 
    react-native-vector-icons: ^6.6.0 => 6.6.0 
    react-native-video: ^5.1.0-alpha6 => 5.1.0-alpha6 
    react-native-webview: ^9.0.2 => 9.0.2 
    react-test-renderer: ^16.13.1 => 16.13.1 
    typescript: ^3.8.3 => 3.8.3 
    uuid: ^7.0.3 => 7.0.3 
  npmGlobalPackages:
    @aws-amplify/cli: 4.17.2
    expo-cli: 3.17.10
    npm: 6.14.4
    typeorm: 0.2.24
ajpaulingalls picture ajpaulingalls on 3 Apr 2020

I rolled back a number of amplify packages and all works again...

Here is the new envinfo:

System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 991.51 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 13.8.0 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 79.1.2.43
    Chrome: 80.0.3987.149
    Firefox: 74.0
    Safari: 13.1
  npmPackages:
    @aws-amplify/pushnotification: ^2.1.8 => 2.1.8 
    @babel/core: ^7.9.0 => 7.9.0 
    @babel/runtime: ^7.9.2 => 7.9.2 
    @bam.tech/react-native-make: ^2.0.0 => 2.0.0 
    @react-native-community/art: ^1.2.0 => 1.2.0 
    @react-native-community/eslint-config: ^1.0.0 => 1.0.0 
    @react-native-community/masked-view: ^0.1.7 => 0.1.7 
    @react-native-community/netinfo: ^5.7.0 => 5.7.0 
    @react-native-community/push-notification-ios: ^1.1.1 => 1.1.1 
    @react-native-community/slider: ^2.0.9 => 2.0.9 
    @react-native-firebase/analytics: ^6.3.4 => 6.3.4 
    @react-native-firebase/app: ^6.3.4 => 6.3.4 
    @react-native-firebase/crashlytics: ^6.3.4 => 6.3.4 
    @react-navigation/native: ^5.1.4 => 5.1.4 
    @react-navigation/stack: ^5.2.9 => 5.2.9 
    @testing-library/react-native: ^5.0.3 => 5.0.3 
    @types/i18n-js: ^3.0.1 => 3.0.1 
    @types/jest: ^25.1.5 => 25.1.5 
    @types/lodash.memoize: ^4.1.6 => 4.1.6 
    @types/react-native: ^0.62.1 => 0.62.1 
    @types/react-native-vector-icons: ^6.4.5 => 6.4.5 
    @types/react-native-video: ^5.0.1 => 5.0.1 
    @types/react-test-renderer: ^16.9.2 => 16.9.2 
    @types/uuid: ^7.0.2 => 7.0.2 
    @typescript-eslint/eslint-plugin: ^2.26.0 => 2.26.0 
    @typescript-eslint/parser: ^2.26.0 => 2.26.0 
    amazon-cognito-identity-js: ^3.3.3 => 3.3.3 
    apollo-cache-inmemory: ^1.6.5 => 1.6.5 
    apollo-client: ^2.6.8 => 2.6.8 
    apollo-link: ^1.2.13 => 1.2.13 
    aws-amplify: ^2.3.0 => 2.3.0 
    aws-appsync-auth-link: ^2.0.1 => 2.0.1 
    aws-appsync-subscription-link: ^2.0.1 => 2.0.1 
    babel-jest: ^25.2.6 => 25.2.6 
    eslint: ^6.8.0 => 6.8.0 
    eslint-plugin-react-hooks: ^3.0.0 => 3.0.0 
    graphql-tag: ^2.10.3 => 2.10.3 
    i18n-js: ^3.5.1 => 3.5.1 
    jest: ^25.2.6 => 25.2.6 
    libphonenumber-js: ^1.7.49 => 1.7.49 
    lodash.memoize: ^4.1.2 => 4.1.2 
    metro-react-native-babel-preset: ^0.59.0 => 0.59.0 
    react: ^16.13.1 => 16.13.1 
    react-apollo: ^3.1.3 => 3.1.3 
    react-devtools: ^4.6.0 => 4.6.0 
    react-hook-form: ^5.2.0 => 5.2.0 
    react-native: ^0.62.0 => 0.62.0 
    react-native-camera: ^3.21.0 => 3.21.0 
    react-native-default-preference: ^1.4.2 => 1.4.2 
    react-native-gesture-handler: ^1.6.1 => 1.6.1 
    react-native-get-random-values: ^1.3.1 => 1.3.1 
    react-native-localize: ^1.3.4 => 1.3.4 
    react-native-orientation-locker: ^1.1.8 => 1.1.8 
    react-native-progress: ^4.1.0 => 4.1.0 
    react-native-reanimated: ^1.7.1 => 1.7.1 
    react-native-rename: ^2.4.1 => 2.4.1 
    react-native-root-toast: ^3.2.0 => 3.2.0 
    react-native-safe-area-context: ^0.7.3 => 0.7.3 
    react-native-screens: ^2.4.0 => 2.4.0 
    react-native-splash-screen: ^3.2.0 => 3.2.0 
    react-native-thumbnail: https://github.com/ALJAZEERAPLUS/react-native-thumbnail.git => 1.1.4 
    react-native-vector-icons: ^6.6.0 => 6.6.0 
    react-native-video: ^5.1.0-alpha6 => 5.1.0-alpha6 
    react-native-webview: ^9.0.2 => 9.0.2 
    react-test-renderer: ^16.13.1 => 16.13.1 
    typescript: ^3.8.3 => 3.8.3 
    uuid: ^7.0.3 => 7.0.3 
  npmGlobalPackages:
    @aws-amplify/cli: 4.17.2
    expo-cli: 3.17.10
    npm: 6.14.4
    typeorm: 0.2.24
ajpaulingalls picture ajpaulingalls on 3 Apr 2020

I'm seeing this too. I have a separate issue with react native and the 3.x.x. https://github.com/aws-amplify/amplify-js/issues/5267

bneigher picture bneigher on 3 Apr 2020
👍1

I'm able to reproduce it, debugging to see what the issue is.

Amplifiyer picture Amplifiyer on 3 Apr 2020
👍1

I hope they fix this soon

usmansbk picture usmansbk on 5 Apr 2020

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

@sammartinez I'd run the command. Below is the output of that command

`
sandeepsingh@Sandeeps-MacBook-Pro amplifys3 % npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages

System:
OS: macOS 10.15.3
CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
Memory: 4.55 GB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.11.1 - /usr/local/bin/node
npm: 6.11.3 - /usr/local/bin/npm
Browsers:
Chrome: 80.0.3987.149
Safari: 13.0.5
npmPackages:
@babel/core: 7.9.0 => 7.9.0
@babel/runtime: 7.9.2 => 7.9.2
@react-native-community/eslint-config: 0.0.5 => 0.0.5
@react-native-community/netinfo: ^5.7.0 => 5.7.0
amazon-cognito-identity-js: ^4.2.0 => 4.2.0
aws-amplify: ^3.0.4 => 3.0.4
babel-jest: 24.9.0 => 24.9.0
eslint: 6.8.0 => 6.8.0
jest: 24.9.0 => 24.9.0
metro-react-native-babel-preset: 0.58.0 => 0.58.0
react: 16.11.0 => 16.11.0
react-native: 0.62.0 => 0.62.0
react-native-base64: 0.0.2 => 0.0.2
react-native-fs: ^2.16.6 => 2.16.6
react-native-image-picker: ^2.3.1 => 2.3.1
react-test-renderer: 16.11.0 => 16.11.0
npmGlobalPackages:
ios-deploy: 1.10.0
npm: 6.11.3
react-native-cli: 2.0.1
`

sandeepsingh91 picture sandeepsingh91 on 6 Apr 2020

Downgrading to @aws-amplify/[email protected] made things work again.

lukepushlabs picture lukepushlabs on 6 Apr 2020

Error still exists in aws-amplify: 3.0.6

AWSS3Provider - error uploading [Error: Request failed with status code 403]

usmansbk picture usmansbk on 7 Apr 2020
😕10

Hi everyone, as suggested in the aws-sdk issue https://github.com/aws/aws-sdk-js-v3/issues/1078, please try using Buffer.from() instead of base64.decode() as follows and let us know the results

RNFS.readFile(this.state.photo.uri, 'base64')
  .then(res => {
    Storage.put(filename, Buffer.from(res, 'base64'))
      .then(stored => {
        console.log('stored', JSON.stringify(stored));
      })
      .catch(err => {
        console.log(err);
      });
  })
  .catch(err => console.log(err));

We are trying to figure out the root cause with using base64 library.

Amplifiyer picture Amplifiyer on 9 Apr 2020
🚀1 🎉1 👍1

is it possible that I can directly pass the path of file instead of convert it into base64 and Buffer.from(res, 'base64') ??

sandeepsingh91 picture sandeepsingh91 on 9 Apr 2020
👍1

@Amplifiyer This is how I use Storage to save non-image files, so I don't think the Buffer solution above is feasible in my own case.

const fetchResponse = await fetch(uri);
const blob = await fetchResponse.blob();
Storage.put(key, blob, {
   contentType: type
});
usmansbk picture usmansbk on 9 Apr 2020

@Amplifiyer
I using the same approach as @usmansbk but getting error

AWSS3Provider - error uploading, [Error: Request failed with status code 403]

logs are attached below

```[DEBUG] 12:10.63 AWSS3Provider - put assets/A63FA107-E9B9-4C63-9BE5-9D604CBEE958.jpg to public/assets/A63FA107-E9B9-4C63-9BE5-9D604CBEE958.jpg
[DEBUG] 12:11.459 axios-http-handler Event {
"isTrusted": false,
"lengthComputable": true,
"loaded": 171,
"total": 171,
}

[WARN] 12:11.822 AWSS3Provider - error uploading, [Error: Request failed with status code 403]
- node_modules/expo/build/environment/muteWarnings.fx.js:18:23 in warn
* [native code]:null in warn
* http://127.0.0.1:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:134488:12 in
* http://127.0.0.1:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:134521:22 in
- node_modules/@aws-amplify/storage/lib-esm/providers/AWSS3Provider.js:294:36 in __generator$argument_1
* http://127.0.0.1:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:136094:27 in step
- node_modules/tslib/tslib.js:120:34 in
- node_modules/tslib/tslib.js:111:43 in rejected
- node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:25 in setImmediate$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:194:17 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:458:30 in callImmediates
* [native code]:null in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:407:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:142:17 in __guard$argument_0
* [native code]:null in flushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

Request failed with status code 403

  • node_modules/axios/lib/core/createError.js:15:17 in createError
  • node_modules/axios/lib/core/settle.js:16:9 in settle
  • node_modules/axios/lib/adapters/xhr.js:52:6 in handleLoad
  • node_modules/event-target-shim/dist/event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
  • node_modules/react-native/Libraries/Network/XMLHttpRequest.js:566:23 in setReadyState
  • node_modules/react-native/Libraries/Network/XMLHttpRequest.js:388:25 in __didCompleteResponse
  • node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:190:12 in emit
  • node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction
  • node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0
  • node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
  • node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
  • [native code]:null in callFunctionReturnFlushedQueue
Steps I followed to add storage using amplify cli

amplify add storage
? Please select from one of the below mentioned services: Content (Images, audio, video, etc.)
? Please provide a friendly name for your resource that will be used to label this category in the project: billboards3b
ucket
? Please provide bucket name: billboarde042e526000547168dd6ad36e7dc9b45
? Who should have access: Auth and guest users
? What kind of access do you want for Authenticated users? create/update, read, delete
? What kind of access do you want for Guest users? read
? Do you want to add a Lambda Trigger for your S3 Bucket? No
```

results of running following command

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

System: OS: macOS 10.15.3 CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz Memory: 486.25 MB / 16.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 13.11.0 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.4 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Browsers: Chrome: 80.0.3987.163 Firefox: 59.0.2 Safari: 13.0.5 npmPackages: @aws-amplify/api: ^3.1.6 => 3.1.6 @aws-amplify/auth: ^3.2.3 => 3.2.3 @aws-amplify/core: ^3.2.3 => 3.2.3 @aws-amplify/pubsub: ^3.0.7 => 3.0.7 @aws-amplify/storage: ^3.1.6 => 3.1.6 @babel/core: ^7.0.0 => 7.9.0 @expo/vector-icons: ^10.0.0 => 10.0.6 @react-native-community/masked-view: 0.1.6 => 0.1.6 @react-native-community/netinfo: 5.5.1 => 5.5.1 @react-navigation/bottom-tabs: ^5.1.1 => 5.2.6 @react-navigation/material-top-tabs: ^5.1.6 => 5.1.8 @react-navigation/native: ^5.0.0 => 5.1.5 @react-navigation/stack: ^5.0.0 => 5.2.10 @types/react: ^16.9.11 => 16.9.33 @types/react-native: ^0.60.22 => 0.60.31 @types/react-redux: ^7.1.7 => 7.1.7 aws-amplify-react-native: ^3.2.3 => 3.2.3 babel-plugin-module-resolver: ^4.0.0 => 4.0.0 babel-preset-expo: ^8.1.0 => 8.1.0 expo: ^37.0.0 => 37.0.6 expo-asset: ~8.1.3 => 8.1.4 expo-font: ~8.1.0 => 8.1.1 expo-image-manipulator: ~8.1.0 => 8.1.0 expo-image-picker: ~8.1.0 => 8.1.0 expo-localization: ~8.1.0 => 8.1.0 i18n-js: ^3.5.1 => 3.5.1 moment: ^2.24.0 => 2.24.0 react: 16.9.0 => 16.9.0 react-dom: 16.9.0 => 16.9.0 react-native: https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz => 0.61.4 react-native-calendar-picker: ^6.0.5 => 6.0.6 react-native-calendars: ^1.264.0 => 1.265.0 react-native-gesture-handler: ~1.6.0 => 1.6.1 react-native-material-dropdown: ^0.11.1 => 0.11.1 react-native-paper: ^3.6.0 => 3.8.0 react-native-reanimated: ~1.7.0 => 1.7.1 react-native-safe-area-context: 0.7.3 => 0.7.3 react-native-screens: ~2.2.0 => 2.2.0 react-native-tab-view: ^2.13.0 => 2.14.0 react-redux: ^7.2.0 => 7.2.0 redux: ^4.0.5 => 4.0.5 redux-thunk: ^2.3.0 => 2.3.0 typescript: ^3.8.3 => 3.8.3 npmGlobalPackages: @aws-amplify/cli: 4.17.2 @nestjs/cli: 6.6.4 babel-cli: 6.26.0 expo-cli: 3.17.20 firebase-tools: 3.18.1 n: 2.1.12 npm: 6.14.4 react-devtools: 3.6.1 react-native-cli: 2.0.1 react-native: 0.59.9 react: 16.8.6

adilusman51 picture adilusman51 on 9 Apr 2020

@Amplifiyer

Hi everyone, as suggested in the aws-sdk issue aws/aws-sdk-js-v3#1078, please try using Buffer.from() instead of base64.decode() as follows and let us know the results

RNFS.readFile(this.state.photo.uri, 'base64')
  .then(res => {
    Storage.put(filename, Buffer.from(res, 'base64'))
      .then(stored => {
        console.log('stored', JSON.stringify(stored));
      })
      .catch(err => {
        console.log(err);
      });
  })
  .catch(err => console.log(err));

We are trying to figure out the root cause with using base64 library.

My code:

         RNFS.readFile(pathToImageFile, 'base64').then((res) => {
            const buffer = Buffer.from(res, 'base64');
            Storage.put(fileName, buffer, {
                contentType: 'image/jpeg',
                metadata: {
                    sub: idPayload.sub,
                    email: idPayload.email,
                },
                progress(progress, total) {
                    // eslint-disable-next-line no-console
                    console.log(progress, total);
                },
            });
        });

Result from console:

ReferenceError: Buffer is not defined

I console log'ed first 100 chars of buffer and reading file looks ok.

Ps. react-native here. I used same approach as colleagues @usmansbk and @adilusman51.

VictorAtPL picture VictorAtPL on 9 Apr 2020

Update:
It works.

I had to install buffer using npm - npm install buffer as stated here: https://github.com/aws-amplify/amplify-js/issues/2188#issuecomment-441350477

Also do not forget about importing proper module:

import { Buffer } from 'buffer';

However, the solution with fetch instead of RNFS was much more nicer, so I'd love to know how to fix the original bug.

VictorAtPL picture VictorAtPL on 9 Apr 2020

@Amplifiyer This is how I use Storage to save non-image files, so I don't think the Buffer solution above is feasible in my own case.

const fetchResponse = await fetch(uri);
const blob = await fetchResponse.blob();
Storage.put(key, blob, {
   contentType: type
});

@usmansbk, yes, Buffer is only applicable to use with base64 encoded strings. Since you are using blobs, your issues seems to be https://github.com/aws-amplify/amplify-js/issues/5311? (I can verify that the fix for this #5342 works with react native cli apps as well)

Amplifiyer picture Amplifiyer on 9 Apr 2020
👍1

@Amplifiyer I looked at https://github.com/aws-amplify/amplify-js/pull/5342 but couldn't figure out the said fix. It uploads files alright but the contentType is broken

usmansbk picture usmansbk on 10 Apr 2020

@usmansbk Tahnks for trying out the fix #5342, can you let us know what issues are you facing with the content type? if you pass blob.type as contentType, is it not getting honored when you upload or facing an error?

Amplifiyer picture Amplifiyer on 10 Apr 2020

@Amplifiyer Thanks. The contentType is not getting honored at all. The uploaded media files are broken when downloaded.

usmansbk picture usmansbk on 10 Apr 2020

@usmansbk, after applying the fix #5342 in your local app, what's the content type being sent in the request (You can add a breakpoint in axios-http-handler to inspect) vs what you sent in the storage.put() api call?

Amplifiyer picture Amplifiyer on 10 Apr 2020

@usmansbk, #5342 is out on the unstable tag, can you try with aws-amplify@unstable and let us know if it works for you. If it doesn't please share your code snippet or reproduction repo/steps on #5311.
Thanks!

Amplifiyer picture Amplifiyer on 10 Apr 2020
👍1

@Amplifiyer Thanks a bunch. So far everything works as expected in the unstable release. 

    "aws-amplify": "3.0.8-unstable.5",
    "aws-amplify-react-native": "4.0.4-unstable.5"
usmansbk picture usmansbk on 10 Apr 2020

@Amplifiyer
After I saw the fix was merged with stable branch, I reverted code (from Buffer.from() method to fetch/blob) and it looks like the contentType and metaData is not properly saved in S3 if the filesize is greater than 5MB.

My code right now:

const fileName = pathToImageFile.replace(/^.*[\\/]/, '');
const contentType = fileName.includes('.zip')
    ? 'application/zip'
    : 'image/jpeg';

const fetchResponse = await fetch(pathToImageFile);
const blob = await fetchResponse.blob();
const result = await Storage.put(fileName, blob, {
    contentType,
    metadata: {
        sub,
        email,
    },
});

If I upload file < 5MB, I can see 3 metadatas in S3 console (Content-Type == 'image/jpeg'). If the file is > 5MB, there is only Content-Type == 'binary/octet-stream'). Both uploaded files are images (.jpeg).

VictorAtPL picture VictorAtPL on 16 Apr 2020

I tried the base64 and blob method, both are failing failing with axios-http-handler for me on latest release.

ahansson89 picture ahansson89 on 20 Apr 2020

Looking through CloudTrail it does not look like a PUT request is attempted.

ahansson89 picture ahansson89 on 20 Apr 2020

@ahansson89, can you post your code snippet here. Are you also facing issues with >5MB files or with any files?

Amplifiyer picture Amplifiyer on 21 Apr 2020

@VictorAtPL, your issue is same as #5432, I've a PR out for that and will be publishing soon.

Amplifiyer picture Amplifiyer on 22 Apr 2020
👍1

await Storage.put("test.txt", "hello")
returns Access Denied

ahansson89 picture ahansson89 on 23 Apr 2020

Happens on...

"aws-amplify": "^2.2.6"
"aws-amplify-react-native": "^3.2.2"

...too, so maybe my issue is unrelated.

ahansson89 picture ahansson89 on 23 Apr 2020

@ahansson89, yes your issue seems unrelated. Can you open another issue with as much details as you can to reproduce your issue? Also check your IAM roles if they have the right access and the user has right credentials.

Amplifiyer picture Amplifiyer on 24 Apr 2020

@Amplifiyer, is this issue looks related?

Happens after i tried modularized packages and on full aws-amplify v3.#.# .

on "aws-amplify": "^2.2.5" works fine

await Storage.put(name, file, {
   contentType: file.type
})

fails with axios-http-handler Error: Network Error on:

"@aws-amplify/auth": "^3.2.5",
"@aws-amplify/core": "^3.2.5",
"@aws-amplify/storage": "^3.1.8",
nevolgograd picture nevolgograd on 27 Apr 2020

@nevolgograd can you try again after deleting your lock files and node_modules? Network error is not related to the issue discussed here. If you are still facing the issue, please create a new one.

Amplifiyer picture Amplifiyer on 27 Apr 2020
👍1

@Amplifiyer it worked, thx.

nevolgograd picture nevolgograd on 28 Apr 2020

@Amplifiyer I deleted the lock file and the node_modules, still crashing 

  System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
    Memory: 973.05 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 81.0.4044.129
    Safari: 13.1
  npmPackages:
    @apollo/link-context: ^2.0.0-beta.3 => 2.0.0-beta.3 
    @apollo/link-ws: ^2.0.0-beta.3 => 2.0.0-beta.3 
    @apollo/react-hooks: ^3.1.5 => 3.1.5 
    @aws-amplify/api: ^3.1.6 => 3.1.9 
    @aws-amplify/auth: ^3.2.3 => 3.2.6 
    @aws-amplify/core: ^3.2.6 => 3.2.6 
    @aws-amplify/interactions: ^3.1.9 => 3.1.9 
    @aws-amplify/pubsub: ^3.0.10 => 3.0.10 
    @aws-amplify/storage: ^3.1.9 => 3.1.9 
    @babel/core: ^7.8.6 => 7.9.6 
    @expo/webpack-config: ^0.12.2 => 0.12.3 
    @pmmmwh/react-refresh-webpack-plugin: ^0.2.0 => 0.2.0 
    @react-native-community/masked-view: 0.1.6 => 0.1.6 
    @react-native-community/netinfo: 5.5.1 => 5.5.1 
    @react-navigation/bottom-tabs: ^5.3.1 => 5.3.1 
    @react-navigation/native: ^5.2.1 => 5.2.1 
    @react-navigation/stack: ^5.2.16 => 5.2.16 
    @types/lodash: ^4.14.150 => 4.14.150 
    @types/react: ~16.9.23 => 16.9.34 
    @types/react-native: ~0.61.17 => 0.61.23 
    apollo-boost: ^0.4.7 => 0.4.7 
    apollo-client: ^2.6.8 => 2.6.8 
    apollo-utilities: ^1.3.3 => 1.3.3 
    aws-amplify: ^3.0.10 => 3.0.10 
    aws-amplify-react-native: ^4.1.1 => 4.1.1 
    aws-appsync-auth-link: ^2.0.1 => 2.0.2 
    aws-appsync-subscription-link: ^2.0.1 => 2.1.0 
    babel-preset-expo: ~8.1.0 => 8.1.0 
    expo: ~37.0.3 => 37.0.8 
    expo-constants: ~9.0.0 => 9.0.0 
    expo-image-picker: ~8.1.0 => 8.1.0 
    expo-permissions: ~8.1.0 => 8.1.0 
    graphql: ^15.0.0 => 15.0.0 
    lodash: ^4.17.15 => 4.17.15 
    react: ~16.9.0 => 16.9.0 
    react-dom: ~16.9.0 => 16.9.0 
    react-hook-form: ^5.6.0 => 5.6.0 
    react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4 
    react-native-elements: ^2.0.0 => 2.0.0 
    react-native-gesture-handler: ~1.6.0 => 1.6.1 
    react-native-mime-types: ^2.3.0 => 2.3.0 
    react-native-reanimated: ~1.7.0 => 1.7.1 
    react-native-safe-area-context: 0.7.3 => 0.7.3 
    react-native-screens: ~2.2.0 => 2.2.0 
    react-native-web: ~0.11.7 => 0.11.7 
    subscriptions-transport-ws: ^0.9.16 => 0.9.16 
    typescript: ~3.8.3 => 3.8.3 
    url: ^0.11.0 => 0.11.0 
    webpack-hot-middleware: ^2.25.0 => 2.25.0 
  npmGlobalPackages:
    @aws-amplify/cli: 4.18.1
    @walmartlabs/json-to-simple-graphql-schema: 2.0.0
    concurrently: 5.0.0
    cordova: 8.1.2
    expo-cli: 3.19.2
    faker: 4.1.0
    firebase-tools: 7.14.0
    generator-chrome-extension-kickstart-typescript: 4.4.1
    generator-node-express-typescript-api: 2.0.9
    graphql-cli: 3.0.14
    graphql-introspection-json-to-sdl: 1.0.3
    ionic: 4.4.0
    localtunnel: 2.0.0
    npm: 6.9.0
    pm2: 4.2.3
    react-devtools: 3.6.3
    react-native-cli: 2.0.1
    tslint: 5.18.0
    yo: 3.1.1
Jose4gg picture Jose4gg on 1 May 2020

await Storage.put("test.txt", "hello")
returns Access Denied

@ahansson89 I've been struggling with the same issue for hours, just to find out that my role policy had PutObject permission but my BUCKET policy didn't. Hope it helps you.

ricardopires picture ricardopires on 5 May 2020

The bugs reported in this issue are fixed or a workaround is provided. Closing this. Please create a new issue if you are facing any problems

Amplifiyer picture Amplifiyer on 5 May 2020
👎8

I seem to be getting this error when I simply try to put(name, file). I am trying to upload a file from the browser directly. I followed the example given exactly here. I should also mention that I am not using Typescript at all. I am using Gatsby which uses GraphQL under the hood. Could this be a possible problem? Any ideas?
image

A [WARN] 39:26.613 AWSS3Provider - error react devtools backend.js:6 uploading TypeError: tslib_l. spreadArrays is not a function at MiddlewareStack. ./node_modules/@aws—sdk/middleware— stack/build/MiddlewareStack.js.MiddlewareStack. concat (MiddlewareStack. js_z at PutObjectCommand. ./node_modules/@aws—sdk/client— s3/d ist/es/ commands/PutObj ectCommand. j s. PutObj ectCommand. resolveMidd lewa re (PutObj ectCommand.js: 23) at S3Client. ./node_modules/@aws—sdk/smithy— client/build/client. js.Client. send (client.js: 14) at AWSS3ProviderManagedUpload. (AWSS3ProviderManagedUpload. js:116) at step (AWSS3ProviderManagedUpload.js:55) at Object. next (AWSS3ProviderManagedUpload.js:36) at fulfilled (AWSS3ProviderManagedupload. js:27)

Mainly trying to upload pdfs, but this happens with any content type.

EDIT

This has magically resolved itself. I have wiped node_modules and package-lock.json as well as used yarn instead of npm.

alexanderMontague picture alexanderMontague on 12 May 2020

I am facing this problem with latest amplify unstable version.

bernardnongpoh picture bernardnongpoh on 18 May 2020

Any update here?
I'm still get this error with newest version 3.0.18

namnv16 picture namnv16 on 23 Jun 2020

still happening 3.0.22

mikedizon picture mikedizon on 5 Aug 2020

I seem to be getting this error when I simply try to put(name, file). I am trying to upload a file from the browser directly. I followed the example given exactly here. I should also mention that I am not using Typescript at all. I am using Gatsby which uses GraphQL under the hood. Could this be a possible problem? Any ideas?
image

A [WARN] 39:26.613 AWSS3Provider - error react devtools backend.js:6 uploading TypeError: tslib_l. spreadArrays is not a function at MiddlewareStack. ./node_modules/@aws—sdk/middleware— stack/build/MiddlewareStack.js.MiddlewareStack. concat (MiddlewareStack. js_z at PutObjectCommand. ./node_modules/@aws—sdk/client— s3/d ist/es/ commands/PutObj ectCommand. j s. PutObj ectCommand. resolveMidd lewa re (PutObj ectCommand.js: 23) at S3Client. ./node_modules/@aws—sdk/smithy— client/build/client. js.Client. send (client.js: 14) at AWSS3ProviderManagedUpload. (AWSS3ProviderManagedUpload. js:116) at step (AWSS3ProviderManagedUpload.js:55) at Object. next (AWSS3ProviderManagedUpload.js:36) at fulfilled (AWSS3ProviderManagedupload. js:27)

Mainly trying to upload pdfs, but this happens with any content type.

EDIT

This has magically resolved itself. I have wiped node_modules and package-lock.json as well as used yarn instead of npm.

@alexanderMontague what version are you using?

mikedizon picture mikedizon on 5 Aug 2020

@mikedizon currently on 3.0.10 using yarn

alexanderMontague picture alexanderMontague on 6 Aug 2020
👍1

anything I try to use storage module of my "aws-amplify": "^3.0.23", "amazon-cognito-identity-js": "^4.3.3",
AWSS3Provider - error uploading Error: Request failed with status code 400

FadiAboMsalam picture FadiAboMsalam on 7 Aug 2020

Hi everyone, as suggested in the aws-sdk issue aws/aws-sdk-js-v3#1078, please try using Buffer.from() instead of base64.decode() as follows and let us know the results

RNFS.readFile(this.state.photo.uri, 'base64')
  .then(res => {
    Storage.put(filename, Buffer.from(res, 'base64'))
      .then(stored => {
        console.log('stored', JSON.stringify(stored));
      })
      .catch(err => {
        console.log(err);
      });
  })
  .catch(err => console.log(err));

We are trying to figure out the root cause with using base64 library.

@Amplifiyer This working for me. I used as below like 

`RNFS.readFile(filePath, 'base64')
    .then(res =>
     Storage.put(
          fileName + '.jpeg',
          Buffer.from(res, 'base64'),
          { contentType: 'image/jpeg' },
      ) .then(stored => {
            console.log('stored', JSON.stringify(stored));
          })
          .catch(err => {
            console.log(err);
          });
 )`
akkravikumar picture akkravikumar on 13 Aug 2020

@Amplifiyer

I'm using the latest version of aws/amplify 3.3.7 (it seems that you have released yesterday)

This is the code

const s3Upload = async (file, id) => {
    const filename = file.name.replace(/\s/g, '')
    await Storage.vault.put(filename, file, {
      contentType: file.type
    })
  }

When I try to upload small files (1 Mb zip file) it works well, today I'm trying to upload 6 Mb zip file, and I'm getting the error:

AWSS3ProviderManagedUpload - error happened while finishing the upload. Cancelling the multipart upload Error: Request failed with status code 40

Anyone has faced that problem

nerxhan-eduongo picture nerxhan-eduongo on 4 Nov 2020
👍2

@nerxhan-eduongo this is an old issue. Can you create a new one with as much details as possible

Amplifiyer picture Amplifiyer on 4 Nov 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

guanzo picture guanzo  Â·  3Comments
rygo6 picture rygo6  Â·  3Comments
ddemoll picture ddemoll  Â·  3Comments
oste picture oste  Â·  3Comments
romainquellec picture romainquellec  Â·  3Comments