Front-End Web & Mobile

Build a photo gallery React app using Amplify Studio’s new file storage capabilities

Amplify Studio is visual interface for developers to easily add the most important capabilities needed to build an app (e.g. UI components, database tables, GraphQL APIs, authentication, and now file storage). With today’s launch, we have made configuring and managing file storage capabilities from Amplify Studio generally available.

This guide will teach you to build a photo gallery filled with images using AWS Amplify Studio’s new storage capabilities. We’ve added the ability to configure a storage bucket (powered by Amazon S3), a rich file browser management experience within Studio, and the ability to set authorization rules on your storage buckets. This makes development easier, and it allows app developers and administrators to manage files from within a single unified console.

AWS Amplify is the fastest and easiest way to build cloud-powered mobile and web apps on AWS. Amplify comprises a set of tools and services that enables front-end web and mobile developers to leverage the power of AWS services to build innovative and feature-rich applications. Amplify Studio is a visual interface to help accelerate full-stack, production-ready apps. You can use Amplify Studio to build your application UI (React only), configure a backend that can be further extended with the Amplify CLI, and an admin dashboard for app administrators to manage application data, files, and users.

Pre-requisites

Set up file storage

Navigate to the Storage tab to begin. From here you can either create a bucket or re-use an existing one you’ve already created (Note: if you want to reuse a bucket follow these instructions). A bucket is a container for objects stored in Amazon S3. You can name your bucket whatever you’d like, or use the pre-filled default name. For this example, we are going to create a Shibha Inu photo gallery. From here, you can also configure your bucket’s authorization rules. In this case, we’re allowing signed-in users to upload, view, and delete files, while guest users can only view files. Example file storage deployment screen. File storage name is “shibastorage”. Under signed-in users, all fields are checked (Upload, view, delete). Under Guest users, View is checked.Select Create bucket, and wait for your file storage resource to deploy. Amplify Studio uses AWS CloudFormation under-the-hood to deploy resources in your account. This aligns with AWS deployment best practices to define all cloud resource infrastructure as code so you can easily re-create these resources across AWS accounts.

Adding Files

Next, navigate to the File browser tab to view your app’s files. The File browser view lets you access and manage the files in your app backend from within Studio. App administrators can easily login to Studio to

There are several folders already created in your file storage bucket. These allow you to manage which users can view what files.

  • private/ – Files here are nested under the user whom owns the file. Only the file owner can access or edit the files.
  • protected/ – Files here are nested under the user whom owns the file. These files are accessible by all users, but editable only by the file owner.
  • public/ – Files in here are accessible by all users of your app.

Let’s start adding some images to seed data for our app. Navigate into the public/ folder and select either the Upload files button in the middle of the table, or select the Upload button in the top right of your table. This will open your computer’s finder where you can specify what file you’d like to download. Alternatively, you can drag and drop files or folders onto your browser to upload.

You can either select Upload files or drag and drop files onto your browser

In total, add three image files to the public/ folder. That should be enough for now as we build our photo gallery.

Build the React app

First, create a React web app. Run the following command in your terminal:

npx create-react-app mygallery

You can name your app anything you’d like, just replace “mygallery” with your preferred name.

Now let’s connect to the backend we just created. To do this you have to run amplify pull --appId XXX --envName XXX from your terminal. Your app information can be found in the top right corner of your Amplify Studio under Local setup instructions.

Local setup instructions

Choose your preferred editor, select javascript, and then react for the type of app and framework that you’re building. Then, select all of the default settings.

Select your preferred editor, select javascript, and react for the type of app and framework you’re building. Then, select all of the default settings.

Now let’s build some UI. To do this we are going to use the Amplify UI library. Amplify UI is an open-source design system with cloud-connected components and primitives that simplify building accessible, performant, and beautiful applications. The S3Album component renders a list of images from an S3 bucket with a single line of code. There’s only a few lines of code to add to your app using the Amplify UI component called S3Album. First install the Amplify React UI library.

yarn add aws-amplify @aws-amplify/ui-react

In your React app’s directory, navigate to src/App.js, and open it up in your preferred code editor. First, import specific Amplify libraries. Copy and paste the following to the top of App.js

import Amplify from "aws-amplify";
import {AmplifyS3Album} from "@aws-amplify/ui-react/legacy";
import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);

Then, we must create an Amplify gallery so that your images show up. I’ve also added a header tag so that you can add a title to your page. Open your App.js and update it to have the following code:

import logo from './logo.svg';
import './App.css';

import React from "react";
import Amplify from "aws-amplify";
import {AmplifyS3Album} from "@aws-amplify/ui-react/legacy";
import awsconfig from "./aws-exports";

Amplify.configure(awsconfig);

function App() {

return (

  <div>
    <h1 style={{'text-align':'center'}}>My Gallery</h1>        
    <AmplifyS3Album />
  </div>
);

}

export default App;

Save your file, and that’s it! Run npm start to test your application on localhost. You should see a gallery filled with images that you’ve uploaded to Studio. You can use the built-in Amplify file uploader to also upload images to the File browser. Try it out!

After you’ve uploaded an image from your site, refresh your Admin UI file browser. The image will show up in your Studio file browser

🥳 Success!

Congratulations! You’ve now got a fully functioning Amplify project up and running with a working file storage backend! Your site is filled with images that can be easily edited and managed directly from your Amplify Studio. As always, you can share access to Amplify Studio with your team members without giving them access to the AWS console.

Next steps

Try AWS Amplify Studio today! With the service Generally Available in 17 regions, we are excited to see what you will build.

We look forward to seeing what you develop with Amplify! Make sure to tag @AWSAmplify on twitter to share what you build and follow me for more updates.