Storage Browser for S3: Manage Your Data Easily

By /

Empower your users to interact with your Amazon S3 data directly within your web application! Today, we’re introducing Storage Browser for S3, an open-source UI component built for AWS Amplify and React. This user-friendly interface allows authorized users to browse, upload, download, copy, and delete files stored in S3 buckets, all with granular control based on your security settings.

S3 Storage Browser

Streamlined Development, Simplified User Experience

Storage Browser for S3 alleviates the burden on developers by providing a pre-built solution for user access to S3 data. This intuitive interface requires no prior S3 or AWS familiarity from end-users, boosting their productivity and streamlining their workflow. Additionally, developers can customize the look and feel of the Storage Browser to seamlessly integrate it into your application’s design.

Getting Started: A Quick Guide

Requirements:

  • Web application built with React or a React-based framework (Next.js, Gatsby, Remix, etc.)
  • AWS Amplify and AWS Amplify UI React packages installed

Installation:

  1. Choose your installation method:
    • Install the entire @aws-amplify/ui-react library if you plan to use other Amplify UI components.
    • For Storage Browser only, use the command: npm i @aws-amplify/ui-react-storage aws-amplify
  2. Existing application? Update dependencies:
    • Update your package.json file and run npm install to update existing installations.
  3. New application setup:
    • Run npm create amplify@latest in your application directory to access Amplify’s features.

Choosing the Right Authorization Mode

Storage Browser for S3 requires proper authentication and authorization configuration to determine which S3 buckets and actions users can access. Here are three options to suit your needs:

  1. AWS Amplify Auth (Ideal for Customers & Partners):
    • Leverages Amplify Storage and AWS Cognito for user registration, sign-in, and access control.
    • Perfect for granting access to customers or third-party partners.
  2. AWS IAM Identity Center (Scalable Workforce Access):
    • Provides centralized management of S3 Access Grants permissions for users and groups, including those from external identity providers.
    • Offers increased observability through AWS CloudTrail data events.
    • Ideal for granting access to your entire workforce.
  3. IAM Roles with S3 Access Grants (IAM Principal Access):
    • Allows access for IAM identities through S3 Access Grants.
    • Involves creating an S3 Access Grants instance to map permissions and an IAM role for temporary access.
    • Ideal for granting access to specific IAM users.

Setting Up Permissions

  1. Follow the guide to set up Amplify Storage.
  2. Configure S3 buckets and desired access rules in amplify/storage/resource.ts using the Amplify authorization model and prefixes.
  3. Create a StorageBrowser component to integrate with Amplify Auth and include it in your desired page.
  4. Run the application using npm run dev. Navigate to the page with the Storage Browser component. You should see the interface loaded with the configured permissions.

Key Features:

  • Browse folders and download files.
  • Intuitive management operations through a sub-menu.
  • Automatic greying out of unavailable actions based on permissions.
  • Pagination for easy navigation through large datasets.
  • Filtering and searching capabilities for efficient data management.

Customization Options for a Perfect Fit

Storage Browser for S3 boasts a flexible design that allows customization to match your application’s style. You can modify various UI elements like buttons, breadcrumbs, paging controls, text fields, and more. Here’s how:

  1. Create a Theme:
    • Use the defineComponentTheme() function from @aws-amplify/ui-react/server to define a theme (e.g., “storage-browser”).
    • Target the elements you want to style within the theme definition.
  2. Apply the Theme:
    • Use the createTheme() function with your custom theme and apply it to the Storage Browser component.
  3. Advanced Customization:
    • Rearrange the layout by targeting elements with CSS (e.g., setting flexDirection: row-reverse).
    • Create custom themes for extensive UI modifications.
    • Leverage the createStorageBrowser() function for programmatic control and a fully custom frontend.

These customization options enable users to manager their data easily!

Related Posts

Scroll to Top