StorageBrowser RFC #5731

reesscot · 2024-09-03T18:49:50Z

Overview

StorageBrowser for Amazon S3 is an open source Amplify UI React component customers can add to their web applications to provide end-users with a simple interface for data stored in Amazon S3. Using StorageBrowser for S3, customers provide authorized end-users access to easily browse, download, and upload data in Amazon S3 from their own applications. StorageBrowser for S3 only displays the data that your end-users are authorized to access and automatically optimizes requests to deliver high throughput data transfer. You can control access to your data based on your end-user’s identity using AWS security and identity services or your own managed services.

StorageBrowser for S3 is currently in developer preview while we collect your feedback before making the component generally available. The API might change while in developer preview so we do not recommend using it in production until it is generally available. We will post updates to this RFC as we make changes to the component.

StorageBrowser for S3 has 3 main views:

Locations view: the initial view for users that show the root level S3 resources they have access to and their permissions (READ/READWRITE) for each S3 location. An S3 location is an S3 bucket or prefix, which could be defined by Amazon S3 Access Grants or defined manually.
Location detail view: a file-browser-like interface where users can browse files and folders in S3 and upload/download files
Location Action view: this view appears when users select an action like uploading files

1 Installation #

Fork the example repo:
https://github.com/reesscot/nextjs-storage-browser

OR:

You can install StorageBrowser for S3 from tagged versions of the @aws-amplify/ui-react-storage and aws-amplify packages. Add these dependencies to your package.json file:

  "dependencies": {
    "@aws-amplify/ui-react-storage": "storage-browser",
    "@aws-amplify/storage": "storage-browser",
    "aws-amplify": "storage-browser",
  }

Or add them via npm:

npm i --save @aws-amplify/ui-react-storage@storage-browser aws-amplify@storage-browser @aws-amplify/storage@storage-browser

We will publish StorageBrowser for S3 to the latest version of these packages once it is generally available.

2 Setting up authentication and authorization #

In order to show S3 locations and their contents to end users, you first need to set up your preferred authentication and authorization methods. There are 3 ways you can set up authentication/authorization with the storage browser component:

Amplify auth: If you are already using Amplify then this option lets you get started the fastest. It uses Amazon Cognito for authentication and IAM policies for authorization and access. And by using Amplify Gen 2, the access rules for users and groups can be customized.
AWS IAM Identity Center and S3 Access Grants: We recommend this option if you want to grant access on a per-S3-prefix basis to both IAM principals and directly to users or groups from your corporate directory. With S3 Access Grants capabilities, applications can request data from Amazon S3 on behalf of the current authenticated user. This means your applications no longer need to first map the user to an IAM principal. And when you use S3 Access Grants with IAM Identity Center trusted identity propagation, each AWS CloudTrail data event for S3 references the end user identity that accessed your data.
Custom auth: We recommend this option if you have your own identity and authorization service for authenticating and authorizing users in your application. To use this option, you will need to provide the list of S3 locations to display to the user and a mechanism for fetching scoped credentials for each location.

Amplify auth

Make sure you have an Amplify project started, by following the getting started guides: https://docs.amplify.aws/react/start/quickstart/. Then create an S3 bucket with access rules by defining a storage resource and adding authorization rules https://docs.amplify.aws/react/build-a-backend/storage/authorization/:

// amplify/storage/resource.ts

export const storage = defineStorage({
  name: 'myProjectFiles',
  access: (allow) => ({
    'public/*': [
      allow.guest.to(['read']),
      allow.authenticated.to(['read', 'write', 'delete']),
    ],
    'protected/{entity_id}/*': [
      allow.authenticated.to(['read']),
      allow.entity('identity').to(['read', 'write', 'delete'])
    ],
    'private/{entity_id}/*': [
      allow.entity('identity').to(['read', 'write', 'delete'])
    ]
  })
});

In your frontend code, create the StorageBrowser component with the Amplify Auth adapter:

import {
  createStorageBrowser,
  createAmplifyAuthAdapter,
} from '@aws-amplify/ui-react-storage/browser';
import '@aws-amplify/ui-react-storage/storage-browser-styles.css';

// these should match access patterns defined in amplify/storage/resource.ts
const defaultPrefixes = [
  'public/',
  (identityId: string) => `protected/${identityId}/`,
  (identityId: string) => `private/${identityId}/`,
];

export const { StorageBrowser } = createStorageBrowser({
  elements: elementsDefault, // replace to customize your UI
  config: createAmplifyAuthAdapter({
    options: {
      defaultPrefixes
    },
  }),
});

Or if you want to use Amplify Auth with prebuilt Amplify UI you can just import the default StorageBrowser component and render it:

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

// these should match access patterns defined in amplify/storage/resource.ts
const defaultPrefixes = [
  'public/',
  (identityId: string) => `protected/${identityId}/`,
  (identityId: string) => `private/${identityId}/`,
];

export default function Example() {
  return (
    <StorageBrowser defaultPrefixes={defaultPrefixes} />
  )
}

