Amplify-js: Storage.configure does not seem to work as expected

[ritesh]

Describe the bug
A clear and concise description of what the bug is.

Following the React tutorial from here: https://aws-amplify.github.io/docs/js/react, I get to the point where I set Storage.configure({level: 'private'}). When I upload files as a Cognito authenticated user, these end up in public/ not in private/ as I would expect.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://aws-amplify.github.io/docs/js/react - Follow the tutorial until just before Adding GraphQL.

Your App.js file should look like this

import React, { Component } from 'react';
import './App.css';


//Amplify stuff
import Amplify, { Analytics, Storage } from 'aws-amplify';
import awsmobile from './aws-exports';
import { withAuthenticator, S3Album } from 'aws-amplify-react';
Amplify.configure(awsmobile);
Amplify.Logger.LOG_LEVEL = 'DEBUG'
Storage.configure({ level: 'private' });

class App extends Component {
  uploadFile = (evt) => {
    const file = evt.target.files[0];
    const name = file.name;

    Storage.put(name, file).then(() => {
      this.setState({ file: name });
    })
  }

  componentDidMount() {
    Analytics.record('Amplify_CLI');
  }

  render() {
    return (
      <div className="App">
        <p> Pick ANY file</p>
        <input type="file" onChange={this.uploadFile} />
        <S3Album level="private" path='' />
      </div >
    );
  }
}

export default withAuthenticator(App, true);

1. Run the application either locally or amplify publish and view it.
2. Authenticate using Cognito credentials and try to upload a file.
3. Verify that that the files end up in your public/ in the S3 bucket where uploads go.

Expected behavior
I would expect the file would end up in private since I've configured my application with Storage.configure({level: 'private'}). However I can get it my uploads to go to the private area of the bucket if I change it to Storage.put(name, file, {level: 'private'}).then(... (i.e. per invocation of Storage.put)

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

Desktop (please complete the following information):

• OS: macOS
• Browser: Firefox
• Version: 60.5.0esr (64-bit)

Can reproduce on Chrome, too.

*Additional info *

I'm a JS/React newbie so I'm not sure what else info would be helpful here.

ritsinha # amplify --version
0.1.38

ritsinha # cat package.json
{
  "name": "bc-amplify",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "aws-amplify": "^1.1.19",
    "aws-amplify-react": "^2.3.0",
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "react-scripts": "2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

[manueliglesias]

Hi @ritesh

Thank you for the detailed bug report. I am labeling the issue as a bug so we can plan and address it

[haverchuck]

@ritesh - Just wanted to give you an update. We have found the root cause and are closing in on a solution. We need to do a bit of testing, and will publish this to our unstable branch as soon as we can.

[elorzafe]

@ritesh there is a new unstable version @aws-amplify/[email protected]
that has the fix for this problem. We will do a latest release soon.