example: fix aws-companion example (#3850)

Co-authored-by: Merlijn Vos <merlijn@soverin.net>
transloadit · Aug 3, 2022 · dfed0ff · dfed0ff
1 parent 2b87253
commit dfed0ff
Show file tree

Hide file tree

Showing 9 changed files with 589 additions and 78 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -191,6 +191,7 @@ module.exports = {
       files: [
         '*.mjs',
         'e2e/clients/**/*.js',
+        'examples/aws-companion/*.js',
         'examples/aws-presigned-url/*.js',
         'examples/bundled/*.js',
         'examples/custom-provider/client/*.js',

diff --git a/examples/aws-companion/.gitignore b/examples/aws-companion/.gitignore
@@ -1 +1 @@
-uppy.min.css
+tmp
diff --git a/examples/aws-companion/README.md b/examples/aws-companion/README.md
@@ -0,0 +1,23 @@
+# Uppy + AWS S3 Example
+
+This example uses @uppy/companion with a custom AWS S3 configuration.
+Files are uploaded to a randomly named directory inside the `whatever/`
+directory in a bucket.
+
+## Run it
+
+First, set up the `COMPANION_AWS_KEY`, `COMPANION_AWS_SECRET`,
+`COMPANION_AWS_REGION`, and `COMPANION_AWS_BUCKET` environment variables for
+`@uppy/companion` in a `.env` file. You may find useful to first copy the
+`.env.example` file:
+
+```sh
+[ -f .env ] || cp .env.example .env
+```
+
+To run this example, from the **repository root**, run:
+
+```sh
+corepack yarn install
+corepack yarn workspace @uppy-example/aws-companion start
+```
diff --git a/examples/aws-companion/index.html b/examples/aws-companion/index.html
@@ -4,9 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Companion + AWS Example</title>
-    <link href="uppy.min.css" rel="stylesheet">
   </head>
   <body>
-    <script src="bundle.js"></script>
+    <script src="./main.js" type="module"></script>
   </body>
 </html>
diff --git a/examples/aws-companion/main.js b/examples/aws-companion/main.js
@@ -1,8 +1,12 @@
-const Uppy = require('@uppy/core')
-const GoogleDrive = require('@uppy/google-drive')
-const Webcam = require('@uppy/webcam')
-const Dashboard = require('@uppy/dashboard')
-const AwsS3 = require('@uppy/aws-s3')
+import AwsS3 from '@uppy/aws-s3'
+import Uppy from '@uppy/core'
+import Dashboard from '@uppy/dashboard'
+import GoogleDrive from '@uppy/google-drive'
+import Webcam from '@uppy/webcam'
+
+import '@uppy/core/dist/style.css'
+import '@uppy/dashboard/dist/style.css'
+import '@uppy/webcam/dist/style.css'
 
 const uppy = new Uppy({
   debug: true,

diff --git a/examples/aws-companion/package.json b/examples/aws-companion/package.json
@@ -1,30 +1,33 @@
 {
   "name": "@uppy-example/aws-companion",
   "version": "0.0.0",
+  "type": "module",
   "dependencies": {
-    "@babel/core": "^7.2.2",
     "@uppy/aws-s3": "workspace:*",
     "@uppy/core": "workspace:*",
     "@uppy/dashboard": "workspace:*",
     "@uppy/google-drive": "workspace:*",
-    "@uppy/webcam": "workspace:*",
-    "babelify": "^10.0.0",
-    "body-parser": "^1.18.3",
-    "budo": "^11.6.1",
+    "@uppy/webcam": "workspace:*"
+  },
+  "devDependencies": {
+    "@uppy/companion": "workspace:*",
+    "body-parser": "^1.20.0",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
-    "express": "^4.16.4",
-    "express-session": "^1.15.6",
-    "npm-run-all": "^4.1.5"
+    "dotenv": "^16.0.1",
+    "express": "^4.18.1",
+    "express-session": "^1.17.3",
+    "npm-run-all": "^4.1.5",
+    "vite": "^2.7.1"
   },
   "private": true,
   "engines": {
-    "node": ">=14.14.0"
+    "node": ">=16.15.0"
   },
   "scripts": {
-    "copy": "cp ../../packages/uppy/dist/uppy.min.css .",
-    "start": "npm-run-all --serial copy --parallel start:*",
-    "start:client": "budo main.js:bundle.js -- -t babelify",
-    "start:server": "node server.js"
+    "dev": "vite",
+    "start": "npm-run-all --parallel start:client start:server",
+    "start:client": "vite",
+    "start:server": "node server.cjs"
   }
 }
diff --git a/examples/aws-companion/readme.md b/examples/aws-companion/readme.md
diff --git a/examples/aws-companion/server.js → examples/aws-companion/server.cjs b/examples/aws-companion/server.js → examples/aws-companion/server.cjs
@@ -1,18 +1,24 @@
 const fs = require('node:fs')
 const path = require('node:path')
-const companion = require('../../packages/@uppy/companion')
+const crypto = require('node:crypto')
+const companion = require('@uppy/companion')
+
+require('dotenv').config({ path: path.join(__dirname, '..', '..', '.env') })
 const app = require('express')()
 
 const DATA_DIR = path.join(__dirname, 'tmp')
 
 app.use(require('cors')({
-  origin: true,
+  origin: 'http://localhost:3000',
+  methods: ['GET', 'POST', 'OPTIONS'],
   credentials: true,
 }))
 app.use(require('cookie-parser')())
 app.use(require('body-parser').json())
 app.use(require('express-session')({
   secret: 'hello planet',
+  saveUninitialized: false,
+  resave: false,
 }))
 
 const options = {
@@ -21,14 +27,14 @@ const options = {
       key: process.env.COMPANION_GOOGLE_KEY,
       secret: process.env.COMPANION_GOOGLE_SECRET,
     },
-    s3: {
-      getKey: (req, filename) => `whatever/${Math.random().toString(32).slice(2)}/${filename}`,
-      key: process.env.COMPANION_AWS_KEY,
-      secret: process.env.COMPANION_AWS_SECRET,
-      bucket: process.env.COMPANION_AWS_BUCKET,
-      region: process.env.COMPANION_AWS_REGION,
-      endpoint: process.env.COMPANION_AWS_ENDPOINT,
-    },
+  },
+  s3: {
+    getKey: (req, filename) => `${crypto.randomUUID()}-${filename}`,
+    key: process.env.COMPANION_AWS_KEY,
+    secret: process.env.COMPANION_AWS_SECRET,
+    bucket: process.env.COMPANION_AWS_BUCKET,
+    region: process.env.COMPANION_AWS_REGION,
+    endpoint: process.env.COMPANION_AWS_ENDPOINT,
   },
   server: { host: 'localhost:3020' },
   filePath: DATA_DIR,