Home Explore Help
Sign In
biheng
/
uppy
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

dev example: re-build lib automatically, don’t open browser and no ghosts, start companion

Artur Paikin 6 years ago
parent
8f7595c4e8
commit
af115f3ace
5 changed files with 183 additions and 5 deletions
Unified View Show Diff Stats
  1. 36 0
      examples/dev/index.html
  2. 65 0
      examples/dev/main.js
  3. 16 0
      examples/dev/package.json
  4. 61 0
      examples/dev/sw.js
  5. 5 5
      package.json

+ 36 - 0
examples/dev/index.html
View File 

@@ -0,0 +1,36 @@
 
+<!DOCTYPE html>
 
+<html>
 
+  <head>
 
+    <meta charset="utf-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <title>uppy</title>
 
+  </head>
 
+  <body>
 
+    <style>
 
+      main {
 
+        padding-top: 100px;
 
+        text-align: center;
 
+      }
 
+
 
+      #upload-form {
 
+        max-width: 400px;
 
+        margin: auto;
 
+        text-align: left;
 
+      }
 
+    </style>
 
+    <main>
 
+      <h1>Uppy is here</h1>
 
+
 
+      <form id="upload-form" action="/">
 
+        <button type="button" id="pick-files">Pick Files</button><br>
 
+        True ? <input type="checkbox" name="check_test" value="1" checked><br>
 
+        Something: <input type="text" name="yo" value="1"><br>
 
+        <input type="hidden" name="bla" value="12333"><br>
 
+        <button type="submit">Submit</button>
 
+      </form>
 
+    </main>
 
+
 
+    <link href="uppy.min.css" rel="stylesheet">
 
+    <script src="bundle.js"></script>
 
+  </body>
 
+</html>

+ 65 - 0
examples/dev/main.js
View File 

@@ -0,0 +1,65 @@
 
+const Uppy = require('./../../packages/@uppy/core/src')
 
+const Dashboard = require('./../../packages/@uppy/dashboard/src')
 
+const Instagram = require('./../../packages/@uppy/instagram/src')
 
+const Dropbox = require('./../../packages/@uppy/dropbox/src')
 
+const GoogleDrive = require('./../../packages/@uppy/google-drive/src')
 
+const Url = require('./../../packages/@uppy/url/src')
 
+const Webcam = require('./../../packages/@uppy/webcam/src')
 
+const Tus = require('./../../packages/@uppy/tus/src')
 
+const Form = require('./../../packages/@uppy/form/src')
 
+
 
+const TUS_ENDPOINT = 'https://master.tus.io/files/'
 
+
 
+const uppy = Uppy({
 
+  debug: true,
 
+  meta: {
 
+    username: 'John',
 
+    license: 'Creative Commons'
 
+  }
 
+})
 
+  .use(Dashboard, {
 
+    trigger: '#pick-files',
 
+    // inline: true,
 
+    // target: 'body',
 
+    metaFields: [
 
+      { id: 'license', name: 'License', placeholder: 'specify license' },
 
+      { id: 'caption', name: 'Caption', placeholder: 'add caption' }
 
+    ],
 
+    showProgressDetails: true,
 
+    proudlyDisplayPoweredByUppy: true,
 
+    note: '2 files, images and video only'
 
+  })
 
+  .use(GoogleDrive, { target: Dashboard, serverUrl: 'http://localhost:3020' })
 
+  .use(Instagram, { target: Dashboard, serverUrl: 'http://localhost:3020' })
 
+  .use(Dropbox, { target: Dashboard, serverUrl: 'http://localhost:3020' })
 
+  .use(Url, { target: Dashboard, serverUrl: 'http://localhost:3020' })
 
+  .use(Webcam, { target: Dashboard })
 
+  .use(Tus, { endpoint: TUS_ENDPOINT })
 
+  .use(Form, { target: '#upload-form' })
 
+  // .use(GoldenRetriever, {serviceWorker: true})
 
+
 
+uppy.on('complete', (result) => {
 
+  if (result.failed.length === 0) {
 
+    console.log('Upload successful 😀')
 
+  } else {
 
+    console.warn('Upload failed 😞')
 
+  }
 
+  console.log('successful files:', result.successful)
 
+  console.log('failed files:', result.failed)
 
+})
 
+
 
+/* eslint-disable compat/compat */
 
+if ('serviceWorker' in navigator) {
 
+  navigator.serviceWorker
 
+    .register('/sw.js')
 
+    .then((registration) => {
 
+      console.log('ServiceWorker registration successful with scope: ', registration.scope)
 
+    })
 
+    .catch((error) => {
 
+      console.log('Registration failed with ' + error)
 
+    })
 
+}
 
+/* eslint-enable */
 
+
 
+var modalTrigger = document.querySelector('#pick-files')
 
+if (modalTrigger) modalTrigger.click()

+ 16 - 0
examples/dev/package.json
View File 

@@ -0,0 +1,16 @@
 
+{
 
+  "dependencies": {
 
+    "aliasify": "^2.1.0",
 
+    "babel-core": "^6.26.3",
 
+    "babelify": "^8.0.0",
 
+    "watchify": "^3.11.0"
 
+  },
 
+  "scripts": {
 
+    "watch": "watchify -t babelify -t aliasify main.js -o bundle.js -vd"
 
+  },
 
+  "aliasify": {
 
+    "aliases": {
 
+      "@uppy": "../../packages/@uppy"
 
+    }
 
+  }
 
+}

+ 61 - 0
examples/dev/sw.js
View File 