AWS Identity Center and S3 Access Grants

Enable IAM Identity Center for your organization if you haven’t already.
Create a Trusted Token Issuer in IAM Identity Center. This construct will represent your external Identity Provider, like a Microsoft Entra ID tenant, within IAM Identity Center, enabling it to recognize identity tokens for your application’s authenticated users.
Create an Application in IAM Identity Center to represent your application as it interacts with IAM Identity Center on behalf of authenticated users.
Connect your Application to the Trusted Token Issuer so that your application will able to present identity tokens for authenticated users to IAM Identity Center.
Connect your Application to S3 Access Grants so that it can make requests to S3 Access Grants on behalf of authenticated users.
Associate your Application in Identity Center with the AWS account in which it will run. This step will allow your application to make the necessary requests to its corresponding IAM Identity Center Application.

For detailed setup instructions see this blog post: https://aws.amazon.com/blogs/storage/how-to-develop-a-user-facing-data-application-with-iam-identity-center-and-s3-access-grants/

Once you have IAM Identity Center and S3 Access Grants set up, in your React application you can use createManagedAuthAdapter to set up the auth rules and createStorageBrowser to create the StorageBrowser component:

import {
    createManagedAuthAdapter,
    createStorageBrowser,
    elementsDefault
} from '@aws-amplify/ui-react-storage/browser';
import '@aws-amplify/ui-react-storage/storage-browser-styles.css';

export const { StorageBrowser } = createStorageBrowser({
   elements: elementsDefault, // replace to customize your UI
   config: createManagedAuthAdapter({
        credentialsProvider: async () => {
            // return credentials object
        },
        // AWS `region` and `accountId`
        region: '',
        accountId: '',
        // call `onAuthStateChange` when end user auth state changes 
        // to clear sensitive data from the `StorageBrowser` state
        registerAuthListener: (onAuthStateChange) => {},
   })
});

Go to step 3

Custom authentication and authorization

You can also use StorageBrowser for S3 with your own authentication and authorization setup. Rather than calling createManagedAuthAdapter or createAmplifyAuthAdapter you can directly configure how StorageBrowser for S3 lists S3 locations and gets credentials for each location:

import { createStorageBrowser, elementsDefault } from '@aws-amplify/ui-react-storage/browser';
import '@aws-amplify/ui-react-storage/storage-browser-styles.css';

export const { StorageBrowser } = createStorageBrowser({
   elements: elementsDefault, // replace to customize your UI
   config: {
    listLocations: async (input = {}) => {
      const { nextToken, pageSize } = input;
      return {
        locations: [
          {
            bucketName: '[bucket name]',
            key: '', 
            region: 'us-east-1',
            type: 'BUCKET',
            permission: 'READWRITE',
            scope: 's3://[bucket name]',
          }
        ]
      }
    },
    getLocationCredentials: async ({ scope, permission }) => {
      // get credentials for specified scope and permission
      return {
        credentials: {
          accessKeyId: '',
          secretAccessKey: '',
          sessionToken: '',
          expiration: new Date(),
        }
      }
    },
    region: '',
    registerAuthListener: (onStateChange) => {

    }
  },
})

3 Rendering the StorageBrowser #

Now that you have created the StorageBrowser component using one of the 3 auth methods above, you can place the component into your app:

export default function Page() {
  return (
    <StorageBrowser />
  )
}

4 Customizing the StorageBrowser #

Composing

StorageBrowser for S3 has 3 main views that can be composed into your application if you want to move around parts of the component:

LocationsView: initial screen showing a table with all S3 locations a user has access to
LocationDetailView: file browsing view once the user has selected an S3 location
LocationActionView: view rendered when the user initiates an action like uploading files

For example, to display the LocationsView (locations table) side-by-side with the LocationDetailView (file browser table) with the LocationActionView in a dialog:

const input = {} // `createStorageBrowser` input values
const { StorageBrowser, useControl } = createStorageBrowser(input);

function MyStorageBrowser() {
  const [{ selected }] = useControl('LOCATION_ACTIONS');

  return (
    <Flex>
      <Flex direction={'row'}>
        <StorageBrowser.LocationsView />
        <StorageBrowser.LocationDetailView />
      </Flex>
      {selected.type ? (
        <dialog open>
          <StorageBrowser.LocationActionView />
        </dialog>
      ) : null}
    </Flex>
  );
}

export default function App() {
  return (
    <StorageBrowser.Provider>
      <MyStorageBrowser />
    </StorageBrowser.Provider>
  )
}

Using a custom UI

createStorageBrowser improves bundle size by shipping without Amplify UI React Primitives, rendering basic HTML elements by default with only layout styling applied.

You can control all of the elements used in the StorageBrowser component by passing in elements to the createStorageBrowser function. Elements have a variant prop that is used to signify where that element is being used within the component tree of the StorageBrowser. For example, the Button element is used in many different places in the StorageBrowser UI, variant allows you control over how your button looks and behaves in different usage scenarios:

