Comments: Upload a File to S3

[jayair]

Link to chapter - http://serverless-stack.com/chapters/upload-a-file-to-s3.html

[bharloe]

For what it's worth the push to S3 still works fine for my app which I haven't touched in months

[jayair]

@danielkaczmarczyk Can you go into the IAM section of your AWS Console and find the role that is being used? Here are some screenshots on how to do it.

Image 1 Image 2 Image 3 Image 4

[danielkaczmarczyk]

Here's my IAM policy for cognito

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "mobileanalytics:PutEvents",
                "cognito-sync:*",
                "cognito-identity:*"
            ],
            "Resource": [
                "*"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:*"
            ],
            "Resource": [
                "arn:aws:s3:::notes-app-uploads-dan/${cognito-identity.amazonaws.com:sub}*"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "execute-api:Invoke"
            ],
            "Resource": [
                "arn:aws:execute-api:us-east-2:*:lg7wxu2y8b/*"
            ]
        }
    ]
}

[jayair]

@danielkaczmarczyk That looks good. Can you also check the permissions for your S3 bucket?

Image

[danielkaczmarczyk]

here:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

[jayair]

@danielkaczmarczyk Yeah that looks okay too. I can try your repo out and see what I can find. Can you publish it?

[danielkaczmarczyk]

many thanks for the effort, @jayair ! Here's the backend and here's the client should you need it

[jayair]

@danielkaczmarczyk So I tried it out. I noticed that your bucket is in us-east-2. This isn't a problem but it needs a slight tweak to the code before we do the upload.

  const s3 = new S3({
    region: 'us-east-2',
    params: {
      Bucket: config.s3.BUCKET
    }
  });

I created a new S3 bucket in us-east-2 using the tutorial instructions. And used your code base and my credentials and the upload worked. But it still didn't work on your bucket.

I cannot check what the settings are on your bucket but can you try re-creating the bucket (and editing the IAM policy for Cognito with the new bucket)?

[danielkaczmarczyk]

I have created a new bucket, in us-east-2 (Ohio), amended config.js with the new value for BUCKET, amended the IAM policy for Cognito to make sure that I give it access to write to this particular bucket, and I get a 403 Bucket not found as if the authentication didn't work. No more error details present

[danielkaczmarczyk]

Ok, I have gone back & forth with different configurations and it has eventually worked. Not sure what exactly has made the difference, as upon inspecting the details it seems that all is as was during previous 'correct' versions. I blame that on human error - I may have mistyped something. The only takeaway that I'm sure of is that if the bucket was in us-east-1, which is N. Virginia, it always would 301.

[jayair]

@danielkaczmarczyk Glad you figured it out. These can be tricky to debug!

[mochfauz]

everyone know how to make our upload images become public read?

[jayair]

@mbahfauz There is a section in the Amplify Docs that might help with this - https://aws.github.io/aws-amplify/media/storage_guide#s3image

[mochfauz]

Thanks man

[viccooper142]

When I replace the handleSubmit method then I get " Line 7: 'API' is defined but never used no-unused-vars" Also, when I try to create a note with an attachment I get an error: __TypeError: _this.createNote is not a function__

I fixed both of these errors by using files from your repository. Seems like there is some sort of mismatch between the guide and the repositories?

[jayair]

@viccooper142 I think you might have missed a step in the previous chapter - https://serverless-stack.com/chapters/call-the-create-api.html

There we add the createNote method which in turn uses the API module. This will resolve both your issues.

[19bharatvikram]

Hi Jay,

I have a <UnauthenticatedRoute ...> page where I want to display some public image from AWS S3 using <S3Image imgKey={temp.attachment}/> where S3Image component is from 'aws-amplify-react'

I get error: cannot get guest credentials when mandatory signin enabled.

To solve it I used mandatorySignIn: false in my Amplify.configure settings in index.js but I am still getting the below error.

StorageClass - ensure credentials error": NotAuthorizedException: Unauthenticated access is not supported for this identity pool.

Any insights will be appreciated. Please suggest if there is a way to load images for non authenticated users.

Thanks, Bharat Chand

[jayair]

@19bharatvikram Yeah this setup is a bit different. You need to create an Unauth role for your Identity Pool to specify the resources unauthenticated users have access to.

[19bharatvikram]

Thanks Jay, Enabling access to unauthenticated identities and giving readonly s3 permission to Unauthenticated role solved the issue.

[jayair]

This issue was moved to https://discourse.serverless-stack.com/t/comments-upload-a-file-to-s3/123