Kezdőlap Felfedezés Súgó
Bejelentkezés
biheng
/
uppy
1
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

Add transloadit kitchen sink demo page

Renée Kooi 6 éve
szülő
c51652bf6b
commit
538f538be1
7 módosított fájl, 208 hozzáadás és 0 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 1 0
      examples/transloadit/.gitignore
  2. 47 0
      examples/transloadit/index.html
  3. 35 0
      examples/transloadit/long.js
  4. 53 0
      examples/transloadit/main.js
  5. 21 0
      examples/transloadit/package.json
  6. 13 0
      examples/transloadit/readme.md
  7. 38 0
      examples/transloadit/server.js

+ 1 - 0
examples/transloadit/.gitignore
Fájl Megtekintése 

@@ -0,0 +1 @@
 
+uppy.min.css

+ 47 - 0
examples/transloadit/index.html
Fájl Megtekintése 

@@ -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>

+ 35 - 0
examples/transloadit/long.js
Fájl Megtekintése 

@@ -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)

+ 53 - 0
examples/transloadit/main.js
Fájl Megtekintése 

@@ -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)

+ 21 - 0
examples/transloadit/package.json
Fájl Megtekintése 

@@ -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"
 
+  }
 
+}

+ 13 - 0
examples/transloadit/readme.md
Fájl Megtekintése 

@@ -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
 
+```

+ 38 - 0
examples/transloadit/server.js
Fájl Megtekintése 

@@ -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)