Sfoglia il codice sorgente

add custom provider example

Ifedapo Olarewaju 7 anni fa
parent
commit
faa6fbf54e

+ 4 - 0
examples/custom-provider/.gitignore

@@ -0,0 +1,4 @@
+uppy.min.css
+node_modules
+output/*
+!output/.empty

+ 108 - 0
examples/custom-provider/client/MyCustomProvider.js

@@ -0,0 +1,108 @@
+const Plugin = require('uppy/lib/core/Plugin')
+const { Provider } = require('uppy/lib/server')
+const { ProviderView } = require('uppy/lib/views')
+const { h } = require('preact')
+
+module.exports = class MyCustomProvider extends Plugin {
+  constructor (uppy, opts) {
+    super(uppy, opts)
+    this.type = 'acquirer'
+    this.id = this.opts.id || 'MyCustomProvider'
+    this.title = 'MyCustomProvider'
+    this.icon = () => (
+      <img src="https://uppy.io/images/logos/uppy-dog-head-arrow.svg" width="23" />
+    )
+
+    // writing out the key explicitly for readability the key used to store
+    // the provider instance must be equal to this.id.
+    this[this.id] = new Provider(uppy, {
+      host: this.opts.host,
+      provider: 'mycustomprovider'
+    })
+
+    this.files = []
+    this.onAuth = this.onAuth.bind(this)
+    this.render = this.render.bind(this)
+
+    // merge default options with the ones set by user
+    this.opts = Object.assign({}, opts)
+  }
+
+  install () {
+    this.view = new ProviderView(this)
+    // Set default state
+    this.setPluginState({
+      authenticated: false,
+      files: [],
+      folders: [],
+      directories: [],
+      activeRow: -1,
+      filterInput: '',
+      isSearchVisible: false
+    })
+
+    const target = this.opts.target
+    if (target) {
+      this.mount(target, this)
+    }
+  }
+
+  uninstall () {
+    this.view.tearDown()
+    this.unmount()
+  }
+
+  onAuth (authenticated) {
+    this.setPluginState({ authenticated })
+    if (authenticated) {
+      this.view.getFolder()
+    }
+  }
+
+  isFolder (item) {
+    return false
+  }
+
+  getItemData (item) {
+    return item
+  }
+
+  getItemIcon (item) {
+    return () => (
+      <img src="https://uppy.io/images/logos/uppy-dog-head-arrow.svg" />
+    )
+  }
+
+  getItemSubList (item) {
+    return item.entries
+  }
+
+  getItemName (item) {
+    return item.name
+  }
+
+  getMimeType (item) {
+    // mime types aren't supported.
+    return null
+  }
+
+  getItemId (item) {
+    return item.name
+  }
+
+  getItemRequestPath (item) {
+    return encodeURIComponent(item.name)
+  }
+
+  getItemModifiedDate (item) {
+    return Date.now()
+  }
+
+  getItemThumbnailUrl (item) {
+    return 'https://uppy.io/images/logos/uppy-dog-head-arrow.svg'
+  }
+
+  render (state) {
+    return this.view.render(state)
+  }
+}

+ 7 - 0
examples/custom-provider/client/aliasify.js

@@ -0,0 +1,7 @@
+const path = require('path')
+
+module.exports = {
+  replacements: {
+    '^uppy/lib/(.*?)$': path.join(__dirname, '../../../src/$1')
+  }
+}

+ 27 - 0
examples/custom-provider/client/main.js

@@ -0,0 +1,27 @@
+const Uppy = require('uppy/lib/core')
+const GoogleDrive = require('uppy/lib/plugins/GoogleDrive')
+const Tus = require('uppy/lib/plugins/Tus')
+const MyCustomProvider = require('./MyCustomProvider')
+const Dashboard = require('uppy/lib/plugins/Dashboard')
+
+const uppy = Uppy({
+  debug: true,
+  autoProceed: false
+})
+
+uppy.use(GoogleDrive, {
+  host: 'http://localhost:3020'
+})
+
+uppy.use(MyCustomProvider, {
+  host: 'http://localhost:3020'
+})
+
+uppy.use(Dashboard, {
+  inline: true,
+  target: 'body',
+  plugins: ['GoogleDrive', 'MyCustomProvider']
+})
+
+uppy.use(Tus, {endpoint: 'https://master.tus.io/files/'})
+uppy.run()

+ 12 - 0
examples/custom-provider/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Uppy Custom provider Example</title>
+    <link href="uppy.min.css" rel="stylesheet">
+  </head>
+  <body>
+    <script src="bundle.js"></script>
+  </body>
+</html>

+ 0 - 0
examples/custom-provider/output/.empty


+ 21 - 0
examples/custom-provider/package.json

@@ -0,0 +1,21 @@
+{
+  "private": true,
+  "name": "custom-provider-example",
+  "scripts": {
+    "copy": "cp ../../dist/uppy.min.css .",
+    "start:client": "budo client/main.js:bundle.js -- -t babelify -g aliasify",
+    "start:server": "node server/index.js",
+    "start": "npm-run-all --serial copy --parallel start:*"
+  },
+  "aliasify": "client/aliasify.js",
+  "dependencies": {
+    "aliasify": "^2.1.0",
+    "babelify": "^7.3.0",
+    "body-parser": "^1.18.2",
+    "budo": "^10.0.4",
+    "express": "^4.16.2",
+    "express-session": "^1.15.6",
+    "npm-run-all": "^4.1.2",
+    "uppy-server": "^0.11.0"
+  }
+}

+ 13 - 0
examples/custom-provider/readme.md

@@ -0,0 +1,13 @@
+# Uppy + Server + Custom Provider  Example
+
+This example uses uppy-server with a dummy custom provider.
+This serves as an illustration on how integrating custom providers would work
+
+## Run it
+
+Move into this directory, then:
+
+```bash
+npm install
+npm start
+```

+ 42 - 0
examples/custom-provider/server/customprovider.js

@@ -0,0 +1,42 @@
+const fs = require('fs')
+const path = require('path')
+const DUMM_FILE = path.join(__dirname, 'fixtures/image.jpg')
+
+/**
+ * an example of a custom provider module. It implements uppy-server's Provider interface
+ */
+class MyCustomProvider {
+  constructor (options) {
+    this.authProvider = MyCustomProvider.authProvider
+  }
+
+  static get authProvider () {
+    return 'mycustomprovider'
+  }
+
+  list (options, done) {
+    const response = {
+      body: {
+        entries: [
+          { name: 'file1.jpg' },
+          { name: 'file2.jpg' },
+          {name: 'file3.jpg'}
+        ]
+      }
+    }
+    return done(null, response, response.body)
+  }
+
+  download ({ id, token }, onData) {
+    return fs.readFile(DUMM_FILE, (err, data) => {
+      if (err) console.error(err)
+      onData(data)
+    })
+  }
+
+  size ({ id, token }, done) {
+    return done(fs.statSync(DUMM_FILE).size)
+  }
+}
+
+module.exports = MyCustomProvider

BIN
examples/custom-provider/server/fixtures/image.jpg


+ 89 - 0
examples/custom-provider/server/index.js

@@ -0,0 +1,89 @@
+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'
+    }
+  },
+  customProviders: {
+    mycustomprovider: {
+      config: {
+        // your oauth handlers
+        authorize_url: 'http://localhost:3020/oauth/authorize',
+        access_url: 'http://localhost:3020/oauth/token',
+        oauth: 2,
+        key: '***',
+        secret: '**',
+        scope: ['read', 'write']
+      },
+      // you provider module
+      module: require('./customprovider')
+    }
+  },
+  server: {
+    host: 'localhost:3020',
+    protocol: 'http'
+  },
+  filePath: './output',
+  secret: 'some-secret',
+  debug: true
+}
+
+app.get('/oauth/authorize', (req, res) => {
+  // skips the default oauth process.
+  // ideally this endpoint should handle the actual oauth process
+  res.redirect(`http://localhost:3020/mycustomprovider/callback?state=${req.query.state}&access_token=randombytes`)
+})
+
+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}`)