examples/aws-nodejs: showcase an example without preflight requests

examples/aws-nodejs/index.js

@@ -28,7 +28,7 @@ function getS3Client () {
   return s3Client
 }
 
-app.use(bodyParser.json())
+app.use(bodyParser.urlencoded({ extended: true }), bodyParser.json())
 
 app.get('/', (req, res) => {
   const htmlPath = path.join(__dirname, 'public', 'index.html')

examples/aws-nodejs/public/index.html

@@ -13,11 +13,37 @@ <h2>AWS S3 multipart</h2>
     <div id="aws-multipart"></div>
     <script type="module">
       import { Uppy, Dashboard, AwsS3Multipart, AwsS3 } from "https://releases.transloadit.com/uppy/v3.10.0/uppy.min.mjs"
+      /**
+       * This generator transforms a deep object into URL-encodable pairs
+       * to work with `URLSearchParams` on the client and `body-parser` on the server.
+       */
+      function* serializeSubPart(key, value) {
+        if (typeof value !== "object") {
+          yield [key, value];
+          return;
+        }
+        if (Array.isArray(value)) {
+          for (const val of value) {
+            yield* serializeSubPart(`${key}[]`, val);
+          }
+          return;
+        }
+        for (const [subkey, val] of Object.entries(value)) {
+          yield* serializeSubPart(key ? `${key}[${subkey}]` : subkey, val);
+        }
+      }
+      function serialize(data) {
+        // If you want to avoid preflight requests, use URL-encoded syntax:
+        return new URLSearchParams(serializeSubPart(null, data))
+        // If you don't care about additional preflight requests, you can also use:
+        // return JSON.stringify(data)
+        // You'd also have to add `Content-Type` header with value `application/json`.
+      }
       {
         const uppy = new Uppy()
           .use(Dashboard, {
             inline: true,
-            target: '#aws-non-multipart',
+            target: "#aws-non-multipart",
           })
           .use(AwsS3, {
             async getUploadParameters (file) {
@@ -27,9 +53,8 @@ <h2>AWS S3 multipart</h2>
                 // Send and receive JSON.
                 headers: {
                   accept: 'application/json',
-                  'content-type': 'application/json',
                 },
-                body: JSON.stringify({
+                body: serialize({
                   filename: file.name,
                   contentType: file.type,
                 }),
@@ -65,7 +90,7 @@ <h2>AWS S3 multipart</h2>
         const uppy = new Uppy()
           .use(Dashboard, {
             inline: true,
-            target: '#aws-multipart',
+            target: "#aws-multipart",
           })
           .use(AwsS3Multipart, {
             async createMultipartUpload(file, signal) {
@@ -88,9 +113,8 @@ <h2>AWS S3 multipart</h2>
                 // Send and receive JSON.
                 headers: {
                   accept: 'application/json',
-                  'content-type': 'application/json',
                 },
-                body: JSON.stringify({
+                body: serialize({
                   filename: file.name,
                   type: file.type,
                   metadata,
@@ -168,9 +192,8 @@ <h2>AWS S3 multipart</h2>
                 method: 'POST',
                 headers: {
                   accept: 'application/json',
-                  'content-type': 'application/json',
                 },
-                body: JSON.stringify({ parts }),
+                body: serialize({ parts }),
                 signal,
               })