@@ -0,0 +1,61 @@
 
+/* globals clients */
 
+
 
+const fileCache = Object.create(null)
 
+
 
+function getCache (name) {
 
+  if (!fileCache[name]) {
 
+    fileCache[name] = Object.create(null)
 
+  }
 
+  return fileCache[name]
 
+}
 
+
 
+self.addEventListener('install', (event) => {
 
+  console.log('Installing Uppy Service Worker...')
 
+
 
+  event.waitUntil(Promise.resolve()
 
+    .then(() => self.skipWaiting()))
 
+})
 
+
 
+self.addEventListener('activate', (event) => {
 
+  event.waitUntil(self.clients.claim())
 
+})
 
+
 
+function sendMessageToAllClients (msg) {
 
+  clients.matchAll().then((clients) => {
 
+    clients.forEach((client) => {
 
+      client.postMessage(msg)
 
+    })
 
+  })
 
+}
 
+
 
+function addFile (store, file) {
 
+  getCache(store)[file.id] = file.data
 
+  console.log('Added file blob to service worker cache:', file.data)
 
+}
 
+
 
+function removeFile (store, fileID) {
 
+  delete getCache(store)[fileID]
 
+  console.log('Removed file blob from service worker cache:', fileID)
 
+}
 
+
 
+function getFiles (store) {
 
+  sendMessageToAllClients({
 
+    type: 'uppy/ALL_FILES',
 
+    store: store,
 
+    files: getCache(store)
 
+  })
 
+}
 
+
 
+self.addEventListener('message', (event) => {
 
+  switch (event.data.type) {
 
+    case 'uppy/ADD_FILE':
 
+      addFile(event.data.store, event.data.file)
 
+      break
 
+    case 'uppy/REMOVE_FILE':
 
+      removeFile(event.data.store, event.data.fileID)
 
+      break
 
+    case 'uppy/GET_FILES':
 
+      getFiles(event.data.store)
 
+      break
 
+  }
 
+})

+ 5 - 5
package.json
View File 

@@ -109,16 +109,16 @@
 
     "travis:deletecache": "travis cache --delete",
 
     "travis:deletecache": "travis cache --delete",
 
     "watch:css": "onchange 'packages/**/*.scss' --initial --verbose -- npm run build:css",
 
     "watch:css": "onchange 'packages/**/*.scss' --initial --verbose -- npm run build:css",
 
     "watch:js": "onchange 'packages/{@uppy/,}*/src/**/*.js' --initial --verbose -- npm run build:bundle",
 
     "watch:js": "onchange 'packages/{@uppy/,}*/src/**/*.js' --initial --verbose -- npm run build:bundle",
 
+    "watch:js:lib": "onchange 'packages/{@uppy/,}*/src/**/*.js' --initial --verbose -- npm run build:lib",
 
     "watch": "npm-run-all --parallel watch:js watch:css",
 
     "watch": "npm-run-all --parallel watch:js watch:css",
 
     "watch:fast": "npm-run-all --parallel watch:css web:preview",
 
     "watch:fast": "npm-run-all --parallel watch:css web:preview",
 
-    "watch:example:browsersync": "browser-sync start --server examples/bundled-example --port 3452 --serveStatic packages/uppy/dist --files \"examples/bundled-example/bundle.js, packages/uppy/dist/uppy.min.css\"",
 
-    "watch:example:js": "cd examples/bundled-example && npm run watch",
 
-    "watch:example": "npm-run-all --parallel watch:example:js watch:css watch:example:browsersync",
 
-    "dev": "npm-run-all --parallel watch:example:js watch:css watch:example:browsersync",
 
+    "dev:browsersync": "browser-sync start --no-open --no-ghost-mode false --server examples/dev --port 3452 --serveStatic packages/uppy/dist --files \"examples/dev/bundle.js, packages/uppy/dist/uppy.min.css, packages/uppy/lib/**/*\"",
 
+    "dev:js": "cd examples/dev && npm run watch",
 
+    "dev": "npm-run-all --parallel start:companion dev:js watch:css watch:js:lib dev:browsersync",
 
+    "dev:no-companion": "npm-run-all --parallel dev:js watch:css watch:js:lib dev:browsersync",
 
     "web:build": "cd website && node update.js && ./node_modules/.bin/hexo generate --silent && node build-examples.js",
 
     "web:build": "cd website && node update.js && ./node_modules/.bin/hexo generate --silent && node build-examples.js",
 
     "web:clean": "cd website && ./node_modules/.bin/hexo clean",
 
     "web:clean": "cd website && ./node_modules/.bin/hexo clean",
 
     "web:deploy": "npm-run-all web:install web:disc web:build && ./bin/web-deploy",
 
     "web:deploy": "npm-run-all web:install web:disc web:build && ./bin/web-deploy",
 
-    "web:generated-docs": "cd website && node node_modules/documentation/bin/documentation.js readme ../src/index.js --readme-file=src/docs/api.md --section 'Uppy Core & Plugins' -q --github -c doc-order.json",
 
     "web:disc": "node ./bin/disc.js",
 
     "web:disc": "node ./bin/disc.js",
 
     "web:install": "cd website && npm install",
 
     "web:install": "cd website && npm install",
 
     "web:bundle:update:watch": "onchange 'packages/uppy/dist/**/*.css' 'packages/uppy/dist/**/*.js' --initial --verbose -- node website/update.js",
 
     "web:bundle:update:watch": "onchange 'packages/uppy/dist/**/*.css' 'packages/uppy/dist/**/*.js' --initial --verbose -- node website/update.js",