AWS Certified Solutions Architect - Professional 2020

Sign Up Free or Log In to participate!

How to upload a file to S3 from static webpage using API Gateway and Lambda

How to upload a file to S3 from static webpage using API Gateway and Lambda

I am new to aws and trying to create simple webpage to upload file in S3 and maintain metadata in DynamoDB. I am able to create record in DynamoDB but not able to load file in S3 from my webpage. I get the following error,

"No such file or directory: ‘C:fakepath2018_pirl_replacement_notes.pdf’: OSError Traceback (most recent call last): File "/var/task/lambda_function.py", line 33, in lambda_handler s3.upload_file……."

I created index.html to create the web form which allows user to enter metadata and select the file to upload. It triggers lambda function where I want to store file in S3 bucket and metadata in DynamoDB.

This is how I am passing the File through webpage,


File:


In Lambda I am using

import boto3

import os

from contextlib import closing

from boto3.dynamodb.conditions import Key, Attr

def lambda_handler(event, context):

publicationtype = event["publicationtype"]

formnumber = event["formnumber"]

catalognumber = event["catalognumber"]

productcategory = event["productcategory"]

description = event["description"]

file = event["file"]

head, tail = os.path.split(file)

fileName = tail

print(‘File Name: ‘ + fileName)

Uploading file to S3 bucket

s3 = boto3.client(‘s3’)

s3.upload_file(file, os.environ[‘BUCKET_NAME’], fileName)

s3.put_object_acl(ACL=’public-read’,

Bucket=os.environ[‘BUCKET_NAME’],

Key= fileName)

location = s3.get_bucket_location(Bucket=os.environ[‘BUCKET_NAME’])

region = location[‘LocationConstraint’]

if region is None:

url_begining = "https://s3.amazonaws.com/"

else:

url_begining = "https://s3-" + str(region) + ".amazonaws.com/"

url = url_begining

str(os.environ[‘BUCKET_NAME’])

"/"

str(fileName)

print(‘S3 File URL: ‘ + url)

Can you let me know what I am missing or doing wrong?

Thanks

Hello Abhishek

This is my index.html page

Hello Abhishek


File:

2 Answers

Hi Abhiskek,

I’m kind of confused on the parts and pieces you’re using but I think you’re going to need a few more components.  You can upload directly to S3 using Javascript.  If you strip ALL the build-in security out, you can do it.  But I’m not sure where you’re expecting the Lambda function to come into play?  Lambda runs on AWS and doesn’t have access to your local file system to take in a file.  You could trigger a Lambda function using an S3 event such that when you upload to S3, the metadata could be extracted by the Lambda function and stored in Dynamo.

–Scott

Hi,

In addition to Scott’s answer I will recommend you to  check https://fineuploader.com/ . They have github with examples how you can upload to S3 with JS.

Here is another example https://medium.com/@olotintemitope/how-to-upload-files-to-amazon-s3-using-nodejs-lambda-and-api-gateway-bae665127907

Sign In
Welcome Back!

Psst…this one if you’ve been moved to ACG!

Get Started
Who’s going to be learning?