Build a Simple S3 Storage Browser in React

It’s almost impossible to build a meaningful web application without object storage these days. Often in our apps we require access to files on s3 bucket.

Working with AWS S3 often requires building interfaces to provide secure and accessible ways for interacting with stored files. However, creating such interfaces from scratch can be time-consuming. The AWS Storage Browser component simplifies this process by providing a pre-built, configurable UI for browsing, uploading, and downloading files directly from an application, reducing the need for custom development. Let’s walk through how to set up a basic React app that integrates Amazon’s S3 Storage Browser component.

Introduction

Complex interfaces can be avoided when a robust, visual tool for browsing S3 buckets is available. The AWS Storage Browser offers:

• A visual interface for browsing and interacting with S3 buckets.
• The ability to perform essential file operations such as viewing, uploading, downloading, and deleting.
• Granular control over access based on buckets or specific prefixes.

By incorporating this component, significant time is saved, and applications gain user-friendly functionality without the need for extensive custom coding.

Step 1: Project Setup

A new React project can be created using Vite with the following commands:

npm create vite@latest my-s3-browser --template react
cd my-s3-browser
npm install

Install the required AWS Amplify dependencies:

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

Environment Configuration

Create a .env file in the root directory to store AWS credentials:

VITE_AWS_REGION=your-region
VITE_AWS_ACCOUNT_ID=your-account-id
VITE_S3_BUCKET_NAME=your-s3-bucket-name
VITE_AWS_ACCESS_KEY_ID=your-access-key-id
VITE_AWS_SECRET_ACCESS_KEY=your-secret-access-key
VITE_AWS_SESSION_TOKEN=your-session-token

Replace the placeholders with valid AWS credentials.

Step 2: File Structure and Contents

The project directory should include the following structure:

src/
  |-- App.jsx
  |-- main.jsx
  |-- StorageBrowserConfig.js

main.jsx

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import { StorageBrowser } from './StorageBrowserConfig';

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

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <StorageBrowser.Provider>
      <App />
    </StorageBrowser.Provider>
  </React.StrictMode>
)

This ensures that StorageBrowser.Provider wraps the application to provide necessary state management.

App.jsx

import React from 'react';
import { StorageBrowser } from './StorageBrowserConfig';

export default function App() {
  return (
    <div style={{ margin: '10vh 15vw', textAlign: 'center' }}>
      <h1>S3 Storage Browser</h1>
      <StorageBrowser />
    </div>
  );
}

This component renders the StorageBrowser interface with a customizable heading and layout.

StorageBrowserConfig.js

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

export const { StorageBrowser } = createStorageBrowser({
  config: {
    region: import.meta.env.VITE_AWS_REGION,
    accountId: import.meta.env.VITE_AWS_ACCOUNT_ID,
    listLocations: async () => {
      return {
        items: [
          {
            bucket: import.meta.env.VITE_S3_BUCKET_NAME,
            prefix: '',
            id: 'root',
            type: 'BUCKET',
            permissions: ['list', 'get', 'write', 'delete'],
          },
        ],
      };
    },
    getLocationCredentials: async () => {
      return {
        credentials: {
          accessKeyId: import.meta.env.VITE_AWS_ACCESS_KEY_ID,
          secretAccessKey: import.meta.env.VITE_AWS_SECRET_ACCESS_KEY,
          sessionToken: import.meta.env.VITE_AWS_SESSION_TOKEN,
          expiration: new Date(Date.now() + 3600000),
        },
      };
    },
    registerAuthListener: () => {},
  },
})

This file configures the S3 bucket details and AWS credentials required for authenticating S3 API requests.

Step 3: Running the Application

To start the application, use the following command:

npm run dev

Open a web browser and navigate to http://localhost:5173. The interface will display a title and an interactive file browser for the S3 bucket.

Demo Video:

Handling Different User Access Methods

The StorageBrowser component supports multiple authentication and authorization methods to control user access to S3 data effectively. Below are the different approaches:

1. Amplify Auth (Amazon Cognito + IAM Policies)

If you are already using AWS Amplify, this method is the fastest to implement. It uses Amazon Cognito for authentication and IAM policies for authorization. Users and groups can have specific access rules, making it ideal for customer and third-party data access scenarios.

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

Amplify.configure(config);

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

2. IAM Identity Center & S3 Access Grants

This method is recommended when you need fine-grained permissions per prefix. It allows access grants for IAM principals and corporate users.

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

export const { StorageBrowser } = createStorageBrowser({
  config: createManagedAuthAdapter({
    region: '',
    accountId: '',
    credentialsProvider: async () => ({
      credentials: {
        accessKeyId: 'my-access-key-id',
        secretAccessKey: 'my-secret-access-key',
        sessionToken: 'my-session-token',
        expiration: new Date(),
      },
    }),
  }),
});

3. Customer-Managed Authentication

Scoped AWS STS tokens must be provided for applications using custom identity and authorization services to grant access to specific S3 resources.

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

export const { StorageBrowser } = createStorageBrowser({
  config: {
    region: 'XXX',
    accountId: 'XXXXXX',
    listLocations: async () => ({ /* define accessible locations */ }),
    getLocationCredentials: async () => ({ /* return STS credentials */ }),
  },
});

Conclusion

With minimal setup, we have built an S3 browser that provides secure, authenticated access to files. You can further extend it with custom views, additional S3 permissions, or localization. This approach keeps things clean and efficient whether for internal use or end-user access.

At KubeNine, we love using simple tools like these to speed up our workflows and focus more on building features rather than managing infrastructure. This approach aligns with our goal of simplifying DevOps practices so teams can achieve more with less complexity.

This tool doesn’t just simplify your work—it allows you to move faster and handle file interactions efficiently. If you’re managing large amounts of data, it’s small improvements like these that make a big difference.

Give it a try, tweak it for your use case, and see how much easier managing S3 data can become. Happy coding!