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

[asumaran]

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 [email protected]

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]

@asumaran

Buckets doesnt supposed to contain slashes, You are using that cognito/project-ui prefix?

How did you configured those policies (public/private/protected)

[asumaran]

@elorzafe Thanks for respond. I'm not too familiar with AWS but I guess you are asking for this:

Policies:
  - PolicyName: "CognitoAuthorizedPolicy"
    PolicyDocument:
      Version: "2012-10-17"
      Statement:
        - Effect: "Allow"
          Action:
            - "mobileanalytics:PutEvents"
            - "cognito-sync:*"
            - "cognito-identity:*"
          Resource: "*"
        - Effect: "Allow"
          Action:
            - "s3:ListBucket"
          Resource:
            - !Sub arn:aws:s3:::${AwsNamespace}-ui-storage
          Condition:
            StringLike:
              "s3:prefix":
                - !Sub  cognito/${CognitoUserPoolClientName}
        - Effect: "Allow"
          Action:
            - "s3:GetObject"
            - "s3:PutObject"
            - "s3:DeleteObject"
          Resource:
            - !Sub arn:aws:s3:::${AwsNamespace}-ui-storage/cognito/${CognitoUserPoolClientName}/public/${!cognito-identity.amazonaws.com:sub}/*
            - !Sub arn:aws:s3:::${AwsNamespace}-ui-storage/cognito/${CognitoUserPoolClientName}/protected/${!cognito-identity.amazonaws.com:sub}/*
            - !Sub arn:aws:s3:::${AwsNamespace}-ui-storage/cognito/${CognitoUserPoolClientName}/private/${!cognito-identity.amazonaws.com:sub}/*
        - Effect: "Allow"
          Action:
            - "appsync:GraphQL"
          Resource:
            - "*"

Where

AwsNamespace = "project-name"
CognitoUserPoolClientName =  "project-ui"

The devs whom implemented the AWS stack are not in charge of the app anymore. So I'm trying to figure out the best way to fix this error without renaming all our S3 buckets..

[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 /

[asumaran]

@elorzafe that seems to have fixed the file upload. There's no warning and the file is put in the S3 Bucket. Thank you!

I'll report back if anything comes up regarding the custom prefix.

[elorzafe]

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

[asumaran]

@elorzafe sounds good to me. Thank you again.