AWS Amplify: Storage (Part 3)

Last updated on Oct 05, 2020

Hello everyone! Welcome to the Part 3 of our AWS Amplify tutorial series. In this blog post, we will be adding Storage to our application and get into the details. For those who want to know more about how we came here, you can visit our previous blog posts and check the GitHub repo for our example Amplify project.

We need storage to upload and display our book covers. Let’s add! Amplify storage uses S3 as the object storage for our content. Go on and type into your cli:

amplify add storage

Select Content, give your resource a name (which must be unique) and proceed to the authentication part. We need both guest and auth users to access these resources, but only authenticated users that are in the Admins group must be able to update them.

File Access Levels

There are three main access levels in storage: /public, /protected and /private.

• public: Anyone can upload and read the content
• protected: Uploads can be done with accounts individually, readable users will be specified
• private: Only uploader can see the content

We need all users to access, so we will be using the public access. Default behaviour of Storage.put() is to upload with public access, so we don’t need to do anything else. Now go ahead to Create.js component and update it with the code:

import React, { useState, useRef } from "react";
import { API, graphqlOperation, Storage } from "aws-amplify";
import { createBook } from "../graphql/mutations";

function Create() {
  const [bookForm, setBookForm] = useState({
    name: "",
    author: "",
    description: "",
    available: true,
    score: 0,
  });
  const imageRef = useRef();
  const handleChange = (key) => {
    return (e) => {
      setBookForm({
        ...bookForm,
        [key]: e.target.value,
      });
    };
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    var fileName = Date.now() + ".jpg";
    Storage.put(fileName, imageRef.current.files[0]).then(res => {
      PI.graphql(graphqlOperation(createBook, { input: {
        ...bookForm,
        image: fileName
      }}))
      then((e) => {
        setBookForm({
          name: "",
          author: "",
          description: "",
          available: true,
          score: 0,
        });
        window.location.href= "/";
      })
      .catch((err) => {
        console.error(err);
      });
    })
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Add new Book</h2>
      <input
      placeholder="Book Name"
      type="text"
      onChange={handleChange("name")}
      />
      <input
      placeholder="Author"
      type="text"
      onChange={handleChange("author")}
      />
      <input
      placeholder="Description"
      type="text"
      onChange={handleChange("description")}
      />
      <input
      placeholder="Score"
      type="number"
      onChange={handleChange("score")}
      />
      <input type="file" accept='image/jpg' ref={imageRef} />
      <button type="submit">Add Book</button>
    </form>
  );
}
export default Create;

We’ve added a file input ref. We use the Storage class from aws-amplify and upload our data using the .put method. When the upload is successful, we also add that path into our data. Now, Storage uploads all files under public access without any further data. You can specify them at the 3^rd parameter object, like:

{
  level: protected
}

We’ve added our files as protected. Now, we need to add image property to our GraphQL schema.

type Book
  @model
  @auth(rules: [
      {allow: public, operations:[read]},
      {allow: groups, groups: ["Admins"], operations: [create, read, update, delete]}
    ]){
 id: ID!
 name: String!
 author: String!,
 description: String,
 available: Boolean!,
 score: Float!
 image: String
}

Go ahead and provision our changes:

amplify push

Displaying Images

To display those images, we will use AmplifyS3Image component from @aws-amplify/ui-react library. Let’s import it into our code and add it to our list page:

<ul style={{display: "flex"}}>
    {books.map((book, index) => (
    <li key={index} style={{display: "flex", flexDirection: "column"}}>
        <div>
        <AmplifyS3Image style={{"--height": "150px"}} path={book.image} />
        </div>
        <Link to={`/book/${book.id}`}>
        {book.name} - {book.author}
        </Link>
    </li>
    ))}
</ul>

You can see that we are using the AmplifyS3Image component to display the content. For styling, we need to override css variables on the element, like --width and --height. We also need to add an Edit component, so that our admins can update books that don’t have covers.

Our final screen looks like this:

Go ahead and deploy your application,

amplify publish

It is amazing to experience how well AWS components are integrated into Amplify Framework and how easy it is to start using them in our frontend application. We will continue to explore AWS Amplify further! To be continued!

Interested in adopting cloud-native development for your next successful projects?Book an Appointment now to get started!