Comments for Upload a File to S3


#61

Hello, I’m coming across an issue at this point in the tutorial. Seems like a few before had the same issue. I tried adding he Amazons3fullaccess, but that didn’t work. My IAM policy and permissions for my S3 bucket look good to me.

Code for backend is here and code for frontend is here.

Here’s the error in my chrome console.

Please let me know if you would like to see anything else or if there are any solutions you have in mind. Thank you!


#62

Hmm have you had a chance to check the CORS settings for your S3 bucket?


#63

I encountered the same problem today while going through this tutorial and my Chrome console shows similar error messages as @frontendsomething presented.

I have used region eu-central-1, but otherwise proceed as instructed. My S3 bucket has the following CORS:

<?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>
    <AllowedMethod>DELETE</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

#64

That looks good. Can you just check the IAM role that is created in this chapter https://serverless-stack.com/chapters/create-a-cognito-identity-pool.html? It needs to have the right S3 bucket name.


#65

Why does Storage.vault.put() know the target directory to upload the file to? As my understanding, we already set the s3 bucket name when we call Amplify.configure(), however, we didn’t tell Amplify which directory in that bucket we want to upload the file to. Why does Amplify automatically create private/${cognito-identity.amazonaws.com:sub} directory in that bucket?


#66

So that is the convention that Amplify follows and we basically followed that while creating the bucket and the IAM roles.


#67

I am facing same issue. I get Access denied error when I try to upload:

HTTP403: FORBIDDEN - The server understood the request, but is refusing to fulfill it.

Below is my IAM Policy:

    {
        "Sid": "VisualEditor2",
        "Effect": "Allow",
        "Action": "s3:*",
        "Resource": [
            "arn:aws:s3:::usernotes-attachments/private/${cognitoidentity.amazonaws.com:sub}/*",
            "arn:aws:s3:::usernotes-attachments"
        ]
    }

Below is CORS configuration:

<?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>
    <AllowedMethod>DELETE</AllowedMethod>
    <MaxAgeSeconds>300000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

I am using aws-amplify as given in sample code:

import { Storage } from "aws-amplify";

export async function s3Upload(file) {
	const filename = `${Date.now()}-${file.name}`;
	const stored = await Storage.vault.put(filename, file, {
		contentType: file.type
	});
	return stored.key;
}

Any idea why is this failing?


#68

Sorry. it was a typo in my IAM policy. “-” was missing in “cognito-identity”. File is getting uploaded now. Thanks.


#69

Thanks for reporting back. Glad you figure it out.