How to use Storage Browser with existing my bucket.

[yosse95ai]

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.

I want to use the Storage Browser in Amplify UI with an existing S3 bucket. (Not the bucket created with defineStorage).

It worked for the S3 I created with Amplify, but I have tried everything and it does not work for existing S3 buckets.

What I tried

I still have Amplify Gen 2 project.

1. I have created S3 bucket (name: my-20250103-share, region: us-east-1).
2. I have created folder (name: public/) in the root and uploaded PNG file (path: public/icon.png).
3. I have added output to backend.ts. (ref: Use Amplify Storage with any S3 bucket - React - AWS Amplify Gen 2 Documentation):

   // amplify/backend.ts
   import { defineBackend } from '@aws-amplify/backend';
   import { auth } from './auth/resource';
   import { data } from './data/resource';
   
   const backend = defineBackend({
     auth,
     data,
   });
   
   backend.addOutput({
     storage: {
       "aws_region": "us-east-1",
       "bucket_name": "my-20250103-share",
     }
   })

4. I have added StorageBrowser component in my frontend:

   // src/pages/s3_browser.tsx
   import { StorageBrowser } from "@aws-amplify/ui-react-storage";
   
   function S3Browser() {
     return (
       <div className="pt-3">
         <StorageBrowser />
       </div>
     );
   }
   
   export default S3Browser;

5. I have imported above in App.tsx:

   import { BrowserRouter as Router, Route, Outlet, Routes } from "react-router-dom";
   import TopBar from "./components/topbar";
   import AIKit from "./pages/aiKit";
   import S3Browser from "./pages/s3_browser";
   
   function App() {
     return (
       <Router>
         <Routes>
           <Route
             element={
               <div>
                 <SideMenu />
                 <Outlet />
               </div>
             }
           >
             <Route path="/" element={<AIKit />} />
             <Route path="/s3" element={<S3Browser />} />
           </Route>
         </Routes>
       </Router>
     );
   }
   
   export default App;

6. I have added amplify auth in main.tsx:

   import React from "react";
   import ReactDOM from "react-dom/client";
   import App from "./App.tsx";
   import { Amplify } from "aws-amplify";
   import outputs from "../amplify_outputs.json";
   import "./index.css";
   import "@aws-amplify/ui-react/styles.css";
   import "@aws-amplify/ui-react-storage";
   import { Authenticator } from "@aws-amplify/ui-react";
   import "@aws-amplify/ui-react";
   
   Amplify.configure(outputs);
   
   ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
       <Authenticator>
         <App />
       </Authenticator>
     </React.StrictMode>
   );

7. I have edited my-20250103-share bucket's bucket policy. (ref: Use Amplify Storage with any S3 bucket - React - AWS Amplify Gen 2 Documentation):
   • amplify-amplifyvitereactt-amplifyAuthauthenticatedU-9nc5ifJu1r2B is the Cognito ID pool IAM role for my amplify auth have created.

   {
       "Version": "2012-10-17",
       "Statement": [
           {
               "Sid": "AmplifyS3Browser",
               "Effect": "Allow",
               "Principal": {
                   "AWS": "arn:aws:iam::<my-account-id>:role/amplify-amplifyvitereactt-amplifyAuthauthenticatedU-9nc5ifJu1r2B"
               },
               "Action": [
                   "s3:PutObject",
                   "s3:GetObject",
                   "s3:DeleteObject",
                   "s3:ListBucket"
               ],
               "Resource": [
                   "arn:aws:s3:::my-20250103-share/public/*",
                   "arn:aws:s3:::my-20250103-share"
               ]
           }
       ]
   }

result

When I launch and access the sandbox environment, I can see the Storage Browser UI, but not the list of objects and folders.

Please describe a solution you'd like.

I would like a way or option to use Storage Browser on S3 buckets that are not buckets created by Amplify.

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.

[yosse95ai]

Similar issues:

• [StorageBrowser] integrating existing S3 resources issue #6258

[cwomack]

@yosse95ai, thank you for opening this issue. We're tracking the feature request to better support the use of existing S3 resources within #6258 (as you referenced above).

We'll close this issue and direct anyone looking for this feature to follow #6258 for updates and progress. Feel free to upvote and comment on that one with any additional details you'd like (not already covered in this issue).