import { Button } from '@chakra-ui/react';
import { createStorageBrowser } from '@aws-amplify/ui-react-storage';
// layout styles
import '@aws-amplify/ui-react-storage/storage-browser-styles.css';

function MyButton({ variant, ...props }) {
  if (variant === 'table-data') {
    // return chakra ui `Button` link
    return <Button {...props} variant="link" />
  }
  return <Button {...props} />
}

const { StorageBrowser } = createStorageBrowser({
  elements: {
    Button: MyButton
  },
  //...
});

Here are all the elements that you can override:

Button
DefinitionList
DefinitionTerm
DefinitionDetail
Heading
Icon
Input
Label
ListItem
Nav
OrderedList
ProgressBar
Span
Table
TableBody
TableData
TableHead
TableHeader
TableRow
Text
UnorderedList
View

Feedback for dev preview #

We are looking for any and all feedback on StorageBrowser for S3. We would love to hear from you about bugs, aspects about the developer experience and APIs that could be improved, additional features and functionality you need, and more. We plan on addressing all of your feedback as it comes in.

Thank you to everyone that made this launch possible: @dbanksdesign @reesscot @calebpollman @timngyn @esauerbo @hbuchel @AllanZhengYP @jimblanc @ashwinkumar6 @Jordan-Nelson @haverchuck

The text was updated successfully, but these errors were encountered:

franck-chester · 2024-09-06T03:53:07Z

looks awesome. I'm now desperate to see examples of validation / feedback of the upload. for example, after uploading a CSV, a table listing the rows, together with valid/invalid.

Justin212-ship-it · 2024-09-06T11:31:04Z

Awesome,thanks for this launch, can't wait to test these features♥️🔥 and good luck to everyone and all.

soubhik · 2024-09-06T12:57:58Z

Very nice, would be even more awesome if a simple search functionality based on s3 prefixes were added.

tttol · 2024-09-07T15:52:38Z

Awesome!
I created a sample application using the Storage Browser from an Amplify application in my local environment. However, there's one thing that's bothering me.

The attached image is a screenshot of my Amplify application.

In my environment, there’s a directory structure like this: Home/amplify-storagebrowserexa-storagebrowserexamplebuc-xxx/public/blog/2023. In this case, I feel the breadcrumb should naturally display like this:

Home /
amplify-storagebrowserexa-storagebrowserexamplebuc-xxx /
public /
blog /
2023

However, it’s currently being displayed like this, with public/ shown directly after amplify-storagebrowserexa-storagebrowserexamplebuc-xxx/:

Home /
amplify-storagebrowserexa-storagebrowserexamplebuc-xxx/public /
blog /
2023

Why is public being displayed on the same line as amplify-storagebrowserexa-storagebrowserexamplebuc-xxx?

mkdev10 · 2024-09-09T02:14:44Z

Great feature, very impressed‼️Quick UI construction is amazing🚀
Feature requests:

File search
File and Folder deletion

Looking forward to the release!

m-khan82 · 2024-09-12T08:17:11Z

Just set up the Storage Browser in my environment, and I'm loving it! a couple of questions:

Is it possible to have access to the bucket root level ? If not, is there a way to enable access to the bucket root level?
How can I update the amplifyconfiguration.json file to have access to multiple buckets? I am using Amplify Auth for Authorization

naveeng2402 · 2024-09-15T02:50:00Z

Awesome package, can this use cdn(cloudfront) for file browsing and downloading and keep the bucket read access only on cdn and do we have multi bucket support

vineetkala11 · 2024-09-16T05:43:36Z

Hello @reesscot ,

Great feature! Could you please provide an approximate target date for the release of the production-ready version?

IVIURRAY · 2024-09-16T07:52:29Z

Really nice RFC 👍 Looking forward to it!

Feature Request:

Ability to peek into a S3 file / preview a files contents from the UI- (something like select * from s3_file limit 20) to get a feel for the contents of a file.

scorobogaci · 2024-09-16T08:55:53Z

Nice, looks super exciting
Few questions or feature requests

Does it work well with React Native as well ?
Does it support storage class for S3 (like it is configurable to which storage class the object to be uploaded)? Reference : https://aws.amazon.com/s3/storage-classes/
Any plans to support also delete operation (why not having all CRUD operations) ?

Thanks :)

GowthamShanmugam · 2024-09-16T09:23:26Z

AWS S3 SDK provides an "endpoint" parameter, can we configure that with this new UI browser ?

s3Client = new S3Client({
     region: '',
     endpoint: //s3 endpoint,
     credentials: {
        accessKeyId: //accessKeyId,
       secretAccessKey: //secretAccessKey,
   },
   });
}

scorobogaci · 2024-09-18T14:10:27Z

Hello, I have installed the StorageBrowser using
npm i --save @aws-amplify/ui-react-storage@storage-browser aws-amplify@storage-browser
which updated package.json like this

"@aws-amplify/ui-react-storage": "^0.0.0-storage-browser-670d987-20240905191734",
"aws-amplify": "^6.6.1-storage-browser.4949269.0",

