6 年之前 · 538f538be1
--- a/examples/transloadit/.gitignore
+++ b/examples/transloadit/.gitignore
@@ -0,0 +1 @@
 
				+uppy.min.css
			
--- a/examples/transloadit/index.html
+++ b/examples/transloadit/index.html
@@ -0,0 +1,47 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+    <title>Uppy :tl: playground</title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <style>
			
 
				+      main {
			
 
				+        display: flex;
			
 
				+        justify-content: space-around;
			
 
				+        align-items: center;
			
 
				+        flex-direction: column;
			
 
				+      }
			
 
				+      h1 { text-align: center }
			
 
				+    </style>
			
 
				+    <main>
			
 
				+      <h1>Uppy :tl: playground</h1>
			
 
				+
			
 
				+      <hr>
			
 
				+
			
 
				+      <form id="test-form" method="post" action="http://localhost:9967/test">
			
 
				+        <h2>leave a message</h2>
			
 
				+        <p>
			
 
				+          name:
			
 
				+          <input type="text" name="name">
			
 
				+        <p>
			
 
				+          message: <br>
			
 
				+          <textarea name="message"></textarea>
			
 
				+
			
 
				+        <p>
			
 
				+          attachments:
			
 
				+          <input type="file">
			
 
				+
			
 
				+        <p>
			
 
				+          <button type="submit">
			
 
				+            Upload
			
 
				+          </button>
			
 
				+      </form>
			
 
				+      <hr>
			
 
				+    </main>
			
 
				+
			
 
				+    <link href="uppy.min.css" rel="stylesheet">
			
 
				+    <script src="bundle.js"></script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/examples/transloadit/long.js
+++ b/examples/transloadit/long.js
@@ -0,0 +1,35 @@
 
				+const Uppy = require('@uppy/core')
			
 
				+const Dashboard = require('@uppy/dashboard')
			
 
				+const Transloadit = require('@uppy/transloadit')
			
 
				+const Webcam = require('@uppy/Webcam')
			
 
				+
			
 
				+const uppy = Uppy({
			
 
				+  allowMultipleUploads: false,
			
 
				+  restrictions: {
			
 
				+    allowedFileTypes: ['.png']
			
 
				+  }
			
 
				+})
			
 
				+
			
 
				+uppy.use(Dashboard, {
			
 
				+  target: 'body',
			
 
				+  closeAfterFinish: true
			
 
				+})
			
 
				+
			
 
				+uppy.use(Webcam, {
			
 
				+  target: Dashboard
			
 
				+})
			
 
				+
			
 
				+uppy.use(Transloadit, {
			
 
				+  waitForEncoding: true,
			
 
				+  params: {
			
 
				+    auth: { key: '05a61ed019fe11e783fdbd1f56c73eb0' },
			
 
				+    template_id: 'be001500a56011e889f9cddd88df842c'
			
 
				+  }
			
 
				+})
			
 
				+
			
 
				+const result = new Promise((resolve, reject) => {
			
 
				+  uppy.on('error', reject)
			
 
				+  uppy.on('complete', resolve)
			
 
				+})
			
 
				+
			
 
				+result.then(console.log)
			
