Pārlūkot izejas kodu

Refactor example

Renée Kooi 6 gadi atpakaļ
vecāks
revīzija
3d4fac8e41

+ 1 - 2
examples/transloadit/index.html

@@ -8,8 +8,7 @@
   <body>
     <style>
       html {
-        /* windows 98 */
-        background: #3fa2b5 linear-gradient(180deg, #026073 0%, #3fa2b5 100%);
+        background: #f1f1f1;
       }
       main {
         padding: 20px;

+ 27 - 8
examples/transloadit/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "uppy-multiple-instances-example",
+  "name": "uppy-transloadit-preset-example",
   "requires": true,
   "lockfileVersion": 1,
   "dependencies": {
@@ -1557,12 +1557,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -1577,17 +1579,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -1704,7 +1709,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -1716,6 +1722,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -1730,6 +1737,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -1737,12 +1745,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -1761,6 +1771,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -1841,7 +1852,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -1853,6 +1865,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -1974,6 +1987,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -2296,6 +2310,11 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",

+ 3 - 1
examples/transloadit/package.json

@@ -10,7 +10,9 @@
       "@uppy": "../../packages/@uppy"
     }
   },
-  "dependencies": {},
+  "dependencies": {
+    "he": "^1.2.0"
+  },
   "devDependencies": {
     "aliasify": "^2.1.0",
     "babel-core": "^6.26.3",

+ 104 - 24
examples/transloadit/server.js

@@ -1,11 +1,15 @@
 const http = require('http')
 const qs = require('querystring')
+const e = require('he').encode
 
 /**
  * A very haxxor server that outputs some of the data it receives in a POST form parameter.
  */
 
-http.createServer((req, res) => {
+const server = http.createServer(onrequest)
+server.listen(9967)
+
+function onrequest (req, res) {
   if (req.url !== '/test') {
     res.writeHead(404, {'content-type': 'text/html'})
     res.end('404')
@@ -15,28 +19,104 @@ http.createServer((req, res) => {
   let body = ''
   req.on('data', (chunk) => { body += chunk })
   req.on('end', () => {
-    res.setHeader('content-type', 'text/html')
+    onbody(body)
+  })
+
+  function onbody (body) {
     const fields = qs.parse(body)
-    JSON.parse(fields.transloadit).forEach((assembly) => {
-      res.write(`
-        <h1>${assembly.assembly_id} (${assembly.ok})</h1>
-        <ul>
-        ${assembly.uploads.map((upload) => {
-          return `<li>${upload.name}</li>`
-        }).join('\n')}
-        </ul>
-        ${Object.keys(assembly.results).map((stepName) => {
-          return `
-            <h2>${stepName}</h2>
-            <ul>
-            ${assembly.results[stepName].map((result) => {
-              return `<li>${result.name} <a href="${result.ssl_url}" target="_blank">View</a></li>`
-            }).join('\n')}
-            </ul>
-          `
-        }).join('\n')}
-      `)
+    const assemblies = JSON.parse(fields.transloadit)
+
+    res.setHeader('content-type', 'text/html')
+    res.write(Header())
+    res.write(FormFields(fields))
+    assemblies.forEach((assembly) => {
+      res.write(AssemblyResult(assembly))
     })
-    res.end()
-  })
-}).listen(9967)
+    res.end(Footer())
+  }
+}
+
+function Header () {
+  return `
+    <!DOCTYPE html>
+    <html>
+    <head>
+    <style>
+      body { background: #f1f1f1; }
+      main {
+        padding: 20px;
+        font: 12pt sans-serif;
+        background: white;
+        width: 800px;
+        margin: auto;
+      }
+    </style>
+    </head>
+    <body>
+    <main>
+  `
+}
+
+function Footer () {
+  return `
+    </main>
+    </body>
+    </html>
+  `
+}
+
+function FormFields (fields) {
+  return `
+    <h1>Form Fields</h1>
+    <dl>
+      ${Object.entries(fields).map(Field).join('\n')}
+    </dl>
+  `
+
+  function Field ([name, value]) {
+    if (name === 'transloadit') return ''
+    return `
+      <dt>${e(name)}</dt>
+      <dd>${e(value)}</dd>
+    `
+  }
+}
+
+function AssemblyResult (assembly) {
+  return `
+    <h1>${e(assembly.assembly_id)} (${e(assembly.ok)})</h1>
+    ${UploadsList(assembly.uploads)}
+    ${ResultsList(assembly.results)}
+  `
+}
+
+function UploadsList (uploads) {
+  return `
+    <ul>
+      ${uploads.map(Upload).join('\n')}
+    </ul>
+  `
+
+  function Upload (upload) {
+    return `<li>${e(upload.name)}</li>`
+  }
+}
+
+function ResultsList (results) {
+  return Object.keys(results)
+    .map(ResultsSection)
+    .join('\n')
+
+  function ResultsSection (stepName) {
+    return `
+      <h2>${e(stepName)}</h2>
+      <ul>
+        ${results[stepName].map(Result).join('\n')}
+      </ul>
+    `
+  }
+
+  function Result (result) {
+    return `<li>${e(result.name)} <a href="${result.ssl_url}" target="_blank">View</a></li>`
+  }
+}