example: fix svelte example (#4017)

examples/svelte-example/.gitignore

@@ -1,4 +1,5 @@
 /node_modules/
+/uploads/
 /public/build/
 
 .DS_Store

examples/svelte-example/README.md

@@ -12,5 +12,5 @@ corepack yarn build
 Then, again in the **repository root**, start this example by doing:
 
 ```sh
-corepack yarn workspace @uppy-example/svelte-app dev
+corepack yarn workspace @uppy-example/svelte-app start
 ```

examples/svelte-example/package.json

@@ -3,8 +3,9 @@
   "version": "0.0.0",
   "scripts": {
     "build": "rollup -c",
-    "dev": "rollup -c -w",
-    "start": "sirv public",
+    "start:client": "rollup -c -w",
+    "start:server": "node ./server.mjs",
+    "start": "npm-run-all --parallel start:client start:server",
     "validate": "svelte-check"
   },
   "devDependencies": {
@@ -13,6 +14,7 @@
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-typescript": "^8.0.0",
     "@tsconfig/svelte": "^1.0.0",
+    "npm-run-all": "^4.1.5",
     "postcss": "^8.2.1",
     "postcss-import": "^13.0.0",
     "postcss-load-config": "^3.0.0",
@@ -32,6 +34,7 @@
     "@uppy/svelte": "workspace:*",
     "@uppy/webcam": "workspace:*",
     "@uppy/xhr-upload": "workspace:*",
+    "formidable": "^2.0.1",
     "sirv-cli": "^1.0.0"
   },
   "private": true

examples/svelte-example/server.mjs

@@ -0,0 +1,52 @@
+#!/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 = {
+    'Content-Type': 'application/json',
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Methods': 'OPTIONS, POST, GET',
+    'Access-Control-Max-Age': 2592000, // 30 days
+    /** add other headers as per requirement */
+  }
+
+  if (req.method === 'OPTIONS') {
+    res.writeHead(204, headers)
+    res.end()
+    return
+  }
+  if (req.url === '/upload' && req.method.toLowerCase() === 'post') {
+    // parse a file upload
+    const form = formidable({
+      keepExtensions: true,
+      uploadDir: fileURLToPath(UPLOAD_DIR),
+    })
+
+    form.parse(req, (err, fields, files) => {
+      if (err) {
+        console.log('some error', err)
+        res.writeHead(200, headers)
+        res.write(JSON.stringify(err))
+        return res.end()
+      }
+      const { files: { 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()
+    })
+  }
+}).listen(9967, () => {
+  console.log('server started')
+})

yarn.lock

@@ -8246,6 +8246,8 @@ __metadata:
     "@uppy/svelte": "workspace:*"
     "@uppy/webcam": "workspace:*"
     "@uppy/xhr-upload": "workspace:*"
+    formidable: ^2.0.1
+    npm-run-all: ^4.1.5
     postcss: ^8.2.1
     postcss-import: ^13.0.0
     postcss-load-config: ^3.0.0