Integrate Storage Browser for Amazon S3: A Powerful Open-Source Component for Seamless File Management using AWS Amplify and Amazon Cognito

Voiced by Amazon Polly

Amazon S3 (Simple Storage Service) is one of the most reliable and scalable cloud storage solutions. It powers millions of applications that store and serve vast amounts of data. Whether you’re working with images, videos, documents, or backups, Amazon S3 offers the flexibility and scalability needed for modern cloud-based applications.

In September 2024, Amazon launched the Storage Browser for Amazon S3, a powerful open-source component that enables users to easily interact with their S3 buckets through a user-friendly interface. This component helps developers create secure, efficient, and customizable file management experiences for end users directly within their applications.

In this blog, we will explore the Storage Browser for Amazon S3’s features and how to integrate it into your applications with ease using AWS Amplify and Amazon Cognito.

AWS Amplify is a comprehensive development platform that helps developers build, deploy, and manage web and mobile applications quickly. It provides easy-to-use libraries and tools to integrate cloud services like authentication, APIs, and file storage with minimal configuration.

Amazon Cognito is a service that handles user authentication and access control, enabling developers to securely manage user sign-ups, sign-ins, and access to app resources. Together, AWS Amplify and Cognito simplify building secure, scalable applications with seamless user management and integration with AWS services.

Some of the key features of the Storage Browser for Amazon S3 include:

File Upload and Download: Enables users to upload and download files from S3 directly through the web interface.
File Listing and Browsing: Allows users to view a list of files stored in their S3 bucket.
Secure Access: Provides secure access to files by integrating with AWS Identity and Access Management (IAM) or Amazon Cognito for user authentication and authorization.
Open-Source and Customizable: As an open-source project, developers can customize the browser to meet the specific needs of their application.

Transform Your Career with AWS Certifications

Advanced Skills
AWS Official Curriculum
10+ Hand-on Labs

Enroll Now

Setting Up the Storage Browser for Amazon S3

Pre-requisites:

An AWS account: if you don’t already have one follow the Setup Your Environment tutorial.
Your AWS profile is configured for local development.
Installed on your environment: Nodejs and npm.
Familiarity with git and a GitHub account.

To get started with the Storage Browser for Amazon S3, there are three methods to set up an authentication and authorization method with Storage Browser:

Follow these simple steps to integrate it into your application using AWS Amplify and Amazon Cognito for authentication and Authorization:

Step 1: Create a new React Application and Initialize and git repository

—–create React App——–

npm create vite@latest storageapp — –template react

cd storageapp

npm install

—–create git repository with name storageapp—–

git init

git add .

git commit -m “first commit”

git remote add origin https://github.com/<your-username>/storageapp.git

git branch -M main

git push -u origin main

*Replace your-username> with git username

Step 2: Install Amplify Packages and commit the changes to git

—–install amplify packages—–

npm create amplify@latest -y

—–install s3 storage component—–

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

—–commit changes to git—–

git add .

git commit -m “installing amplify and s3 storage component”

git push origin main

Step 3: Apply the changes shown below

3.1: Get into amplify folder and create folder “storage” with resource.ts file inside it

3.2: Update amplify/storage/resource.ts file with below code

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

export const storage = defineStorage({

name: ‘myProjectFiles’,

access: (allow) => ({

‘media/{entity_id}/*’: [

allow.entity(‘identity’).to([‘read’, ‘write’, ‘delete’])

]

})

});

3.3: Update amplify/backend.ts file with below code

import { defineBackend } from ‘@aws-amplify/backend’;

import { auth } from ‘./auth/resource’;

import { storage } from ‘./storage/resource’;

/**

* @see https://docs.amplify.aws/react/build-a-backend/ to add storage, functions, and more

defineBackend({

auth,

storage

});

3.4 update src/index.css

:root {

font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

line-height: 1.5;

font-weight: 400;

color: rgba(255, 255, 255, 0.87);

font-synthesis: none;

text-rendering: optimizeLegibility;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

max-width: 1280px;

margin: 0 auto;

padding: 2rem;

}

3.5 update src/App.jsx

import { Authenticator, Button, Heading, Flex } from “@aws-amplify/ui-react”;

import { Amplify } from “aws-amplify”;

import “@aws-amplify/ui-react/styles.css”;

import { generateClient } from “aws-amplify/data”;

import outputs from “../amplify_outputs.json”;

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

/**

* @type {import(‘aws-amplify/data’).Client<import(‘../amplify/data/resource’).Schema>}

Amplify.configure(outputs);

const client = generateClient({

authMode: “userPool”,

});

export default function App() {

return (

<Authenticator>

{({ signOut }) => (

<Flex

className=”App”

justifyContent=”center”

alignItems=”center”

direction=”column”

width=”70%”

margin=”0 auto” >

<Heading level={1}>S3 Storage browser</Heading>

<StorageBrowser />

<Button onClick={signOut}>Sign Out</Button>

</Flex>

)}

</Authenticator>

);

}

Step 4: Commit the changes into git

git add .

git commit -m “final commit”

git push origin main

Step 5: Deploy the App using Amplify

5.1: Login into your AWS account, search and click on service AWS Amplify and click on Deploy an App

5.2 select git and click on Next

5.3 update git permission to get access to git repository “storageapp” created in step 1

5.4 Review and Click on Next

5.5 Click on Save and Deploy

Step 6: Wait for app to deploy and you will URL from to run you App

https://main.xxxxxxxxxxxxxx.amplifyapp.com/

Step 7: Create Account, verify account and view the s3 storage browser ui component

Each user has access to its data and can view, list, put and delete his/her own data using above user friendly interface.

Conclusion

The Storage Browser for Amazon S3 simplifies file management integration for developers by offering an open-source, web-based interface. It allows users to upload, download, and manage files directly from their browser, ensuring seamless interaction with S3 storage. This feature offers a secure, scalable solution while maintaining full control over access permissions. Whether you’re building a media platform or document management system, the Storage Browser enhances both development efficiency and user experience. Its open-source nature allows for easy customization, making it a valuable tool for any application relying on Amazon S3.

Earn Multiple AWS Certifications for the Price of Two

AWS Authorized Instructor led Sessions
AWS Official Curriculum

Get Started Now

About CloudThat

CloudThat is a leading provider of Cloud Training and Consulting services with a global presence in India, the USA, Asia, Europe, and Africa. Specializing in AWS, Microsoft Azure, GCP, VMware, Databricks, and more, the company serves mid-market and enterprise clients, offering comprehensive expertise in Cloud Migration, Data Platforms, DevOps, IoT, AI/ML, and more.

CloudThat is the first Indian Company to win the prestigious Microsoft Partner 2024 Award and is recognized as a top-tier partner with AWS and Microsoft, including the prestigious ‘Think Big’ partner award from AWS and the Microsoft Superstars FY 2023 award in Asia & India. Having trained 650k+ professionals in 500+ cloud certifications and completed 300+ consulting projects globally, CloudThat is an official AWS Advanced Consulting Partner, Microsoft Gold Partner, AWS Training Partner, AWS Migration Partner, AWS Data and Analytics Partner, AWS DevOps Competency Partner, AWS GenAI Competency Partner, Amazon QuickSight Service Delivery Partner, Amazon EKS Service Delivery Partner, AWS Microsoft Workload Partners, Amazon EC2 Service Delivery Partner, Amazon ECS Service Delivery Partner, AWS Glue Service Delivery Partner, Amazon Redshift Service Delivery Partner, AWS Control Tower Service Delivery Partner, AWS WAF Service Delivery Partner and many more.