transloadit · aduh95 · Aug 19, 2022 · Aug 18, 2022
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -195,6 +195,7 @@ module.exports = {
         'examples/aws-presigned-url/*.js',
         'examples/bundled/*.js',
         'examples/custom-provider/client/*.js',
+        'examples/node-xhr/*.js',
         'examples/multiple-instances/*.js',
         'examples/transloadit-markdown-bin/*.js',
         'examples/xhr-bundle/*.js',

diff --git a/examples/node-xhr/.gitignore b/examples/node-xhr/.gitignore
@@ -1,2 +1 @@
-uppy.min.css
-uploads
+uploads/
diff --git a/examples/node-xhr/readme.md → examples/node-xhr/README.md b/examples/node-xhr/readme.md → examples/node-xhr/README.md
@@ -6,15 +6,15 @@ This example uses Node server and `@uppy/xhr-upload` to upload files to the loca
 
 To run this example, make sure you've correctly installed the **repository root**:
 
-```bash
-npm install
-npm run build
+```sh
+corepack yarn install
+corepack yarn build
 ```
 
 That will also install the dependencies for this example.
 
 Then, again in the **repository root**, start this example by doing:
 
-```bash
-npm run example node-xhr
+```sh
+corepack yarn workspace @uppy-example/node-xhr start
 ```
diff --git a/examples/node-xhr/index.html b/examples/node-xhr/index.html
@@ -4,9 +4,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Node.js + Uppy Example</title>
-    <link href="uppy.min.css" rel="stylesheet">
   </head>
   <body>
-    <script src="bundle.js"></script>
+    <noscript>The app requires JavaScript to be enabled.</noscript>
+    <script src="./main.js" type="module"></script>
   </body>
 </html>
diff --git a/examples/node-xhr/main.js b/examples/node-xhr/main.js
@@ -1,7 +1,11 @@
-const Uppy = require('@uppy/core')
-const Webcam = require('@uppy/webcam')
-const Dashboard = require('@uppy/dashboard')
-const XHRUpload = require('@uppy/xhr-upload')
+import Uppy from '@uppy/core'
+import Dashboard from '@uppy/dashboard'
+import XHRUpload from '@uppy/xhr-upload'
+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/node-xhr/package.json b/examples/node-xhr/package.json
@@ -1,24 +1,22 @@
 {
   "name": "@uppy-example/node-xhr",
   "version": "0.0.0",
+  "type": "module",
   "dependencies": {
-    "@babel/core": "^7.4.4",
     "@uppy/core": "workspace:*",
     "@uppy/dashboard": "workspace:*",
     "@uppy/webcam": "workspace:*",
     "@uppy/xhr-upload": "workspace:*",
-    "babelify": "^10.0.0",
-    "budo": "^11.3.2",
-    "cookie-parser": "^1.4.6",
-    "cors": "^2.8.4",
-    "formidable": "^1.2.1",
-    "npm-run-all": "^4.1.3"
+    "formidable": "^3.2.4"
+  },
+  "devDependencies": {
+    "npm-run-all": "^4.1.3",
+    "vite": "^3.0.0"
   },
   "private": true,
   "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": "mkdir -p uploads && node server.js"
+    "start": "npm-run-all --parallel start:server start:client",
+    "start:client": "vite",
+    "start:server": "node server.js"
   }
 }
diff --git a/examples/node-xhr/server.js b/examples/node-xhr/server.js
@@ -1,5 +1,16 @@
-const formidable = require('formidable')
-const http = require('node:http')
+#!/usr/bin/env node
+
+/* eslint-disable no-console */
+
+import http from 'node:http'
+import { fileURLToPath } from 'node:url'
+import { mkdir } from 'node:fs/promises'
+
+import formidable from 'formidable'
+
+const UPLOAD_DIR = new URL('./uploads/', import.meta.url)
+
+await mkdir(UPLOAD_DIR, { recursive: true })
 
 http.createServer((req, res) => {
   const headers = {
@@ -17,9 +28,10 @@ http.createServer((req, res) => {
   }
   if (req.url === '/upload' && req.method.toLowerCase() === 'post') {
     // parse a file upload
-    const form = new formidable.IncomingForm()
-    form.uploadDir = './uploads'
-    form.keepExtensions = true
+    const form = formidable({
+      keepExtensions: true,
+      uploadDir: fileURLToPath(UPLOAD_DIR),
+    })
 
     form.parse(req, (err, fields, files) => {
       if (err) {
@@ -28,11 +40,8 @@ http.createServer((req, res) => {
         res.write(JSON.stringify(err))
         return res.end()
       }
-      const file = files['files[]']
-      console.log('saved file to', file.path)
-      console.log('original name', file.name)
-      console.log('type', file.type)
-      console.log('size', file.size)
+      const { file:[{ filepath, originalFilename, mimetype, size }] } = files
+      console.log('saved file', { filepath, originalFilename, mimetype, size })
       res.writeHead(200, headers)
       res.write(JSON.stringify({ fields, files }))
       return res.end()

diff --git a/yarn.lock b/yarn.lock
@@ -8148,17 +8148,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@uppy-example/node-xhr@workspace:examples/node-xhr"
   dependencies:
-    "@babel/core": ^7.4.4
     "@uppy/core": "workspace:*"
     "@uppy/dashboard": "workspace:*"
     "@uppy/webcam": "workspace:*"
     "@uppy/xhr-upload": "workspace:*"
-    babelify: ^10.0.0
-    budo: ^11.3.2
-    cookie-parser: ^1.4.6
-    cors: ^2.8.4
-    formidable: ^1.2.1
+    formidable: ^3.2.4
     npm-run-all: ^4.1.3
+    vite: ^3.0.0
   languageName: unknown
   linkType: soft
 
@@ -18507,6 +18503,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"formidable@npm:^3.2.4":
+  version: 3.2.4
+  resolution: "formidable@npm:3.2.4"
+  dependencies:
+    dezalgo: 1.0.3
+    hexoid: 1.0.0
+    once: 1.4.0
+  checksum: 23df0f9e1d5eca3546dc56764a56dc402d0156d6a9c900c6e1f071812eeaf12637e5e368a34106f65522356d6080336b7f793b75bebbfff18950bed1d6ae92d4
+  languageName: node
+  linkType: hard
+
 "forwarded@npm:0.2.0":
   version: 0.2.0
   resolution: "forwarded@npm:0.2.0"