--- a/examples/transloadit/main.js
+++ b/examples/transloadit/main.js
@@ -0,0 +1,53 @@
 
				+const transloadit = require('@uppy/transloadit-preset')
			
 
				+
			
 
				+transloadit.modal('body', {
			
 
				+  restrictions: {
			
 
				+    allowedFileTypes: ['.png']
			
 
				+  },
			
 
				+  waitForEncoding: true,
			
 
				+  params: {
			
 
				+    auth: { key: '05a61ed019fe11e783fdbd1f56c73eb0' },
			
 
				+    template_id: 'be001500a56011e889f9cddd88df842c'
			
 
				+  },
			
 
				+  providers: [
			
 
				+    'webcam'
			
 
				+  ]
			
 
				+  // if providers need custom config
			
 
				+  // webcam: {
			
 
				+  //   option: 'whatever'
			
 
				+  // }
			
 
				+}).then(console.log, console.error)
			
 
				+
			
 
				+window.formUppy = transloadit.form('#test-form', {
			
 
				+  debug: true,
			
 
				+  restrictions: {
			
 
				+    allowedFileTypes: ['.png']
			
 
				+  },
			
 
				+  waitForEncoding: true,
			
 
				+  params: {
			
 
				+    auth: { key: '05a61ed019fe11e783fdbd1f56c73eb0' },
			
 
				+    template_id: 'be001500a56011e889f9cddd88df842c'
			
 
				+  }
			
 
				+})
			
 
				+
			
 
				+const input = document.createElement('input')
			
 
				+input.setAttribute('type', 'file')
			
 
				+input.setAttribute('multiple', 'multiple')
			
 
				+
			
 
				+const p = document.createElement('p')
			
 
				+p.append(
			
 
				+  document.createTextNode('An <input type=file> backed by `transloadit.upload`:'),
			
 
				+  input
			
 
				+)
			
 
				+
			
 
				+input.addEventListener('change', () => {
			
 
				+  transloadit.upload(input.files, {
			
 
				+    waitForEncoding: true,
			
 
				+    params: {
			
 
				+      auth: { key: '05a61ed019fe11e783fdbd1f56c73eb0' },
			
 
				+      template_id: 'be001500a56011e889f9cddd88df842c'
			
 
				+    }
			
 
				+  }).then(console.log, console.error)
			
 
				+})
			
 
				+
			
 
				+document.querySelector('main').append(p)
			
--- a/examples/transloadit/package.json
+++ b/examples/transloadit/package.json
@@ -0,0 +1,21 @@
 
				+{
			
 
				+  "private": true,
			
 
				+  "name": "uppy-multiple-instances-example",
			
 
				+  "scripts": {
			
 
				+    "css": "cp ../../packages/uppy/dist/uppy.min.css .",
			
 
				+    "start": "npm run css && (node server & budo main.js:bundle.js -- -t babelify -g aliasify & wait)"
			
 
				+  },
			
 
				+  "aliasify": {
			
 
				+    "aliases": {
			
 
				+      "@uppy": "../../packages/@uppy"
			
 
				+    }
			
 
				+  },
			
 
				+  "dependencies": {},
			
 
				+  "devDependencies": {
			
 
				+    "aliasify": "^2.1.0",
			
 
				+    "babel-core": "^6.26.3",
			
 
				+    "babelify": "^8.0.0",
			
 
				+    "budo": "^11.3.2",
			
 
				+    "express": "^4.16.4"
			
 
				+  }
			
 
				+}
			
--- a/examples/transloadit/readme.md
+++ b/examples/transloadit/readme.md
@@ -0,0 +1,13 @@
 
				+# Multiple Instances
			
 
				+
			
 
				+This example uses Uppy with the RestoreFiles plugin.
			
 
				+It has two instances on the same page, side-by-side, but with different `id`s so their stored files don't interfere with each other.
			
 
				+
			
 
				+## Run it
			
 
				+
			
 
				+Move into this directory, then:
			
 
				+
			
 
				+```bash
			
 
				+npm install
			
 
				+npm start
			
 
				+```
			
--- a/examples/transloadit/server.js
+++ b/examples/transloadit/server.js
@@ -0,0 +1,38 @@
 
				+const http = require('http')
			
 
				+const qs = require('querystring')
			
 
				+
			
 
				+http.createServer((req, res) => {
			
 
				+  if (req.url !== '/test') {
			
 
				+    res.writeHead(404, {'content-type': 'text/html'})
			
 
				+    res.end('404')
			
 
				+    return
			
 
				+  }
			
 
				+
			
 
				+  let body = ''
			
 
				+  req.on('data', (chunk) => { body += chunk })
			
 
				+  req.on('end', () => {
			
 
				+    res.setHeader('content-type', 'text/html')
			
 
				+    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')}
			
 
				+      `)
			
 
				+    })
			
 
				+    res.end()
			
 
				+  })
			
 
				+}).listen(9967)