Adding the React Photo Picker UI component and Amplify Storage with ReactJS

In this section, we will learn how to add the Photo Picker UI component to the app, as well as the code that lets the user add a photo to the app through Amplify Storage. This will allow other users to see the photo through the app. Normally, we would need to write a lot of frontend and backend code to achieve this, but in this section, I will show you how to code in a minimal way. Let's get started:

1. Let's open the App.css file and add the following CSS code so that we can style the Amplify S3 Image UI component at the bottom of the CSS file:

   amplify-s3-image {
     --width: 400px;
   }

2. Open the App.tsx file and add the following code to it:

   import React, { useEffect, useState, SetStateAction } from "react";
   import "./App.css";
   import Amplify, { API, graphqlOperation, Storage } from "aws-amplify";
   import * as mutations from "./graphql/mutations&quot...