diff --git a/.eslintrc.js b/.eslintrc.js index f0c9f318e5..88ab3dc9b7 100644 --- 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 index 4f15b1cceb..8fc0d80271 100644 --- 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 b/examples/node-xhr/README.md similarity index 76% rename from examples/node-xhr/readme.md rename to examples/node-xhr/README.md index 697a2f8da5..5913d02e5f 100644 --- a/examples/node-xhr/readme.md +++ b/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 index 25bccf949c..b768a79a1a 100644 --- a/examples/node-xhr/index.html +++ b/examples/node-xhr/index.html @@ -4,9 +4,9 @@ Node.js + Uppy Example - - + + diff --git a/examples/node-xhr/main.js b/examples/node-xhr/main.js index 670a844cda..1755295663 100644 --- 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 index 3bcb27253e..52aaa6421c 100644 --- 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 old mode 100644 new mode 100755 index c86461dc8c..d62135d379 --- 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 index e795c14132..1ee5613f33 100644 --- 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"