Skip to content
An example project showing how to upload and download public and private images in GraphQL using AppSync and S3
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
amplify updated readme Jun 28, 2019
public initial commit Jun 27, 2019
src minor updates Jun 28, 2019
.gitignore updated .gitignote Jun 27, 2019
.graphqlconfig.yml initial commit Jun 27, 2019
README.md updated readme Jun 28, 2019
header.jpg updated readme Jun 28, 2019
package.json
yarn.lock initial commit Jun 27, 2019

README.md

File uploads and downloads with React, AWS Amplify, AWS AppSync, and Amazon S3

This is an example project showing how to upload and download files and images using AWS Amplify, AWS AppSync, and Amazon S3

How to upload files and images with GraphQL

This project goes along with the GraphQL Tutorial - How to Manage Image & File Uploads & Downloads with AWS AppSync & AWS Amplify on Dev.to.

The question

How do I upload images and files using GraphQL with AWS AppSync?

The solution

There are a few parts to this solution:

  • You must first upload the image to a storage solution (in this example, Amazon S3)
  • After you have finished uploading the image, you will need to store a reference to this image in a database using a GraphQL mutation.
  • When you want to view a public image (public bucket), you need to:
    • Query the image URL from your database using GraphQL
  • When you want to view a private image (non-public bucket), you need to do two things:
    • First, query the image reference from your database using GraphQL
    • Get a signed URL for the image from S3

In this example, I show how to:

  1. Store images using GraphQL, AppSync, and S3 (both using public and private access)
  2. Fetch a list of images and render them in a React application
  3. Fetch a single image and render it in a React application

To deploy this app

Amplify CLI

  1. Clone the project and change into the directory
git clone https://github.com/dabit3/react-amplify-appsync-files-s3.git

cd react-amplify-appsync-s3
  1. Install the dependencies
npm install

# or

yarn
  1. Initialize and deploy the amplify project
amplify init

amplify push
  1. Run the app
npm start
  1. Change the bucket policy in your S3 bucket for files in the images folder to be public (in order for the Product images to be publicly viewable):
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/public/images/*"
        }
    ]
}
  1. Render either the private (Users) or public (Products) example in src/App.js:
import React from 'react'
import Products from './Products'
import Users from './Users'

function App() {
  return (
    <Users />
    // or <Products />
  )
}

export default App;

Amplify Console

Click the button to deploy this application to the Amplify console.

amplifybutton

Then change the bucket policy in your S3 bucket for files in the images folder to be public (in order for the Product images to be publicly viewable):

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/public/images/*"
        }
    ]
}
You can’t perform that action at this time.