Build a Full-Stack React Application

Implementation

• Create the storage service

  To add image storage functionality, we'll use the Amplify storage category. You can keep the default selections for most of the options below, but be sure to select the create/update, read, and delete options individually by pressing the spacebar on each before pressing Enter to continue with the prompt.

  amplify add storage
  
  ? Select from one of the below mentioned services: Content (Images, audio, video, etc.)
  ? Provide a friendly name for your resource that will be used to label this category in the project: imagestorage
  ? Provide bucket name: <your-unique-bucket-name>
  ? Who should have access: Auth users only
  ? What kind of access do you want for Authenticated users? create/update, read, delete
  ? Do you want to add a Lambda Trigger for your S3 Bucket? (y/N) no

  Code snippet copied

  Copy
• Update the GraphQL schema

  Next, open amplify/backend/api/notesapp/schema.graphql and update it with the following schema:

  type Note @model @auth(rules: [ { allow: public } ] ){
    id: ID!
    name: String!
    description: String
    image: String
  }

  Code snippet copied

  Copy

  Make sure to save the file.
  

• Deploy storage service and API updates

  Now that the storage service has been configured locally and we have updated the GraphQL schema, we can deploy the updates by running the Amplify push command:
  

  amplify push --y

  Code snippet copied

  Copy
• Update the React app

  Now that the backend has been updated, let's update the React app to add the functionality to upload and view images for a note. Open src/App.js and make the following changes.

  a. First add the Storage class and Image component to your Amplify imports:

  import { API, Storage } from 'aws-amplify';
  import {
    Button,
    Flex,
    Heading,
    Image,
    Text,
    TextField,
    View,
    withAuthenticator,
  } from '@aws-amplify/ui-react';

  Code snippet copied

  Copy

  b. Update the fetchNotes function to fetch an image if there is an image associated with a note:
  

  async function fetchNotes() {
    const apiData = await API.graphql({ query: listNotes });
    const notesFromAPI = apiData.data.listNotes.items;
    await Promise.all(
      notesFromAPI.map(async (note) => {
        if (note.image) {
          const url = await Storage.get(note.name);
          note.image = url;
        }
        return note;
      })
    );
    setNotes(notesFromAPI);
  }

  Code snippet copied

  Copy

  c. Update the createNote function to add the image to the local image array if an image is associated with the note:

  async function createNote(event) {
    event.preventDefault();
    const form = new FormData(event.target);
    const image = form.get("image");
    const data = {
      name: form.get("name"),
      description: form.get("description"),
      image: image.name,
    };
    if (!!data.image) await Storage.put(data.name, image);
    await API.graphql({
      query: createNoteMutation,
      variables: { input: data },
    });
    fetchNotes();
    event.target.reset();
  }
  

  Code snippet copied

  Copy

  d. Update the deleteNote function to delete files from storage when notes are deleted:

  async function deleteNote({ id, name }) {
    const newNotes = notes.filter((note) => note.id !== id);
    setNotes(newNotes);
    await Storage.remove(name);
    await API.graphql({
      query: deleteNoteMutation,
      variables: { input: { id } },
    });
  }

  Code snippet copied

  Copy

  e. Add an additional input to the form in the return block:
  

  <View
    name="image"
    as="input"
    type="file"
    style={{ alignSelf: "end" }}
  />

  Code snippet copied

  Copy

  f. When mapping over the notes array, render an image if it exists:
  

  {notes.map((note) => (
    <Flex
      key={note.id || note.name}
      direction="row"
      justifyContent="center"
      alignItems="center"
    >
      <Text as="strong" fontWeight={700}>
        {note.name}
      </Text>
      <Text as="span">{note.description}</Text>
      {note.image && (
        <Image
          src={note.image}
          alt={`visual aid for ${notes.name}`}
          style={{ width: 400 }}
        />
      )}
      <Button variation="link" onClick={() => deleteNote(note)}>
        Delete note
      </Button>
    </Flex>
  ))}

  Code snippet copied

  Copy

  g. Commit your changes and push to GitHub. Then wait for the build to complete to see your full app live!

  git add .
  git commit -m "Added graphql and storage"
  git push origin main

  Code snippet copied

  Copy
• Run the app

  To test out the app, run the start command:
  

  npm start

  Code snippet copied

  Copy

  You should now be able to optionally upload an image for each note.
  

• Deleting the resources

  Removing individual services

  To remove individual services, you can use the Amplify remove command:

  amplify remove auth
  
  ? Choose the resource you would want to remove: <your-service-name>

  Code snippet copied

  Copy

  Then run the Amplify push command:
  

  amplify push

  Code snippet copied

  Copy

  Deleting the entire project

  To delete the project and the associated resources, you can run the Amplify delete command:

  amplify delete

  Code snippet copied

  Copy