aws-samples / amazon-s3-presigned-urls-aws-sam

For more serverless learning resources, visit https://serverlessland.com/.

S3 presigned URLs with SAM, auth and sample frontend

This example application shows how to upload objects to S3 directly from your end-user application using Signed URLs.

To learn more about how this application works, see the AWS Compute Blog post: https://aws.amazon.com/blogs/compute/uploading-to-amazon-s3-directly-from-a-web-or-mobile-application/

Important: this application uses various AWS services and there are costs associated with these services after the Free Tier usage - please see the AWS Pricing page for details. You are responsible for any AWS costs incurred. No warranty is implied in this example.

.
├── README.MD                   <-- This instructions file
├── frontend                    <-- Simple JavaScript application illustrating upload
├── getSignedURL                <-- Source code for the serverless backend

Requirements

• AWS CLI already configured with Administrator permission
• AWS SAM CLI installed - minimum version 0.48.
• NodeJS 16.x installed

Installation Instructions

1. Create an AWS account if you do not already have one and login.

2. Clone the repo onto your local development machine using git clone.

Installing the application

There are two SAM templates available - one provides an open API, the other uses an authorizer. From the command line, deploy the chosen SAM template:

cd .. 
sam deploy --guided

When prompted for parameters, enter:

• Stack Name: s3Uploader
• AWS Region: your preferred AWS Region (e.g. us-east-1)
• Answer 'No' to UploadRequestFunction may not have authorization defined, Is this okay? question, and accept others defaults.

This takes several minutes to deploy. At the end of the deployment, note the output values, as you need these later.

• The APIendpoint value is important - it looks like https://ab123345677.execute-api.us-west-2.amazonaws.com.
• The upload URL is your endpoint with the /uploads route added - for example: https://ab123345677.execute-api.us-west-2.amazonaws.com/uploads.

Testing with the frontend application

The frontend code is saved in the frontend subdirectory.

1. Before running, you need to set the API Gateway endpoint from the backend deployment on line 29 in the index.html file.

2. You cannot run this directly on a local browser, due to way CORS works with localhost. Either copy the file to an S3 bucket, or deploy using AWS Amplify Console.

3. Once the page is loaded from a remote location, upload a JPG file in the front-end and you will see the object in the backend S3 bucket.

Next steps

The AWS Compute Blog post at the top of this README file contains additional information about this pattern.

If you have any questions, please raise an issue in the GitHub repo.

==============================================

Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.

SPDX-License-Identifier: MIT-0

amazon-s3-presigned-urls-aws-sam's Issues

Out of Memory

If I select a file with a size of about 150MB, I see this error while the javascript processes the binary data:

By debugging the code, the "out of memory" occurs somewhere in the following bock of javascript code in the index.html file:

How to resolve this issue?

Presigned URL throwing SignatureDoesNotMatch error

Hi, After deploying the stack and hitting the API URL, I was not able to upload JPG file to S3 using the presigned URL and was getting SignatureDoesNotMatch.

In order to fix the issue, I had to edit the lambda function code and update this line -> const s3 = new AWS.S3() to const s3 = new AWS.S3({signatureVersion: 'v4'})

Error: Security Constraints Not Satisfied!

❯ sam deploy --guided

Configuring SAM deploy
======================

        Looking for config file [samconfig.toml] :  Not found

        Setting default arguments for 'sam deploy'
        =========================================
        Stack Name [sam-app]: s3Uploader
        AWS Region [us-east-1]: us-east-2
        #Shows you resources changes to be deployed and require a 'Y' to initiate deploy
        Confirm changes before deploy [y/N]: Y
        #SAM needs permission to be able to create roles to connect to the resources in your template
        Allow SAM CLI IAM role creation [Y/n]: y
        #Preserves the state of previously provisioned resources when an operation fails
        Disable rollback [y/N]: y
        UploadRequestFunction has no authentication. Is this okay? [y/N]: n
Error: Security Constraints Not Satisfied!

SignatureDoesNotMatch

Getting a SignatureDoesNotMatch error when testing the upload with postman. No changes to the code, cloned and deployed. Tried deploying from both local machine and cloud9 instances, in us-west-1 and us-east-1 with postman and curl.
Access Key Id in the response matches the one in ~/.aws/credentials

• Start AWS Cloud9 instance
• Clone
• sam deploy --guided
• Note the api url in the output
• In postman: GET request to api url
• Note the upload url in the response
• In postman: PUT request to upload url

Expected: 200
Actual: 403 Forbidden

    <Code>SignatureDoesNotMatch</Code>
    <Message>The request signature we calculated does not match the signature you provided. Check your key and signing method.</Message>
    <AWSAccessKeyId>xxxxxxxxxxxxx</AWSAccessKeyId>
    <StringToSign>PUT

