Can't upload file to S3 using aws-amplify possibly due to slash in bucket name

Describe the bug Can’t upload file to S3 due to bucket name after upgrading to aws-amplify 3.0.24 from 1.3.3.

To Reproduce

1. Pick file using browser dialog
2. Upload file to s3 using aws-amplify
3. following error returns. File is not uploaded apparently.

react_devtools_backend.js:2273 [WARN] 47:32.280 AWSS3Provider - error uploading InvalidBucketName: Bucket name shouldn't contain '/', received 'project-name-ui-storage/cognito/project-ui'
  at http://localhost:3000/static/js/0.chunk.js:294127:19
  at step (http://localhost:3000/static/js/0.chunk.js:537377:17)
  at Object.next (http://localhost:3000/static/js/0.chunk.js:537308:14)
  at http://localhost:3000/static/js/0.chunk.js:537281:67
  at new Promise (<anonymous>)
  at Module.__awaiter (http://localhost:3000/static/js/0.chunk.js:537260:10)
  at http://localhost:3000/static/js/0.chunk.js:294121:22
  at S3Client.Client.send (http://localhost:3000/static/js/0.chunk.js:297082:14)
  at AWSS3ProviderManagedUpload.<anonymous> (http://localhost:3000/static/js/0.chunk.js:124445:18)
  at step (http://localhost:3000/static/js/0.chunk.js:124350:17)
  at Object.next (http://localhost:3000/static/js/0.chunk.js:124281:14)
  at fulfilled (http://localhost:3000/static/js/0.chunk.js:124235:24)

Also the following error is returned from Appsync (could be related)

{
  "data": {
    "createS3ObjectRef": null
  },
  "errors": [{
    "path": ["createS3ObjectRef"],
    "data": null,
    "errorType": "Lambda:Unhandled",
    "errorInfo": null,
    "locations": [{
      "line": 2,
      "column": 3,
      "sourceName": null
    }],
    "message": "Access Denied"
  }]
}

Expected behavior File should be uploaded to S3 just like it did when I was using aws-amplify@1.3.3

Code Snippet

Basically what I’m doing is:

// Where file: File
const name = file.name;
const mimeType = file.type;
const visibility = "private";

const storageParams = {
  contentType: mimeType,
  level: visibility,
};

await Storage.put(name, file, storageParams);

What is Configured?

My AWS Config object is something like

{
  ...,
  Storage: {
    bucket: "project-name-ui-storage/cognito/project-ui",
    identityPoolId: "us-east-1:...,
    region: "us-east-1",
  },
  ...
};

Environment

  System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 191.39 MB / 16.00 GB
    Shell: 5.7.1 - /usr/local/bin/zsh
  Binaries:
    Node: 11.14.0 - ~/.nvm/versions/node/v11.14.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v11.14.0/bin/yarn
    npm: 6.14.7 - ~/.nvm/versions/node/v11.14.0/bin/npm
  Browsers:
    Chrome: 84.0.4147.135
    Edge: 84.0.522.63
    Firefox: 79.0
    Safari: 13.1.1
  npmPackages:
    @ant-design/icons: ^4.0.6 => 4.0.6
    @sentry/browser: ^5.4.0 => 5.15.4
    @testing-library/jest-dom: ^4.2.4 => 4.2.4
    @testing-library/react: ^10.0.2 => 10.0.2
    @testing-library/user-event: ^10.0.1 => 10.0.1
    @types/classnames: ^2.2.8 => 2.2.10
    @types/enzyme: ^3.10.3 => 3.10.5
    @types/graphql: ^14.2.0 => 14.5.0
    @types/jest: ^24.9.1 => 24.9.1
    @types/react: ^16.9.34 => 16.9.34
    @types/react-dom: ^16.9.6 => 16.9.6
    @types/react-redux: ^7.1.0 => 7.1.7
    @types/react-resizable: ^1.7.0 => 1.7.2
    @types/react-router-dom: ^4.3.4 => 4.3.5
    @types/webpack-env: ^1.13.9 => 1.15.1
    @typescript-eslint/parser: ^2.23.0 => 2.27.0
    antd: ^4.5.4 => 4.5.4
    aws-amplify: ^3.0.24 => 3.0.24
    aws-amplify-react: 2.3.9 => 2.3.9
    bignumber.js: ^9.0.0 => 9.0.0
    classnames: ^2.2.6 => 2.2.6
    enzyme: ^3.10.0 => 3.11.0
    enzyme-adapter-react-16: ^1.14.0 => 1.15.2
    eslint-config-prettier: ^6.10.0 => 6.10.1
    eslint-plugin-prettier: ^3.1.0 => 3.1.2
    eslint-plugin-react-hooks: ^3.0.0 => 3.0.0
    graphql: ^14.3.1 => 14.6.0
    graphql-tag: ^2.10.1 => 2.10.3
    history: ^5.0.0 => 5.0.0
    jest-environment-jsdom-sixteen: ^1.0.3 => 1.0.3
    linkifyjs: 2.1.9 => 2.1.9
    node-sass: ^4.13.1 => 4.13.1
    prettier: ^1.18.2 => 1.19.1
    react: ^16.13.1 => 16.13.1
    react-dom: ^16.13.1 => 16.13.1
    react-ga: ^2.5.7 => 2.7.0
    react-redux: ^7.1.0 => 7.2.0
    react-resizable: ^1.10.1 => 1.10.1
    react-router-dom: ^6.0.0-beta.0 => 6.0.0-beta.0
    react-scripts: 3.4.1 => 3.4.1
    redux-thunk: ^2.3.0 => 2.3.0
    stylelint: ^10.1.0 => 10.1.0
    stylelint-prettier: ^1.1.1 => 1.1.2
    typescript: ^3.8.3 => 3.8.3
  npmGlobalPackages:
    @aws-amplify/cli: 4.24.3
    npm: 6.14.7
    prettier: 2.0.4
    ts-node: 8.10.2
    tty-table: 2.7.0
    typescript: 3.9.7
    yarn: 1.22.4

[elorzafe]

That is great to hear. I will close this but feel free to create another issue if you need.

[elorzafe]

@asumaran of course happy to help!

You can do this after doing Amplify.configure(...)

Storage.configure({
  customPrefix: {
    public: 'cognito/<your user pool client name>/public/',
    protected: 'cognito/<your user pool client name>/protected/',
    private: 'cognito/<your user pool client name>/private/'
  }
})

That will use the custom prefix and you should use the original bucket name until the first /