Skip to content

Commit 9cc749a

Browse files
t-richardt-richard
committed
Initial commit
0 parents  commit 9cc749a

File tree

11 files changed

+15840
-0
lines changed

11 files changed

+15840
-0
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.serverless
2+
node_modules

‎.npmignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# package directories
2+
node_modules
3+
jspm_packages
4+
5+
# Serverless directories
6+
.serverless

‎README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Lift upload construct examples
2+
3+
This is related to the following [Lift PR](https://github.com/getlift/lift/pull/103)
4+
5+
To test this, run this command
6+
7+
```bash
8+
`serverless deploy`
9+
```
10+
11+
In the output, look for the API gateway endpoint then replace it in `dist/fetch.html`,
12+
`dist/axios.html` and `dist/multiple.html` **but keep the `/upload-url` path at the end.**
13+
14+
Now run `serverless landing:upload` and click on the static website URL in the output.
15+
16+
You should see a landing page with links pointing to each page. Feel free to test everything and look at the code!
17+
18+
> You can also test this with REST APIs by uncommenting the relevant lines in `serverless.yml`

‎dist/axios.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<body class="text-center d-flex mt-5 align-items-center flex-column">
2+
<h1>Upload your file with axios !</h1>
3+
4+
<input id="fileInput" type="file">
5+
6+
<div class="row w-75 mt-5">
7+
<a class="col-md-4 link-primary" href="fetch.html">Try with Fetch</a>
8+
<a class="col-md-4 link-primary" href="axios.html">Try with Axios</a>
9+
<a class="col-md-4 link-primary" href="multiple.html">Try with multiple files</a>
10+
</div>
11+
</body>
12+
13+
<script>
14+
const fileInput = document.getElementById('fileInput');
15+
16+
fileInput.addEventListener('change', async function (event) {
17+
let file = fileInput.files[0];
18+
19+
const { data: { uploadUrl, fileName } } = await axios.post(
20+
'https://FIXME.execute-api.eu-west-1.amazonaws.com/upload-url',
21+
{
22+
fileName: file.name,
23+
contentType: file.type,
24+
}
25+
);
26+
27+
await axios.put(uploadUrl, file, {
28+
headers: {
29+
'Content-Type': file.type,
30+
},
31+
});
32+
alert(`The file has been uploaded to path ${fileName} !`);
33+
});
34+
</script>
35+
36+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
37+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

‎dist/fetch.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<body class="text-center d-flex mt-5 align-items-center flex-column">
2+
<h1>Upload your file with fetch !</h1>
3+
4+
<input id="fileInput" type="file">
5+
6+
<div class="row w-75 mt-5">
7+
<a class="col-md-4 link-primary" href="fetch.html">Try with Fetch</a>
8+
<a class="col-md-4 link-primary" href="axios.html">Try with Axios</a>
9+
<a class="col-md-4 link-primary" href="multiple.html">Try with multiple files</a>
10+
</div>
11+
</body>
12+
13+
<script>
14+
const fileInput = document.getElementById('fileInput');
15+
16+
fileInput.addEventListener('change', async function (event) {
17+
let file = fileInput.files[0];
18+
19+
const uploadResponse = await fetch('https://FIXME.execute-api.eu-west-1.amazonaws.com/upload-url', {
20+
method: 'POST',
21+
body: JSON.stringify({
22+
fileName: file.name,
23+
contentType: file.type,
24+
})
25+
});
26+
const { uploadUrl, fileName } = await uploadResponse.json();
27+
28+
await fetch(uploadUrl, {
29+
method: 'PUT',
30+
headers: {
31+
'Content-Type': file.type,
32+
},
33+
body: file,
34+
});
35+
alert(`The file has been uploaded to path ${fileName} !`);
36+
});
37+
</script>
38+
39+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

‎dist/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<body class="text-center d-flex mt-5 align-items-center flex-column">
2+
<h1>Test lift upload construct !</h1>
3+
4+
<p class="border-start border-3 border-warning ps-2 mt-2 fst-italic">Don't forget to change the API Gateway URL for it to work</p>
5+
6+
<div class="row w-75 mt-5">
7+
<a class="col-md-4 link-primary" href="fetch.html">Try with Fetch</a>
8+
<a class="col-md-4 link-primary" href="axios.html">Try with Axios</a>
9+
<a class="col-md-4 link-primary" href="multiple.html">Try with multiple files</a>
10+
</div>
11+
</body>
12+
13+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

‎dist/multiple.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<body class="text-center d-flex mt-5 align-items-center flex-column">
2+
<h1>Upload <span class="fw-bold fst-italic">multiple files</span> with axios !</h1>
3+
4+
<small class="text-muted my-2">
5+
If you look at the javascript, you'll see it's a bit more complicated than just looping over the files. <br>
6+
This is done in such a way it will actually upload files simultaneously!
7+
</small>
8+
9+
<input id="fileInput" type="file" multiple>
10+
11+
<div class="row w-75 mt-5">
12+
<a class="col-md-4 link-primary" href="fetch.html">Try with Fetch</a>
13+
<a class="col-md-4 link-primary" href="axios.html">Try with Axios</a>
14+
<a class="col-md-4 link-primary" href="multiple.html">Try with multiple files</a>
15+
</div>
16+
</body>
17+
18+
<script>
19+
const fileInput = document.getElementById('fileInput');
20+
21+
fileInput.addEventListener('change', async function (event) {
22+
const files = fileInput.files;
23+
24+
const uploadUrlPromises = Array.from(files).map(file => {
25+
return axios.post(
26+
'https://FIXME.execute-api.eu-west-1.amazonaws.com/upload-url',
27+
{
28+
fileName: file.name,
29+
contentType: file.type,
30+
}
31+
);
32+
});
33+
34+
const uploadUrlResponses = await Promise.all(uploadUrlPromises);
35+
36+
const uploadedFilesPromises = uploadUrlResponses.map((uploadUrlResponse, i) => {
37+
return axios.put(uploadUrlResponse.data.uploadUrl, files[i], {
38+
headers: {
39+
'Content-Type': files[i].type,
40+
},
41+
});
42+
});
43+
44+
await Promise.all(uploadedFilesPromises);
45+
const fileNames = uploadUrlResponses.map(response => response.data.fileName);
46+
alert(`Files have been uploaded to paths ${fileNames.join(', ')} !`);
47+
});
48+
</script>
49+
50+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
51+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

‎index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
exports.handler = async function(event, context) {
2+
console.log("EVENT: \n" + JSON.stringify(event, null, 2))
3+
return context.logStreamName
4+
}

0 commit comments

Comments
 (0)