However, not sure what these versions means, but the UI looks completely broken, including pagination, Breadcrumbs etc, see attached screenshots

The option suggested in the RFC above

  "dependencies": {
    "@aws-amplify/ui-react-storage": "storage-browser",
    "aws-amplify": "storage-browser",
  }

does not work at all, results in net::ERR_ABORTED 504 (Outdated Optimize Dep)
or the app is not building at all, failing with

✘ [ERROR] Missing "./storage-browser" specifier in "@aws-amplify/storage" package [plugin vite:dep-pre-bundle]

    node_modules/@aws-amplify/ui-react-storage/dist/esm/components/StorageBrowser/context/useGetCredentialsProvider.mjs:2:47:
      2 │ import { createLocationCredentialsStore } from '@aws-amplify/storage/storage-browser';
        ╵                                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  This error came from the "onResolve" callback registered here:

    node_modules/vite/node_modules/esbuild/lib/main.js:1150:20:

Which version to use for latest UI that behaves like in the description of this RFC ?

Thank you

scorobogaci · 2024-09-18T14:21:31Z

Feedback !
Is there any benefit on presenting the folders like this

Why displaying the bucket name ? (For end users is this really useful for something ? )
While creating the folders with name like this eu-central-1:a078238c-b118-c091-b6b0-96f42f492fca it is really ugly, end users do not care about metadata (i guess that id uuid in there is the mapping with cognito user), but why displaying it ?
The eu-central-1:a078238c-b118-c091-b6b0-96f42f492fca as an example, is it some attribute on the user on Cognito (or is just some mapping that internally amplify uses ? )

Thank you

scorobogaci · 2024-09-18T16:49:30Z

Need some help guys, not able to run it :(
package.json

{
  "name": "amplify-vite-react-template",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^6.2.0",
    "@aws-amplify/ui-react-storage": "storage-browser",
    "aws-amplify": "storage-browser",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@aws-amplify/backend": "^1.1.1",
    "@aws-amplify/backend-cli": "^1.2.4",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "aws-cdk": "^2.138.0",
    "aws-cdk-lib": "^2.138.0",
    "constructs": "^10.3.0",
    "esbuild": "^0.20.2",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "tsx": "^4.7.2",
    "typescript": "^5.4.5",
    "vite": "^5.2.0"
  }
}

Usage

import { Authenticator } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css'
import {StorageBrowser} from "@aws-amplify/ui-react-storage";

function App() {

  const defaultPrefixes = [
    'public/',
    (identityId: string) => `protected/${identityId}/`,
    (identityId: string) => `private/${identityId}/`,
  ];

  return (
      <Authenticator>
        {({signOut, user}) => (
            <>
              <h1>{user?.signInDetails?.loginId}</h1>
              <StorageBrowser defaultPrefixes={defaultPrefixes}></StorageBrowser>
              <button onClick={signOut}>Sign out</button>
            </>
        )}
      </Authenticator>
  );
}

export default App;

amplify/storage/resource.ts

import {defineStorage} from "@aws-amplify/backend";

export const storage = defineStorage({
  name: 'myProjectFiles',
  access: (allow) => ({
    'public/*': [
      allow.guest.to(['read']),
      allow.authenticated.to(['read', 'write', 'delete']),
    ],
    'protected/{entity_id}/*': [
      allow.authenticated.to(['read']),
      allow.entity('identity').to(['read', 'write', 'delete'])
    ],
    'private/{entity_id}/*': [
      allow.entity('identity').to(['read', 'write', 'delete'])
    ]
  })
});

