S3Object upload failing silently - not even a POST request.

[elliott-king]

Which Category is your question related to?
GraphQL AppSync, and S3 Uploads with Complex Objects.

What AWS Services are you utilizing?
AWS Amplify with:

• Auth
• Storage
• API

Provide additional details e.g. code snippets

Hello.

I am following the tutorial section to add complex objects. I think I am following the tutorial, but there is no file upload to either S3 or DynamoDB. In fact, my client app is not making a request at all! However, if I remove the file object from the mutation, the request will go through.

First, I will show my code. Then, I will talk about the debugging/testing steps I have taken.
Relevant section of schema.graphql:

type Photo @model {
	photo_id: ID!
	location_id: ID
	description: String
	file: S3Object
}

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

When I amplify push this, it correctly creates the CreatePhotoInput in the Appsync Graphql API:

input CreatePhotoInput {
	photo_id: ID
	location_id: ID!
	description: String
	file: S3ObjectInput
}

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

Here is my auth handler:

export function createClient() {
    return new AWSAppSyncClient({
        url: aws_config.aws_appsync_graphqlEndpoint,
        region: aws_config.aws_appsync_region,
        auth: {
            type: aws_config.aws_appsync_authenticationType,
            jwtToken: async () => (await Auth.currentSession()).getAccessToken().getJwtToken(),
        },
        complexObjectCredentials: () => Auth.currentCredentials()
    });
}

And the bit where I actually call the mutation:

        const client = createClient();

        (async () => {
            let file;
            let photo_id;

            if (this.imageInput.current.files.length > 0) {
                let img_file = this.imageInput.current.files[0];
                console.log('file to upload:', img_file);

                const { name: filename, type: mimeType } = img_file;
                const [, , , extension] = /([^.]+)(\.(\w+))?$/.exec(filename);
                console.log('filename, extension', filename, extension);

                const bucket = aws_config.aws_user_files_s3_bucket;
                const region = aws_config.aws_user_files_s3_bucket_region;
                const visibility = 'public'; 
                const {identityId} = await Auth.currentCredentials();

                photo_id = uuid();
                const key = `${visibility}/${identityId}/${photo_id}${extension && '.'}${extension}`;
                
                file = {
                    bucket, 
                    key,
                    region,
                    mimeType,
                    localUri: img_file,
                };
                console.log('file object:', file);
                console.log('targeting location:', this.props.name);
                console.log('location has id:', this.props.id);
            }

            client.mutate({
                mutation: gql(createPhoto),
                variables: {
                    input: {
                        file: file,
                        photo_id: photo_id,
                        location_id: this.props.id,
                        description: 'First test: this is a photo file'
                    }
                }
            })
            .then( result => console.log('result of image upload:', result))
            .catch(err => console.error(err));
        })();

If I run this, the console will log the location ID, but nothing further. No request are sent. It will only do this for this code, though. If I place a deliberate error in the code, it will both send a POST request and give an error.

My debugging steps

1. Under my declaration file = {...}, if I remove either mimeType or localUri, I will get: The variables input contains a field name 'mimeType' that is not defined for input object type 'S3ObjectInput'. If I remove both, it will make the request with no errors, but will put nothing in S3 (as expected).
2. Under my mutation declaration, client.mutate(... variables: {...} If I remove file: file, it will make a request with no errors, but will put nothing in S3. If I remove anything (or everything) except file: file, it will continue to fail silently.

At this point, I looked at your existing example for guidance. I placed a console.log('file to upload:', selectedFile) and console.log('file object', file); at similar points to my above code. This allowed me to look at the structure of the file itself, and what would be uploaded to S3. They print identical responses for both my code and the sample code. However, the sample code is:

1. Making several requests on the client.
2. Uploading to DyanmoDB
3. Uploading to S3 (correctly).

In summation
I tried to follow the S3 object upload guide, but it is failing silently. However, if I put in a small bug, it will fail correctly. Due to the lack of error output, I am at a loss.

[powerful23]

Related to #2706

[elliott-king]

Not sure if it is exactly the same, as mine is not even going to DynamoDB.

[elorzafe]

@elliott-king do you see a 403 error on network tab?

[elorzafe]

@elliott-king I have reproduced the problem, because in my case is not rejecting the promise when the upload fails.

[elliott-king]

@elorzafe No, I am not getting a 403 error on the network tab. Tried on both Firefox (66) & Chrome (74).

[elliott-king]

Just jumping in to say I did test this with my issue & it has resolved the silent failure.

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.