Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add button to load function URLs from Lambda API #12

Merged
merged 3 commits into from
Oct 5, 2023
+25 −5
Merged

Add button to load function URLs from Lambda API #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3693bc6
add button to load function URLs from Lambda API
whummer Oct 4, 2023
df3a192
fix URL construction
whummer Oct 4, 2023
3c8390c
allow requests from insecure XMLHttpRequest endpoint
HarshCasper Oct 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion bin/deploy.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ else
cd package
zip -r ../lambda.zip *;
)
fi
fi

awslocal lambda create-function \
--function-name resize \
Expand Down
21 changes: 19 additions & 2 deletions website/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

let imageItemTemplate = Handlebars.compile($("#image-item-template").html());

$("#configForm").submit(function (event) {
$("#configForm").submit(async function (event) {
if (event.preventDefault)
event.preventDefault();
else
Expand All @@ -22,7 +22,24 @@

let action = $(this).find("button[type=submit]:focus").attr('name');

if (action == "save") {
if (action == "load") {
let baseUrl = `${document.location.protocol}//${document.location.host}`;
if (baseUrl.indexOf("file://") >= 0) {
baseUrl = `http://localhost:4566`;
}
baseUrl = baseUrl.replace("://webapp.s3.", "://");
const headers = {authorization: "AWS4-HMAC-SHA256 Credential=test/20231004/us-east-1/lambda/aws4_request, ..."};
const loadUrl = async (funcName, resultElement) => {
const url = `${baseUrl}/2021-10-31/functions/${funcName}/urls`;
const result = await $.ajax({url, headers}).promise();
const funcUrl = JSON.parse(result).FunctionUrlConfigs[0].FunctionUrl;
$(`#${resultElement}`).val(funcUrl);
localStorage.setItem(resultElement, funcUrl);
}
await loadUrl("presign", "functionUrlPresign");
await loadUrl("list", "functionUrlList");
alert("Function URL configurations loaded");
} else if (action == "save") {
localStorage.setItem("functionUrlPresign", $("#functionUrlPresign").val());
localStorage.setItem("functionUrlList", $("#functionUrlList").val());
alert("Configuration saved");
Expand Down
7 changes: 5 additions & 2 deletions website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
rel="stylesheet">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
</head>
<body>

Expand Down Expand Up @@ -43,6 +44,7 @@ <h5 class="card-text">
<input type="text" class="form-control" id="functionUrlList" autocomplete="false"/>
</div>
<div class="mb-3">
<button type="submit" name="load" class="btn btn-primary mb-3">Load from API</button>
<button type="submit" name="save" class="btn btn-primary mb-3">Apply</button>
<button type="submit" name="clear" class="btn btn-secondary mb-3">Clear</button>
</div>
Expand All @@ -65,7 +67,8 @@ <h5 class="card-title">Form</h5>
and then forwards the POST request directly to S3.
Resizing the image to max 400x400 pixels happens asynchronously through S3 bucket notifications.
If the resizing of an image fails, then an SNS message will be sent, which will trigger an SES email
notification. You can find those by visiting <a href="//localhost.localstack.cloud:4566/_aws/ses">http://localhost.localstack.cloud:4566/_aws/ses</a>
notification. You can find those by visiting
<a href="//localhost.localstack.cloud:4566/_aws/ses">http://localhost.localstack.cloud:4566/_aws/ses</a>
</p>
<form id="uploadForm" action="#" method="post">
<div class="mb-3">
Expand Down Expand Up @@ -98,7 +101,7 @@ <h1 class="h4">List your files <i class="bi bi-image"></i></h1>
<p class="mt-2">
The images you uploaded should be shown here.
When the refresh action is triggered, the browser makes a request to the <code>list</code> Lambda URL
which returns a JSON document of all items in the images and the resized images bucket. The Javascript
which returns a JSON document of all items in the images and the resized images bucket. The JavaScript
then populates the list below using a Handlebars template.
</p>
<hr>
Expand Down
Loading