What I am missing ? What I am doing wrong ? Getting this error always when attempting to build/run the project :(

✘ [ERROR] Missing "./storage-browser" specifier in "@aws-amplify/storage" package [plugin vite:dep-pre-bundle]

    node_modules/vite/node_modules/esbuild/lib/main.js:1225:21:
      1225 │         let result = await callback({
           ╵                      ^

    at e (file:///Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:45978:25)
    at n (file:///Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:45978:627)
    at o (file:///Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:45978:1297)
    at resolveExportsOrImports (file:///Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:46599:18)
    at resolveDeepImport (file:///Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:46622:25)
    at tryNodeResolve (file:///Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:46387:16)
    at ResolveIdContext.resolveId (file:///Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:46137:19)
    at PluginContainer.resolveId (file:///Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:48952:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:66208:15
    at async file:///Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:46888:28
    at async requestCallbacks.on-resolve (/Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/node_modules/esbuild/lib/main.js:1225:22)
    at async handleRequest (/Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/node_modules/esbuild/lib/main.js:647:11)

  This error came from the "onResolve" callback registered here:

    node_modules/vite/node_modules/esbuild/lib/main.js:1150:20:
      1150 │       let promise = setup({
           ╵                     ^

    at setup (file:///Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:46871:13)
    at handlePlugins (/Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/node_modules/esbuild/lib/main.js:1150:21)
    at buildOrContextImpl (/Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/node_modules/esbuild/lib/main.js:873:5)
    at Object.buildOrContext (/Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/node_modules/esbuild/lib/main.js:699:5)
    at /Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/node_modules/esbuild/lib/main.js:2032:68
    at new Promise (<anonymous>)
    at Object.context (/Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/node_modules/esbuild/lib/main.js:2032:27)
    at Object.context (/Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/node_modules/esbuild/lib/main.js:1874:58)
    at prepareEsbuildOptimizerRun (file:///Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:50861:33)

  The plugin "vite:dep-pre-bundle" was triggered by this import

    node_modules/@aws-amplify/ui-react-storage/dist/esm/components/StorageBrowser/context/useGetCredentialsProvider.mjs:2:47:
      2 │ import { createLocationCredentialsStore } from '@aws-amplify/storage/storage-browser';
        ╵                                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

7:44:04 PM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/vite/node_modules/esbuild/lib/main.js:1225:21: ERROR: [plugin: vite:dep-pre-bundle] Missing "./storage-browser" specifier in "@aws-amplify/storage" package
    at failureErrorWithLog (/Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/node_modules/esbuild/lib/main.js:1472:15)
    at /Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/node_modules/esbuild/lib/main.js:945:25
    at /Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/node_modules/esbuild/lib/main.js:1353:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Is this an error with vite ?

Error: Build failed with 1 error:
node_modules/@aws-amplify/ui-react-storage/dist/esm/components/StorageBrowser/context/useGetCredentialsProvider.mjs:2:47: ERROR: [plugin: vite:dep-pre-bundle] Missing "./storage-browser" specifier in "@aws-amplify/storage" package
    at failureErrorWithLog (/Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/node_modules/esbuild/lib/main.js:1472:15)
    at /Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/node_modules/esbuild/lib/main.js:945:25
    at /Users/ion/time-capsule/repository/amplify-vite-react-template/node_modules/vite/node_modules/esbuild/lib/main.js:1353:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

scorobogaci · 2024-09-19T08:31:36Z

@reesscot , do you have somewhere published a working version/project/template of this RFC please ?
Thanks a lot, versioning hell or whatever, just makes it really hard to test/play with this feature :(

reesscot · 2024-09-19T17:24:58Z

@scorobogaci It looks like you're getting the wrong versions of the dependencies somehow, can you try forcing the storage-browser version of the @aws-amplify/storage package:

npm install @aws-amplify/storage@storage-browser

Alternatively, you could try this example repo which we've been testing with on Next.js: https://github.com/reesscot/nextjs-storage-browser

reesscot · 2024-09-19T23:49:40Z

@tttol @scorobogaci In regards to the styling questions, can you tell me what order you are imported the CSS in? Also, do you have any other CSS styling that might be conflicting in your app?

scorobogaci · 2024-09-23T07:12:58Z

@scorobogaci It looks like you're getting the wrong versions of the dependencies somehow, can you try forcing the storage-browser version of the @aws-amplify/storage package:
npm install @aws-amplify/storage@storage-browser
Alternatively, you could try this example repo which we've been testing with on Next.js: https://github.com/timngyn/nextjs-storage-browser/tree/main

Perfect, thanks a lot @reesscot , explicitly adding @aws-amplify/storage@storage-browser fixed the build, and not the app is building as expected. Thanks a lot

scorobogaci · 2024-09-23T07:23:26Z

import '@aws-amplify/ui-react-storage/storage-browser-styles.css';

thanks for the hint @reesscot . I have imported the styles in the component directly import '@aws-amplify/ui-react-storage/storage-browser-styles.css'; and all works as in the description of the RFC :)

Final simple component looks like this and works fine 👍

import { Authenticator } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css'
import '@aws-amplify/ui-react-storage/storage-browser-styles.css';
import {StorageBrowser} from "@aws-amplify/ui-react-storage";

function App() {

  const defaultPrefixes = [
    'public/',
    (identityId: string) => `protected/${identityId}/`,
    (identityId: string) => `private/${identityId}/`,
  ];

  return (
      <Authenticator>
        {({signOut, user}) => (
            <>
              <h1>Hi {user?.signInDetails?.loginId}</h1>
              <StorageBrowser defaultPrefixes={defaultPrefixes}></StorageBrowser>
              <button onClick={signOut}>Sign out</button>
            </>
        )}
      </Authenticator>
  );
}

export default App;

scorobogaci · 2024-09-23T09:08:18Z

Why when using createStorageBrowser getting such error ?

Reference :

import {
    createStorageBrowser,
    createAmplifyAuthAdapter, elementsDefault,
} from '@aws-amplify/ui-react-storage/browser';
import '@aws-amplify/ui-react-storage/storage-browser-styles.css';

const defaultPrefixes = [
    (identityId: string) => `files/${identityId}/`,
];

export const { StorageBrowser,useControl } = createStorageBrowser({
    elements: elementsDefault,
    config: createAmplifyAuthAdapter({
        options: {
            defaultPrefixes
        },
    }),
});

Amplify.configure(outputs); is being invoked 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";

Amplify.configure(outputs);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Also, amplify_outputs.json has been updated with the json downloaded from Amplify Console

tttol · 2024-09-23T12:50:03Z

@reesscot
Thank you for replying.
I was only importing @aws-amplify/ui-react/styles.css, but it improved a bit after also importing @aws-amplify/ui-react-storage/storage-browser-styles.css like this:

import "@aws-amplify/ui-react-storage/storage-browser-styles.css";
import "@aws-amplify/ui-react/styles.css";

However, the box displaying the list of objects in the bucket feels a bit narrow. Is this the intended behavior?

This is my repository that I tried StorageBrowser.
https://github.com/tttol/storage-browser-example

reesscot · 2024-09-23T15:56:55Z

Hi @tttol,
Yeah, it shouldn't have a limited width. Please reverse the order of your css imports here:
https://github.com/tttol/storage-browser-example/blob/main/src/app/components/DefaultStorageBrowser.tsx#L3-L4:

import "@aws-amplify/ui-react/styles.css";
import "@aws-amplify/ui-react-storage/storage-browser-styles.css";

Khaled-El-Mansoury-EG · 2024-09-25T12:23:08Z

This looks great!

Just to add to the feature requests:

Tags management

koiker · 2024-09-30T18:59:31Z

This is a great announcement. Thank you team for bringing this feature to the community.
I will take a try to integrate this component with Cloudscape UI.

cjplay02 · 2024-09-30T20:22:38Z

This looks cool. If I do a rename or copy from folder to folder in the same bucket, will it execute in-cloud or on-client? Is there a "bucket to bucket" option that can happen on the origin versus on the user client?

scorobogaci · 2024-10-02T15:29:47Z

@scorobogaci It looks like you're getting the wrong versions of the dependencies somehow, can you try forcing the storage-browser version of the @aws-amplify/storage package:
npm install @aws-amplify/storage@storage-browser
Alternatively, you could try this example repo which we've been testing with on Next.js: https://github.com/timngyn/nextjs-storage-browser/tree/main

why would we need this ?

This package contains the AWS Amplify Storage category and is intended for internal use only. To integrate Amplify into your app, please use aws-amplify.

Why explicitly adding it ? Can you provide a sample please of this RFC working with https://docs.amplify.aws/react/start/quickstart/ please ? It's almost unmanageable... this tag storage-browser break auth, breaks data... Provide a sample please with some versioning really working with amplify gen 2 at least

reesscot · 2024-10-02T16:31:17Z

@scorobogaci I'm making this suggestion because it forces the correct internal version of the @aws-amplify/storage package. You need all the Amplify JS packages to be using the storage-browser tag for this to work correctly, so if you have other packages. This won't be required when we release the feature as a generally available release (non-tagged version).

This sample version is using Gen2 https://github.com/timngyn/nextjs-storage-browser/tree/main

In order to debug the "Amplify Storage configuration not found issue" mentioned above, can you please share the contents of your amplify_outputs.json file (with sensitive information redacted?)

scorobogaci · 2024-10-02T16:44:09Z

https://github.com/timngyn/nextjs-storage-browser/tree/main

Sample is not reachable, 404

reesscot · 2024-10-02T18:41:08Z

@scorobogaci Sorry about that, I just made this example repo and was able to get it running and deployed to Amplify Hosting.
https://github.com/reesscot/nextjs-storage-browser

scorobogaci · 2024-10-02T19:28:36Z

@reesscot , I see you've edited a bit the setup by adding

  "dependencies": {
    "@aws-amplify/ui-react-storage": "storage-browser",
    "@aws-amplify/storage": "storage-browser",
    "aws-amplify": "storage-browser",
  }

explicitly @aws-amplify/storage just so you know adding this package has serious issue with generation of the amplify_outputs.json when using CI of Amplify Gen 2. After you add the storage definition and do the deployment, the amplify_output.json is not getting updated with the storage (only after a day it does) :(

Man, can you please review this setup and this tag/RFC so that is work with other components of the Amplify please ? It is becoming a nightmare already

reesscot · 2024-10-02T19:56:32Z

@scorobogaci Can you please try out the example repo app?
https://github.com/reesscot/nextjs-storage-browser
I tested it this morning and was able to fully deploy it to Amplify Hosting. It includes a package-lock.json file will will ensure you get the correct dependencies to test out the Storage Browser.

The @aws-amplify/storage package will have no effect on the amplify_outputs.json file. It's just a client side JS library and does not generate backend resources. The @aws-amplify/backend-cli

What issues are you having with deploying changes? When I've had issues with deploying changes to the storage definitions, it's usually been a missing command in the amplify.yml file. Specifically check to make sure you have this line: https://github.com/reesscot/nextjs-storage-browser/blob/main/amplify.yml#L7

scorobogaci · 2024-10-04T07:26:50Z

@scorobogaci Can you please try out the example repo app? https://github.com/reesscot/nextjs-storage-browser I tested it this morning and was able to fully deploy it to Amplify Hosting. It includes a package-lock.json file will will ensure you get the correct dependencies to test out the Storage Browser.

The @aws-amplify/storage package will have no effect on the amplify_outputs.json file. It's just a client side JS library and does not generate backend resources. The @aws-amplify/backend-cli

What issues are you having with deploying changes? When I've had issues with deploying changes to the storage definitions, it's usually been a missing command in the amplify.yml file. Specifically check to make sure you have this line: https://github.com/reesscot/nextjs-storage-browser/blob/main/amplify.yml#L7

Alright mate, the issue is ... once you add the package "@aws-amplify/storage": "storage-browser" breaks the generation of the amplify_outputs.json, the storage definition won't be added after deployment once "@aws-amplify/storage": "storage-browser" is added. More than that, by breaking this thing, even data (amplify client) won't generate anymore :(
Please validate it, there are incompatibilities with "@aws-amplify/storage": "storage-browser", validate it please.
So, once this package is added, the storage definition for example

export const storage = defineStorage({
  name: 'myProjectFiles',
  access: (allow) => ({
    'public/*': [
      allow.guest.to(['read']),
      allow.authenticated.to(['read', 'write', 'delete']),
    ],
    'protected/{entity_id}/*': [
      allow.authenticated.to(['read']),
      allow.entity('identity').to(['read', 'write', 'delete'])
    ],
    'private/{entity_id}/*': [
      allow.entity('identity').to(['read', 'write', 'delete'])
    ]
  })
});

won't be added to amplify_outputs.json

scorobogaci · 2024-10-04T07:54:35Z

@scorobogaci Can you please try out the example repo app? https://github.com/reesscot/nextjs-storage-browser I tested it this morning and was able to fully deploy it to Amplify Hosting. It includes a package-lock.json file will will ensure you get the correct dependencies to test out the Storage Browser.
The @aws-amplify/storage package will have no effect on the amplify_outputs.json file. It's just a client side JS library and does not generate backend resources. The @aws-amplify/backend-cli
What issues are you having with deploying changes? When I've had issues with deploying changes to the storage definitions, it's usually been a missing command in the amplify.yml file. Specifically check to make sure you have this line: https://github.com/reesscot/nextjs-storage-browser/blob/main/amplify.yml#L7

Alright mate, the issue is ... once you add the package "@aws-amplify/storage": "storage-browser" breaks the generation of the amplify_outputs.json, the storage definition won't be added after deployment once "@aws-amplify/storage": "storage-browser" is added. More than that, by breaking this thing, even data (amplify client) won't generate anymore :( Please validate it, there are incompatibilities with "@aws-amplify/storage": "storage-browser", validate it please. So, once this package is added, the storage definition for example
export const storage = defineStorage({
  name: 'myProjectFiles',
  access: (allow) => ({
    'public/*': [
      allow.guest.to(['read']),
      allow.authenticated.to(['read', 'write', 'delete']),
    ],
    'protected/{entity_id}/*': [
      allow.authenticated.to(['read']),
      allow.entity('identity').to(['read', 'write', 'delete'])
    ],
    'private/{entity_id}/*': [
      allow.entity('identity').to(['read', 'write', 'delete'])
    ]
  })
});
won't be added to amplify_outputs.json

ignore this please, I forgot to add storage do backend definition, ignore me please. Sorry, will re-try now

github-actions bot added the pending-triage Issue is pending triage label Sep 3, 2024

reesscot added question General question and removed pending-triage Issue is pending triage labels Sep 3, 2024

dbanksdesign changed the title ~~RFC Placeholder~~ StorageBrowser RFC Sep 5, 2024

dbanksdesign self-assigned this Sep 5, 2024

reesscot pinned this issue Sep 5, 2024

reesscot added the Storage An issue or a feature-request for Storage Component label Sep 10, 2024

raylrui mentioned this issue Sep 16, 2024

OrcaUI: pair along with FileManager API to able to browse runs output data umccr/orca-ui#4

Closed

aws-amplify deleted a comment from susmitpy Sep 16, 2024

reesscot mentioned this issue Sep 16, 2024

More detail please on the installation instructions #5779

Closed

2 tasks

github-actions bot added the pending-maintainer-response Issue is pending response from an Amplify UI maintainer label Sep 19, 2024

reesscot removed the pending-maintainer-response Issue is pending response from an Amplify UI maintainer label Sep 23, 2024

github-actions bot added the pending-maintainer-response Issue is pending response from an Amplify UI maintainer label Sep 25, 2024

github-actions bot removed the pending-maintainer-response Issue is pending response from an Amplify UI maintainer label Oct 2, 2024

github-actions bot added the pending-maintainer-response Issue is pending response from an Amplify UI maintainer label Oct 2, 2024

github-actions bot removed the pending-maintainer-response Issue is pending response from an Amplify UI maintainer label Oct 2, 2024

github-actions bot added the pending-maintainer-response Issue is pending response from an Amplify UI maintainer label Oct 2, 2024

github-actions bot removed the pending-maintainer-response Issue is pending response from an Amplify UI maintainer label Oct 2, 2024

mrkpatchaa mentioned this issue Oct 3, 2024

Digest - Week 2024/40 mrkpatchaa/mrkpatchaa.com#79

Open

github-actions bot added the pending-maintainer-response Issue is pending response from an Amplify UI maintainer label Oct 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

StorageBrowser RFC #5731

StorageBrowser RFC #5731

reesscot commented Sep 3, 2024 •

edited

Loading

franck-chester commented Sep 6, 2024

Justin212-ship-it commented Sep 6, 2024

soubhik commented Sep 6, 2024

tttol commented Sep 7, 2024 •

edited

Loading

mkdev10 commented Sep 9, 2024 •

edited

Loading

m-khan82 commented Sep 12, 2024

naveeng2402 commented Sep 15, 2024

vineetkala11 commented Sep 16, 2024

IVIURRAY commented Sep 16, 2024

scorobogaci commented Sep 16, 2024 •

edited

Loading

GowthamShanmugam commented Sep 16, 2024 •

edited

Loading

scorobogaci commented Sep 18, 2024 •

edited

Loading

scorobogaci commented Sep 18, 2024

scorobogaci commented Sep 18, 2024 •

edited

Loading

scorobogaci commented Sep 19, 2024

reesscot commented Sep 19, 2024 •

edited

Loading

reesscot commented Sep 19, 2024

scorobogaci commented Sep 23, 2024

scorobogaci commented Sep 23, 2024

scorobogaci commented Sep 23, 2024 •

edited

Loading

tttol commented Sep 23, 2024

reesscot commented Sep 23, 2024

Khaled-El-Mansoury-EG commented Sep 25, 2024

koiker commented Sep 30, 2024

cjplay02 commented Sep 30, 2024

scorobogaci commented Oct 2, 2024

reesscot commented Oct 2, 2024 •

edited

Loading

scorobogaci commented Oct 2, 2024

reesscot commented Oct 2, 2024

scorobogaci commented Oct 2, 2024

reesscot commented Oct 2, 2024

scorobogaci commented Oct 4, 2024

scorobogaci commented Oct 4, 2024

StorageBrowser RFC #5731

StorageBrowser RFC #5731

Comments

reesscot commented Sep 3, 2024 • edited Loading

Overview

1 Installation #

2 Setting up authentication and authorization #

Amplify auth

AWS Identity Center and S3 Access Grants

Custom authentication and authorization

3 Rendering the StorageBrowser #

4 Customizing the StorageBrowser #

Composing

Using a custom UI

Feedback for dev preview #

franck-chester commented Sep 6, 2024

Justin212-ship-it commented Sep 6, 2024

soubhik commented Sep 6, 2024

tttol commented Sep 7, 2024 • edited Loading

mkdev10 commented Sep 9, 2024 • edited Loading

m-khan82 commented Sep 12, 2024

naveeng2402 commented Sep 15, 2024

vineetkala11 commented Sep 16, 2024

IVIURRAY commented Sep 16, 2024

scorobogaci commented Sep 16, 2024 • edited Loading

GowthamShanmugam commented Sep 16, 2024 • edited Loading

scorobogaci commented Sep 18, 2024 • edited Loading

scorobogaci commented Sep 18, 2024

scorobogaci commented Sep 18, 2024 • edited Loading

scorobogaci commented Sep 19, 2024

reesscot commented Sep 19, 2024 • edited Loading

reesscot commented Sep 19, 2024

scorobogaci commented Sep 23, 2024

scorobogaci commented Sep 23, 2024

scorobogaci commented Sep 23, 2024 • edited Loading

tttol commented Sep 23, 2024

reesscot commented Sep 23, 2024

Khaled-El-Mansoury-EG commented Sep 25, 2024

koiker commented Sep 30, 2024

cjplay02 commented Sep 30, 2024

scorobogaci commented Oct 2, 2024

reesscot commented Oct 2, 2024 • edited Loading

scorobogaci commented Oct 2, 2024

reesscot commented Oct 2, 2024

scorobogaci commented Oct 2, 2024

reesscot commented Oct 2, 2024

scorobogaci commented Oct 4, 2024

scorobogaci commented Oct 4, 2024

reesscot commented Sep 3, 2024 •

edited

Loading

tttol commented Sep 7, 2024 •

edited

Loading

mkdev10 commented Sep 9, 2024 •

edited

Loading

scorobogaci commented Sep 16, 2024 •

edited

Loading

GowthamShanmugam commented Sep 16, 2024 •

edited

Loading

scorobogaci commented Sep 18, 2024 •

edited

Loading

scorobogaci commented Sep 18, 2024 •

edited

Loading

reesscot commented Sep 19, 2024 •

edited

Loading

scorobogaci commented Sep 23, 2024 •

edited

Loading

reesscot commented Oct 2, 2024 •

edited

Loading