add intial path to StorageBrowser

[ajishab]

On which framework/platform would you like to see this feature implemented?

React

Which UI component is this feature-request for?

Storage

Please describe your feature-request in detail.

with the native s3 console I can share links to subfolders, with storage browser it always refreshes at the base level (all configured paths). I would like to be able to browse to a subpath automatically based on URL.

Please describe a solution you'd like.

I want to use a react router to define the path to display in storage browser. eg vs storage browser starting at the at base level.

We love contributors! Is this something you'd be interested in working on?

• 👋 I may be able to implement this feature request.
• ⚠️ This feature might incur a breaking change.

[calebpollman]

Hi @ajishab is your project using the predefined StorageBrowser or createStorageBrowser? For example:

// predefined StorageBrowser
import { StorageBrowser } from '@aws-amplify/ui-react-storage';

// createStorageBrowser
import { createStorageBrowser } from '@aws-amplify/ui-react-storage/browser';

[ajishab]

@calebpollman we are using createStorageBrowser and specifiying S3 via amplif configure, with below code. Basically, we want to add a path from react router (or even query param) to the page and have it so that if a path is specified, it loads the bucket in the specified folder vs at the root. The use case is we want to be able to send users a link to a particular folder that they are actively working on, vs having to send them a link and tell them to goto a particular folder within the link. For now its just ease of use and we dont care if users can still navigate to other folders within the bucket, but that would be something we would like to do in the future as well.

Amplify.configure({
  Auth: {
    Cognito: {
  // https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#set-up-backend-resources
      userPoolId: "us-east-1=redacted", // import.meta.env.VITE_USER_POOL_ID,
      userPoolClientId: "redacted", // import.meta.env.VITE_USER_POOL_CLIENT_ID,
      identityPoolId: "redacted", // import.meta.env.VITE_IDENTITY_POOL_ID,
      allowGuestAccess: false,
      loginWith:{
        email: true
      },
    }
},
Storage: {
  S3: {
    bucket: 'shared-root-bucket,
    region: 'us-east-1',
    buckets: {
      "shared-root-bucketiI: {
        bucketName: 'shared-root-bucket',
        region: 'us-east-1',
        paths: {
          "": {
            // ↓ working.
            "guest": ["read"],
            "authenticated": ["read", "write"]
          }
        }
      }
    }
  },
},
})


const { StorageBrowser } = createStorageBrowser({
  config: createAmplifyAuthAdapter(),
  
});

const S3Viewer: React.FC = () => {
  const { path = '' } = useParams<{ path: string }>();

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
              <h1>Contents of S3 Path: /{path || 'root'}</h1>
    </div>
  );
};

const App: React.FC = () => (
  <Authenticator variation="modal">
    {({ signOut, user }) => (
      <Router>
        <Routes>
          <Route path="/:path*" element={<S3Viewer />} />
          <Route path="/" element={<S3Viewer />} />
        </Routes>
        <h1>Hello {user.username}</h1>
        <StorageBrowser />
        <button onClick={signOut}>Sign Out</button>
      </Router>
    )}
  </Authenticator>
);

[cwomack]

@ajishab, we're marking this as a documentation feature request because we need to improve the docs to provide instructions on how to do this. This is available out of the box with StorageBrowser, but want to document the proper way to set this up. We'll provide a PR linked soon with the documentation updates when ready. Thanks!