Upload image with AWS Amplify Appsync in React

2
votes

I have a react project set up with AWS Amplify and Appsync.

I am using the GraphQL functionality in Amplify to interface with AppSync.

I am trying to upload an image to S3 from the react app. Has anyone done this through Amplify GraphQL? Could you please help?

BTW, I have read the documentation about how to do this with Apollo and aws-appsync-react. I am trying to figure out how to do with the GraphQL functionality built into Amplify.

2
graphqlaws-appsyncaws-amplify

2 Answers

2
votes

I think right now it is not possible to upload complex object via Amplify.API as for uploading with AppSync you need to submit complexObjectsCredentials to AppSync client.

const client = new AWSAppSyncClient({
    url: ENDPOINT,
    region: REGION,
    auth: { .. },
    complexObjectsCredentials: () => Auth.currentCredentials(),
});

And it seems you cant provide those credentials when configuring amplify.

Alternatively you could use 'Amplify.Storage' module to upload files without AppSync

1
votes
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

// above goes at root of application

// below is example

import { Storage } from 'aws-amplify'

var imageSrc = this.webcam.getScreenshot()

fetch(imageSrc)
    .then(res => res.blob() )
    .then( blob => {
        const file = new File( [blob], "tmp.png")
        key = "uuid_for_image"
        Storage.put(key, image)       
    })

for more info: https://aws-amplify.github.io/docs/js/storage