صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
biheng
/
uppy
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

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

Co-authored-by: Antoine du Hamel <antoine@transloadit.com>
Artur Paikin 11 ماه پیش
والد
e73c507095
کامیت
abf65eeb91
2فایلهای تغییر یافته به همراه58 افزوده شده و 154 حذف شده
نمای یکپارچه نمایش آمار تفاوت ها
  1. 58 50
      examples/aws-nodejs/README.md
  2. 0 104
      examples/aws-nodejs/public/drag.html

+ 58 - 50
examples/aws-nodejs/README.md
مشاهده فایل 

@@ -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
 
 It's assumed that you are familiar with AWS, at least, with the storage service
 
 (S3) and users & policies (IAM).
 
 (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.
 
 out of the scope here.
 
 
 
 ### S3 Setup
 
 ### S3 Setup
 
 
 
-- Create new S3 bucket in AWS (e.g. `aws-nodejs`).
 
-- Add a bucket policy.
 
-
 
-  ```json
 
-  {
 
-    "Version": "2012-10-17",
 
-    "Statement": [
 
-      {
 
-        "Sid": "PublicAccess",
 
-        "Effect": "Allow",
 
-        "Principal": "*",
 
-        "Action": "s3:GetObject",
 
-        "Resource": "arn:aws:s3:::aws-nodejs/*"
 
-      }
 
-    ]
 
-  }
 
-  ```
 
-
 
-- Make the S3 bucket public.
 
-- Add CORS configuration.
 
-
 
-  ```json
 
-  [
 
-    {
 
-      "AllowedHeaders": ["*"],
 
-      "AllowedMethods": ["GET", "PUT", "HEAD", "POST", "DELETE"],
 
-      "AllowedOrigins": ["*"],
 
-      "ExposeHeaders": []
 
-    }
 
-  ]
 
-  ```
 
+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`:
 
+
 
+1. Set CORS settings on `MY-UPPY-BUCKET` bucket:
 
+
 
+   ```json
 
+   [
 
+     {
 
+       "AllowedHeaders": ["*"],
 
+       "AllowedMethods": ["GET", "PUT", "HEAD", "POST", "DELETE"],
 
+       "AllowedOrigins": ["*"],
 
+       "ExposeHeaders": ["ETag", "Location"]
 
+     }
 
+   ]
 
+   ```
 
+
 
+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
 
 ### 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)
 
   [environment variables](https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/loading-node-credentials-environment.html)
 
   or a
 
   or a
 
   [credentials file in `~/.aws/credentials`](https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/setting-credentials-node.html).
 
   [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
 
 ## 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:
 
 variables like the example below:
 
 
 
 ```
 
 ```
 
-COMPANION_AWS_BUCKET=aws-nodejs
 
+COMPANION_AWS_BUCKET=MY-UPPY-BUCKET
 
 COMPANION_AWS_REGION=…
 
 COMPANION_AWS_REGION=…
 
 COMPANION_AWS_KEY=…
 
 COMPANION_AWS_KEY=…
 
 COMPANION_AWS_SECRET=…
 
 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.
 
 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._
 
 _Feel free to check how the demo works and feel free to open an issue._

+ 0 - 104
examples/aws-nodejs/public/drag.html
مشاهده فایل 

@@ -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>