Mirrors/uppy
1
0
Fork 0
mirror of https://github.com/transloadit/uppy.git synced 2026-07-17 16:50:22 +00:00
Code Issues Projects Releases Wiki Activity

meta: Improve aws-node example readme (#4753)

Browse source 
Co-authored-by: Antoine du Hamel <antoine@transloadit.com>
This commit is contained in:
Artur Paikin 2024-06-10 14:51:59 +01:00 • committed by GitHub
parent e73c507095
commit abf65eeb91
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 55 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

102
examples/aws-nodejs/README.md
View file

@ -8,42 +8,67 @@ Express.js). It uses presigned URL at the backend level.
It's assumed that you are familiar with AWS, at least, with the storage service
(S3) and users & policies (IAM).
These instructions are **not fit for production** but tightening the security is
These instructions are **not fit for production**, tightening the security is
out of the scope here.
### S3 Setup
- Create new S3 bucket in AWS (e.g. `aws-nodejs`).
- Add a bucket policy.
Assuming you’re trying to setup the user `MY-UPPY-USER` to put the uploaded
files to the bucket `MY-UPPY-BUCKET`, here’s how you can allow `MY-UPPY-USER` to
get STS Federated Token and upload files to `MY-UPPY-BUCKET`:
```json
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicAccess",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::aws-nodejs/*"
}
]
}
```
1. Set CORS settings on `MY-UPPY-BUCKET` bucket:
- Make the S3 bucket public.
- Add CORS configuration.
```json
[
{
"AllowedHeaders": ["*"],
"AllowedMethods": ["GET", "PUT", "HEAD", "POST", "DELETE"],
"AllowedOrigins": ["*"],
"ExposeHeaders": ["ETag", "Location"]
}
]
```
```json
[
{
"AllowedHeaders": ["*"],
"AllowedMethods": ["GET", "PUT", "HEAD", "POST", "DELETE"],
"AllowedOrigins": ["*"],
"ExposeHeaders": []
}
]
```
2. Add the following Policy to `MY-UPPY-BUCKET`:
```json
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "MyMultipartPolicyStatement1",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::*:user/MY-UPPY-USER"
},
"Action": [
"s3:PutObject",
"s3:PutObjectAcl",
"s3:ListMultipartUploadParts",
"s3:AbortMultipartUpload"
],
"Resource": "arn:aws:s3:::MY-UPPY-BUCKET/*"
}
]
}
```
3. Add the following Policy to `MY-UPPY-USER`: (if you don’t want to enable
signing on the client, you can skip this step)
```json
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "MyStsPolicyStatement1",
"Effect": "Allow",
"Action": ["sts:GetFederationToken"],
"Resource": ["arn:aws:sts::*:federated-user/*"]
}
]
}
```
### AWS Credentials
@ -55,21 +80,6 @@ You may use existing AWS credentials or create a new user in the IAM page.
[environment variables](https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/loading-node-credentials-environment.html)
or a
[credentials file in `~/.aws/credentials`](https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/setting-credentials-node.html).
- You will need at least `PutObject` and `PutObjectAcl` permissions.
```json
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "VisualEditor0",
"Effect": "Allow",
"Action": ["s3:PutObject", "s3:PutObjectAcl"],
"Resource": "arn:aws:s3:::aws-nodejs/*"
}
]
}
```
## Prerequisites
@ -83,7 +93,7 @@ Add a `.env` file to the root directory and define the S3 bucket name and port
variables like the example below:
```
COMPANION_AWS_BUCKET=aws-nodejs
COMPANION_AWS_BUCKET=MY-UPPY-BUCKET
COMPANION_AWS_REGION=…
COMPANION_AWS_KEY=…
COMPANION_AWS_SECRET=…
@ -104,6 +114,4 @@ corepack yarn workspace @uppy-example/aws-nodejs start
Dashboard demo should now be available at http://localhost:8080.
You have also a Drag & Drop demo on http://localhost:8080/drag.
_Feel free to check how the demo works and feel free to open an issue._

104
examples/aws-nodejs/public/drag.html
View file

@ -1,104 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Uppy</title>
<link
href="https://releases.transloadit.com/uppy/v3.26.0/uppy.min.css"
rel="stylesheet"
/>
</head>
<body>
<section class="example">
<div id="drag-drop-area"></div>
<div class="for-ProgressBar"></div>
<div class="uploaded-files">
<h5>Uploaded files:</h5>
<ol></ol>
</div>
<script type="module">
import {
Uppy,
DragDrop,
ProgressBar,
AwsS3,
} from 'https://releases.transloadit.com/uppy/v3.26.0/uppy.min.mjs'
// Function for displaying uploaded files
const onUploadSuccess = (elForUploadedFiles) => (file, response) => {
const url = response.uploadURL
const fileName = file.name
const li = document.createElement('li')
const a = document.createElement('a')
a.href = url
a.target = '_blank'
a.appendChild(document.createTextNode(fileName))
li.appendChild(a)
document.querySelector(elForUploadedFiles).appendChild(li)
}
var uppy = new Uppy({
autoProceed: true,
restrictions: {
maxNumberOfFiles: 10,
},
})
.use(DragDrop, {
inline: true,
target: '#drag-drop-area',
})
.use(ProgressBar, {
target: '.example .for-ProgressBar',
hideAfterFinish: true,
})
.use(AwsS3, {
getUploadParameters(file) {
// Send a request to our PHP signing endpoint.
return fetch('/sign-s3', {
method: 'post',
// Send and receive JSON.
headers: {
accept: 'application/json',
'content-type': 'application/json',
},
body: JSON.stringify({
filename: file.name,
contentType: file.type,
}),
})
.then((response) => {
// Parse the JSON response.
return response.json()
})
.then((data) => {
// Return an object in the correct shape.
return {
method: data.method,
url: data.url,
fields: data.fields,
// Provide content type header required by S3
headers: {
'Content-Type': file.type,
},
}
})
},
})
uppy.on('complete', (result) => {
console.log(
'Upload complete! We’ve uploaded these files:',
result.successful,
)
})
uppy.on(
'upload-success',
onUploadSuccess('.example .uploaded-files ol'),
)
</script>
</section>
</body>
</html>