Not sure about what I may be doing wrong. Any ideas?

403 Error: PUT forbidden

Double-checked my permissions, CORS but same issue. Tried adding my credentials to the lambda function.

VM9:1          PUT https://BUCKETNAME.s3.REGION.amazonaws.com/undefined 403 (Forbidden)
(anonymous) @ VM9:1
uploadImage @ index.html?response-content-disposition=inline&X-Amz-Security-Token=12345
await in uploadImage (async)
n @ vue.min.js:6
e @ vue.min.js:6
t._withTask.t._withTask @ vue.min.js:6
index.html?response-content-disposition=inline&X-Amz-Security-Token=12345
Result:  Response {type: 'basic', url: 'https://BUCKETNAME.s3.REGION.amazonaws.com/undefined', redirected: false, status: 403, ok: false, …}body: (...)bodyUsed: falseheaders: Headers {}ok: falseredirected: falsestatus: 403statusText: "Forbidden"type: "basic"url: "https://BUCKETNAME.s3.REGION.amazonaws.com/undefined"[[Prototype]]: Response

Property ApiId is not allowed.

when I open the template.yaml my VSCode is complaing about the property ApiId that it is not allowed. It is working though but it is very annoying to have errors in the console.

Custom filename

Many thanks for your post on this and the repo.

I would like to be to create a filename (ie not have it based on random numbers), are you able to advise how that could be done?

Failed to create managed resources: An error occurred (InvalidClientTokenId) when calling the CreateChangeSet

Hi, I get right after "Creating the required resources..." this error:
Error: Failed to create managed resources: An error occurred (InvalidClientTokenId) when calling the CreateChangeSet operation: The security token included in the request is invalid.
And the deploy stops immediately.
I am on MacOS 12.6.1

aws --version
aws-cli/2.9.0 Python/3.9.11 Darwin/21.6.0 exe/x86_64 prompt/off
sam --version
SAM CLI, version 1.65.0

botocore.exceptions.ParamValidationError: Parameter validation failed: Unknown parameter in input: "DisableRollback", must be one of: ChangeSetName, StackName, ClientRequestToken

Every time I try to install sam deploy --guided and answering all the question. The following error appears: botocore.exceptions.ParamValidationError: Parameter validation failed:
Unknown parameter in input: "DisableRollback", must be one of: ChangeSetName, StackName, ClientRequestToken

I have upgraded and install all the necessary requirements.

Can someone help me?

SAM configuration file [samconfig.toml]

after entering the parameters for stack-name, region and allowing/accepting the defaults this is where I get stuck.

Where can I find the samconfig.toml file ??
Also, from the ReamMe: There are two SAM templates available - one provides an open API, the other uses an authorizer. From the command line, deploy the chosen SAM template:

cd .. 
sam deploy --guided

Where to deploy this ?

Page doesn't display correctly and hence won't upload

Hi

The page when loaded first will only display as follows.

Multipart example

It would be great if this example could support multipart uploads by setting a chunk size

Getting constructor error from Vue

When loading the index.html page, I am now getting this error in the web dev console:
Uncaught TypeError: Vue is not a constructor

Not sure what's changed but this sample no longer works for me when it was fine from January 11th (when I deployed it) to February 4th (last successful use of it). I tried backing off to Vue 3.2.29 and 3.2.28 but neither of those work, either.

Can I block public access?

Does the s3 bucket have to be public accessible? I blocked all public access, but the upload PUT method's preflight returns 403 "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."
However I have already set
{
"AllowedHeaders": [
""
],
"AllowedMethods": [
"GET",
"PUT",
"POST"
],
"AllowedOrigins": [
""
],
"ExposeHeaders": []
}
in my s3 cors policy accordingly. Not sure where went wrong.

give option to specify s3 bucketname or reuse existing bucket?

Error: Failed to create managed resources: Waiter StackCreateComplete failed: Waiter encountered a terminal failure state: For expression "Stacks[].StackStatus" we matched expected path: "ROLLBACK_COMPLETE" at least once

Related: aws/aws-sam-cli#3243

and proposed fix does not work.

index.html

The front end index.html is not working for me, though the Postman method works fine. I have made object public, and I have CORS enabled and I inserted my endpoint.

It does allow me to choose a file to upload but it says Success! before anything happens and the Remove and Upload buttons do nothing.

Any ideas on what is wrong?

S3 Uploader Test
Select an image
3412932.jpeg
Remove image Upload image
Success! Image uploaded to bucket.