Today, we’re introducing Storage Browser for Amazon S3, an open source UI component you can add to your web applications to enable end users to interact with your data stored in Amazon Simple Storage Service (Amazon S3). With this frontend component, authorized end users can browse, upload, download, copy, and delete data from Amazon S3 based on their specific permissions, which you control using AWS identity and security services or custom managed solutions.

Storage Browser for S3 eases the strain on developers looking to provide end users with access to data in S3, and it is designed so that end users, such as customers, partners, and employees, can efficiently work with data regardless of their familiarity with Amazon S3 or Amazon Web Services. Additionally, developers can customize the look and feel of the Storage Browser interface to align with their application’s design.

Let’s walk through a quick demo to show how you can get started.

Installation
Storage Browser for S3 is an AWS Amplify UI React component, therefore, you must use it in a web application built with React or a React-based framework such as Next.Js, Gatsby, Remix, or any others. You also must have both AWS Amplify and the AWS Amplify UI React packages installed.

This demo uses Next.js. If you want to learn how to set up an app from scratch, check out this step-by-step guide on configuring AWS Amplify and using the Amplify React UI components with a new Next.js application.

You don’t need to install the entire @aws-amplify/ui-react library to use Storage Browser for S3.You can install only the storage-specific package with the following command if that is all you intend to use.

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

If you have an existing application that already has the Amplify UI React package installed, make sure to update your dependencies to import the latest version, and run npm install to update any existing installations.

Lastly, if you’re building an application from scratch, make sure to run npm create amplify@latest in your application’s directory so you’re able to use the various categories provided by Amplify like auth, storage, and others.

Choosing an authorization mode
Storage Browser for S3 requires authentication and authorization to be configured so it can render the S3 buckets or prefixes that end users can access as well as the actions they can perform.

There are three options for setting up permissions, each suitable for different use cases:

Using AWS Amplify Auth – This option is ideal when you want to provide your customers and third-party partners access to your data in Amazon S3. You can set up Amplify Storage which uses AWS Amplify Auth by default to manage access control and security for files. This is powered by Amazon Cognito and comes with pre-built UI components for implementing user registration, sign-in, and sign-out flows.

Using AWS IAM Identity Center – This option is ideal for a scalable solution providing your whole workforce with access to your data in S3 through Storage Browser for S3 . You associate an S3 Access Grants instance with your AWS Identity and Access Management (IAM) Identity Center to centrally manage S3 Access Grants permissions for your users and groups, including those hosted on external identity providers such as Microsoft Entra ID, Okta, and others. Additionally, each AWS CloudTrail data event for S3 references the end-user identity that accessed your data which helps to increase the observability for your data access.

Using IAM roles with Amazon S3 Access Grants – This option is ideal when you want to provide IAM principals with access to your data through Storage Browser for S3. To set this up, you must first create an S3 Access Grants instance that you can use to map permissions for S3 buckets and prefixes to the desired IAM identities. Then you create an IAM role that has permissions to invoke s3:GetDataAccess to get temporary least-privilege access to S3 buckets or prefixes.

This demo assumes the end users are not part of our organization so Amplify Auth is a great match for this case.

Setting up permissions
First, you must set up Amplify Storage by following this guide. Then, open amplify/storage/resource.ts to declare an S3 bucket alongside the desired access rules following the Amplify authorization model which utilizes prefixes to configure isolated storage for authorized users.

Next, create a component called StorageBrowser which encapsulates the integration with Amplify Auth and that we can easily drop in a page later. Make sure to call Amplify.config() to stitch it all together with a a reference to amplify_outputs.json as a parameter.

Visit the S3 User Guide for detailed instructions for setting up authentication and authorization for Storage Browser for S3.

Adding Storage Browser for S3 to my application
Now that the component is created, you just need to add it to your application in a page where you want to render it by declaring <StorageBrowser/>.

Use npm run dev to run the application. After it loads, navigate to the page where you added Storage Browser For S3 and you should see it loaded with the default layout. Notice also that it is configured with the same paths and permissions that we defined in amplify/storage/resource.ts above allowing users to browse, read, write, and delete files inside the S3 buckets and prefixes that we have set up.

You can download files and browse folders while accessing management operations from the sub-menu which automatically greys out any unavailable actions.

Storage Browser for S3 automatically pages results and makes it possible to filter and search for files and folders, making it easy to navigate and manage data.

All data access is governed by the configured authorization model enabling end users to seamlessly interact with S3 buckets and prefixes through a highly intuitive interface without compromising your security or compliance requirements.

Customizing the interface
Thanks to its flexible design, you can customize Storage Browser For S3 to match the look and feel of your application. Much like any other Amplify UI components it will use the Amplify theme you have active in your application by default. However, you can easily modify any of its components such as the buttons, breadcrumb, the paging controls, text fields, and others, by creating your own theme or targeting elements directly using CSS.

To create a theme, first you must declare it using the defineComponentTheme() function from the @aws-amplify/ui-react/server library. You give it a name such as 'storage-browser' and then target the elements that you want to style.

You can even rearrange the layout as well if you want. In the code you can see that we are setting the flexDirection of all controls to 'row-reverse', for example.

Then you create the theme using the createTheme() function using the storage-browser theme we declared earlier and apply it. We also override the primaryColor and make it green.

After the page is reloaded, you should see the Storage Browser for S3 component with its new more compact layout and new color scheme with green text.

You can customize essentially any element of the UI interface including any of the display texts such as the title where it says Home, or any others. The only exceptions are the details about the data, of course, such as the bucket names and keys. You can take advantage of this to add support for different languages, for example.

Finally, if you prefer to create your own UI from scratch, you call the createStorageBrowser() function to create a Storage Browser for S3 component programatically. It returns a useView() hook that you can use to integrate with your own custom frontend, giving you full control over the look and feel while leveraging all of the same features. To learn more, see the documentation for more details on the various customization options and how to configure them.

Conclusion
Storage Browser for S3 is a highly customizable and user-friendly AWS Amplify UI React component which enables end users to interact with data on Amazon S3 securely. It gives you full control of the access rules to ensure the frontend complies with your access requirements while providing a great user experience through an interface that you can style to make it appear as a natural extension of your application.

Things to know

Getting started – You can install Storage Browser for S3 from the GitHub page. For more information on getting started, visit the UI documentation.

Compatibility – Storage Browser for S3 is compatible with all Amazon S3 storage classes except for Glacier Flexible Retrieval and S3 Glacier Deep Archive. It is compatible with S3 Intelligent-Tiering, but it’s not compatible with the S3 Intelligent-Tiering Archive Access Tier or the S3 Intelligent-Tiering Deep Archive Access Tier..

Performance and durability – Storage Browser for S3 includes built-in logic that enhances upload requests for high-throughput data transfer, calculates checksums of uploaded data (rejecting requests that fail these durability checks), and optimizes performance for faster load times in your application.

Pricing – Storage Browser for S3 is open source and you can integrate it with your applications at no extra cost. You only pay for your use of the underlying AWS resources you use with Storage Browser for S3.

Support – Storage Browser for S3 is backed by AWS Support just like any other feature of S3. Customers with Business and Enterprise Support plans get 24/7 access to AWS Support engineers to support their use of Storage Browser for S3.

Feedback – We invite you to share feedback on the functionality and the public roadmap for Storage Browser for S3.

Matheus Guimaraes | @codingmatheus

Blog Article: Here