浏览代码

docs: add example to use uppy + uppy-server

Ifedapo Olarewaju 7 年之前
父节点
当前提交
c59a159b3a

+ 3 - 0
examples/uppy-with-server/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+output/*
+!output/.empty

+ 8 - 0
examples/uppy-with-server/README.md

@@ -0,0 +1,8 @@
+# uppy-server example
+
+This is a simple, lean example that combines the usage of uppy-server and uppy client.
+
+## Test it
+
+To test it, run `npm install` to install the required dependencies, and then simply run `npm start`
+

+ 25 - 0
examples/uppy-with-server/client/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title></title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://transloadit.edgly.net/releases/uppy/v0.22.2/dist/uppy.min.css" rel="stylesheet">
+  </head>
+  <body>
+    <button id="uppyModalOpener">Open Modal</button>
+    <script src="https://transloadit.edgly.net/releases/uppy/v0.22.2/dist/uppy.min.js"></script>
+    <script>
+      const uppy = Uppy.Core({debug: true, autoProceed: false})
+        .use(Uppy.Dashboard, { trigger: '#uppyModalOpener' })
+        .use(Uppy.Instagram, { target: Uppy.Dashboard, host: 'http://localhost:3020' })
+        .use(Uppy.GoogleDrive, { target: Uppy.Dashboard, host: 'http://localhost:3020' })
+        .use(Uppy.Tus, { endpoint: 'https://master.tus.io/files/' })
+        .run()
+
+      uppy.on('success', (fileCount) => {
+        console.log(`${fileCount} files uploaded`)
+      })
+    </script>
+  </body>
+</html>

+ 0 - 0
examples/uppy-with-server/output/.empty


+ 23 - 0
examples/uppy-with-server/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "uppy-with-server-example",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "server": "node ./server/index.js",
+    "client": "light-server -p 3000 -s client",
+    "start": "npm run server & npm run client"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "body-parser": "^1.18.2",
+    "express": "^4.16.2",
+    "express-session": "^1.15.6",
+    "light-server": "^2.4.0",
+    "upload-server": "^1.1.6",
+    "uppy": "^0.22.2",
+    "uppy-server": "^0.10.0"
+  }
+}

+ 73 - 0
examples/uppy-with-server/server/index.js

@@ -0,0 +1,73 @@
+const express = require('express')
+const uppy = require('uppy-server')
+const bodyParser = require('body-parser')
+const session = require('express-session')
+
+const app = express()
+
+app.use(bodyParser.json())
+app.use(session({
+  secret: 'some-secret',
+  resave: true,
+  saveUninitialized: true
+}))
+
+app.use((req, res, next) => {
+  res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*')
+  res.setHeader(
+    'Access-Control-Allow-Methods',
+    'GET, POST, OPTIONS, PUT, PATCH, DELETE'
+  )
+  res.setHeader(
+    'Access-Control-Allow-Headers',
+    'Authorization, Origin, Content-Type, Accept'
+  )
+  res.setHeader('Access-Control-Allow-Credentials', 'true')
+  next()
+})
+
+// Routes
+app.get('/', (req, res) => {
+  res.setHeader('Content-Type', 'text/plain')
+  res.send('Welcome to my uppy server')
+})
+
+// initialize uppy
+const uppyOptions = {
+  providerOptions: {
+    google: {
+      key: 'your google key',
+      secret: 'your google secret'
+    },
+    instagram: {
+      key: 'your instagram key',
+      secret: 'your instagram secret'
+    }
+    // you can also add options for dropbox here
+  },
+  server: {
+    host: 'localhost:3020',
+    protocol: 'http'
+  },
+  filePath: './output',
+  secret: 'some-secret',
+  debug: true
+}
+
+app.use(uppy.app(uppyOptions))
+
+// handle 404
+app.use((req, res, next) => {
+  return res.status(404).json({ message: 'Not Found' })
+})
+
+// handle server errors
+app.use((err, req, res, next) => {
+  console.error('\x1b[31m', err.stack, '\x1b[0m')
+  res.status(err.status || 500).json({ message: err.message, error: err })
+})
+
+uppy.socket(app.listen(3020), uppyOptions)
+
+console.log('Welcome to Uppy Server!')
+console.log(`Listening on http://0.0.0.0:${3020}`)