uppy/examples/aws-nodejs
github-actions[bot] 960362b373
Release: uppy@3.24.0 (#5040)
| Package                   | Version | Package                   | Version |
| ------------------------- | ------- | ------------------------- | ------- |
| @uppy/audio               |   1.1.8 | @uppy/progress-bar        |   3.1.1 |
| @uppy/aws-s3-multipart    |  3.11.0 | @uppy/provider-views      |  3.11.0 |
| @uppy/box                 |   2.3.0 | @uppy/react               |   3.3.0 |
| @uppy/companion           |  4.13.0 | @uppy/remote-sources      |   1.2.0 |
| @uppy/companion-client    |   3.8.0 | @uppy/screen-capture      |   3.2.0 |
| @uppy/compressor          |   1.1.2 | @uppy/status-bar          |   3.3.1 |
| @uppy/core                |  3.10.0 | @uppy/thumbnail-generator |   3.1.0 |
| @uppy/dashboard           |   3.8.0 | @uppy/transloadit         |   3.6.0 |
| @uppy/drag-drop           |   3.1.0 | @uppy/tus                 |   3.5.4 |
| @uppy/drop-target         |   2.0.5 | @uppy/unsplash            |   3.3.0 |
| @uppy/dropbox             |   3.3.0 | @uppy/url                 |   3.6.0 |
| @uppy/facebook            |   3.3.0 | @uppy/utils               |   5.7.5 |
| @uppy/golden-retriever    |   3.2.0 | @uppy/webcam              |   3.4.0 |
| @uppy/google-drive        |   3.5.0 | @uppy/zoom                |   2.3.0 |
| @uppy/instagram           |   3.3.0 | uppy                      |  3.24.0 |
| @uppy/onedrive            |   3.3.0 |                           |         |

- @uppy/box,@uppy/companion-client,@uppy/provider-views,@uppy/status-bar: fix type imports (Antoine du Hamel / #5038)
- @uppy/aws-s3-multipart: mark `opts` as optional (Antoine du Hamel / #5039)
- e2e: bump Cypress version (Antoine du Hamel / #5034)
- @uppy/react: refactor to TS (Antoine du Hamel / #5012)
- @uppy/core: refine type of private variables (Antoine du Hamel / #5028)
- @uppy/dashboard: refine type of private variables (Antoine du Hamel / #5027)
- @uppy/drag-drop: refine type of private variables (Antoine du Hamel / #5026)
- @uppy/status-bar: refine type of private variables (Antoine du Hamel / #5025)
- @uppy/remote-sources: migrate to TS (Merlijn Vos / #5020)
- @uppy/dashboard: refine option types (Antoine du Hamel / #5022)
- @uppy/dashboard: add new `autoOpen` option (Chris Grigg / #5001)
- @uppy/core: fix some type errors (Antoine du Hamel / #5015)
- @uppy/audio,@uppy/dashboard,@uppy/drop-target,@uppy/webcam: add missing exports (Antoine du Hamel / #5014)
- meta: Bump webpack-dev-middleware from 5.3.3 to 5.3.4 (dependabot[bot] / #5013)
- @uppy/dashboard: refactor to TypeScript (Antoine du Hamel / #4984)
- @uppy/companion: improve error msg (Mikael Finstad / #5010)
- @uppy/aws-s3-multipart: refactor to TS (Antoine du Hamel / #4902)
- @uppy/dashboard: refactor to stable lifecycle method (Antoine du Hamel / #4999)
- @uppy/companion: crash if trying to set path to / (Mikael Finstad / #5003)
- @uppy/provider-views: fix `super.toggleCheckbox` bug (Mikael Finstad / #5004)
- @uppy/aws-s3-multipart: fix escaping issue with client signed request (Hiroki Shimizu / #5006)
- @uppy/drag-drop,@uppy/progress-bar: add missing exports (Antoine du Hamel / #5009)
- @uppy/transloadit: migrate to TS (Merlijn Vos / #4987)
- @uppy/utils: fix `RateLimitedQueue#wrapPromiseFunction` types (Antoine du Hamel / #5007)
- @uppy/golden-retriever: migrate to TS (Merlijn Vos / #4989)
- meta: Bump follow-redirects from 1.15.4 to 1.15.6 (dependabot[bot] / #5002)
- meta: fix `resize-observer-polyfill` types (Antoine du Hamel / #4994)
- @uppy/core: various type fixes (Antoine du Hamel / #4995)
- @uppy/utils: fix `findAllDOMElements` type (Antoine du Hamel / #4997)
- @uppy/status-bar: fix `recoveredState` type (Antoine du Hamel / #4996)
- @uppy/utils: fix `AbortablePromise` type (Antoine du Hamel / #4988)
- @uppy/core,@uppy/provider-views: Fix breadcrumbs (Evgenia Karunus / #4986)
- @uppy/drag-drop: refactor to TypeScript (Antoine du Hamel / #4983)
- @uppy/webcam: refactor to TypeScript (Antoine du Hamel / #4870)
- @uppy/url: migrate to TS (Merlijn Vos / #4980)
- @uppy/zoom: refactor to TypeScript (Murderlon / #4979)
- @uppy/unsplash: refactor to TypeScript (Murderlon / #4979)
- @uppy/onedrive: refactor to TypeScript (Murderlon / #4979)
- @uppy/instagram: refactor to TypeScript (Murderlon / #4979)
- @uppy/google-drive: refactor to TypeScript (Murderlon / #4979)
- @uppy/facebook: refactor to TypeScript (Murderlon / #4979)
- @uppy/dropbox: refactor to TypeScript (Murderlon / #4979)
- @uppy/box: refactor to TypeScript (Murderlon / #4979)
- @uppy/utils: migrate RateLimitedQueue to TS (Merlijn Vos / #4981)
- @uppy/thumbnail-generator: migrate to TS (Merlijn Vos / #4978)
- @uppy/screen-capture: migrate to TS (Merlijn Vos / #4965)
- @uppy/companion-client: Replace Provider.initPlugin with composition (Merlijn Vos / #4977)
2024-03-27 14:57:26 +00:00
..
public Release: uppy@3.24.0 (#5040) 2024-03-27 14:57:26 +00:00
index.js examples/aws: client-side signing (#4463) 2023-07-20 11:34:22 +02:00
package.json examples/aws: client-side signing (#4463) 2023-07-20 11:34:22 +02:00
README.md examples/aws-nodejs: update README (#4534) 2023-06-28 10:52:41 +02:00

Uppy + AWS S3 with Node.JS

A simple and fully working example of Uppy and AWS S3 storage with Node.js (and Express.js). It uses presigned URL at the backend level.

AWS Configuration

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 out of the scope here.

S3 Setup

  • Create new S3 bucket in AWS (e.g. aws-nodejs).

  • Add a bucket policy.

    {
      "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.

    [
      {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET", "PUT", "HEAD", "POST", "DELETE"],
        "AllowedOrigins": ["*"],
        "ExposeHeaders": []
      }
    ]
    

AWS Credentials

You may use existing AWS credentials or create a new user in the IAM page.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "VisualEditor0",
      "Effect": "Allow",
      "Action": ["s3:PutObject", "s3:PutObjectAcl"],
      "Resource": "arn:aws:s3:::aws-nodejs/*"
    }
  ]
}

Prerequisites

Download this code or clone repository into a folder and install dependencies:

CYPRESS_INSTALL_BINARY=0 corepack yarn install

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_REGION=…
COMPANION_AWS_KEY=…
COMPANION_AWS_SECRET=…
PORT=8080

N.B.: This example uses COMPANION_AWS_ environnement variables to facilitate integrations with other examples in this repository, but this example does not uses Companion at all.

Enjoy it

Start the application:

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.