AppSync S3Object Wont Upload in React-Native

EDIT : More Details

I have created my file object out of a picture from Image-Picker in React-Native. Then I am attempting to send the username and file (picture) to AWS AppSync via S3ObjectInput.

When I send it, it should hit the resolver and be moved to the S3 public bucket and also be storing the url info in the S3Object in DynamoDB. When I execute the mutation. Nothing is happening. Any help would be greatly appreciated!

I’ve tried to share as much of my code as possible.

AppSync Schema :

input CreateTestFileInput { username: String! file: S3ObjectInput! }

type TestFile { username: String file: S3Object }

type S3Object { bucket: String! region: String! key: String! }

input S3ObjectInput { bucket: String! region: String! localUri: String key: String mimeType: String }

createTestFile(username: String!, file: S3ObjectInput!): TestFile

React-Native code & mutation :

//I am taking the uri from ImagePicker and placing it in “uri” via result in state. Then turning the //uri into blob().

sendPicS3 = async () => { let file; let uri = this.state.result.uri;

//turn uri into blob const imageData = await fetch(uri) const blobData = await imageData.blob()

//take name and type from blobData const fileName = blobData.data.name; const mimeType = blobData.data.type;

if (uri) { const { fileName, type: mimeType } = uri; const [, , , extension] = /([^.]+)(.(\w+))?$/.exec(fileName);

const bucket = AWSConfig.aws_content_delivery_bucket; const region = AWSConfig.aws_content_delivery_bucket_region; const key = [uuidV4(), extension].filter(x => !!x).join(‘.’);

file = { bucket, key, region, mimeType: blobData.data.type, localUri: blobData, };

this.props.onCreateTestFile({ username: this.state.username, file: file, })

//console.log(file) = below output : // bucket: “my-bucket-layout-hidden” // key: “my-key-hidden” // localUri: Blob {_data: {…}} // mimeType: “image/jpeg” // region: “us-east-1” } }

Graph QL mutation for component above : graphql(CreateTestFile, { props: props => ({ onCreateTestFile: testfile => props.mutate({ variables: { testfile }, optimisticResponse: { __typename: ‘Mutation’, createTestFile: { …testfile, __typename: ‘TestFile’,

file: { __typename: ‘S3Object’, …testfile.file, }, } }, }) }) })

GraphQL-tag mutation :

import graphql from ‘graphql-tag’

export default graphql` mutation CreateTestFile ($username: String!, $file: S3ObjectInput!){ createTestFile( input: {username: $username, file: $file} ) { username file } }

AppSync Resolver :

{

“version”: “2017-02-28”, “operation”: “PutItem”, “key”: { “id”: $util.dynamodb.toDynamoDBJson($ctx.args.input.username), },

set( $attribs = $util.dynamodb.toMapValues($ctx.args.input) ) set( $file = $ctx.args.input.file ) set( $attribs.file = $util.dynamodb.toS3Object($file.key, $file.bucket, $file.region) )

“attributeValues”: $util.toJson($attribs) }

Credentials from App.js :

const client = new AWSAppSyncClient({ url: AWSConfig.aws_appsync_graphqlEndpoint, region: AWSConfig.aws_appsync_region, auth: { type: AWSConfig.aws_appsync_authenticationType, jwtToken: async () => (await Auth.currentSession()).getIdToken().getJwtToken(), }, complexObjectsCredentials: () => Auth.currentCredentials(), dataIdFromObject: o => o.id, }, { defaultOptions: { watchQuery: { fetchPolicy: ‘cache-and-network’, }, }, });

Version :

“aws-amplify”: “^0.2.9”, “aws-amplify-react-native”: “^0.2.15”, “aws-appsync”: “^1.3.4”, “aws-appsync-react”: “^1.0.12”, “aws-sdk”: “^2.247.1”, “expo”: “^27.0.0”,

Expect : S3 object to be created in the S3 public bucket and for the S3 object url to be stored in the DynamoDB record. Actual Result : No error outputs and nothing happens in AWS DynamoDB or S3.

[youneshenniwrites]

Thanks.

In the previous versions of Amplify I had the following code working prefectly ( using rn-fetch-blob)

version:

"aws-amplify": "^1.1.7", "aws-amplify-react-native": "^2.0.7", "rn-fetch-blob": "^0.10.13"

I did not need to use RNS3 at all.

However, the exact same code in the latest Amplify versions does not work.

"aws-amplify": "^1.1.19", "aws-amplify-react-native": "^2.1.7",

[ChrisFieldsII]

Very nice. I’ll have to check RNS3 out.

I had the same problem with images being uploaded to S3 being broken until I used react-native-fetch-blob to convert the image in the filesystem to base64.