Add Unsplash to website dashboard example (#3431)

website/src/examples/dashboard/app.es6

@@ -6,6 +6,7 @@ const Instagram = require('@uppy/instagram')
 const Facebook = require('@uppy/facebook')
 const OneDrive = require('@uppy/onedrive')
 const Zoom = require('@uppy/zoom')
+const Unsplash = require('@uppy/unsplash')
 // const Box = require('@uppy/box')
 const ImageEditor = require('@uppy/image-editor')
 const Url = require('@uppy/url')
@@ -139,6 +140,13 @@ function uppySetOptions () {
   if (!opts.OneDrive && oneDriveInstance) {
     window.uppy.removePlugin(oneDriveInstance)
   }
+  const unsplashInstance = window.uppy.getPlugin('Unsplash')
+  if (opts.Unsplash && !unsplashInstance) {
+    window.uppy.use(Unsplash, { target: Dashboard, companionUrl: COMPANION })
+  }
+  if (!opts.Unsplash && unsplashInstance) {
+    window.uppy.removePlugin(unsplashInstance)
+  }
 
   const zoomInstance = window.uppy.getPlugin('Zoom')
   if (opts.Zoom && !zoomInstance) {

website/src/examples/dashboard/app.html

@@ -17,6 +17,7 @@
     <li><label for="opts-ScreenCapture"><input type="checkbox" id="opts-ScreenCapture" checked/> Screen Capture</label></li>
     <li><label for="opts-GoogleDrive"><input type="checkbox" id="opts-GoogleDrive" checked/> Google Drive</label></li>
     <li><label for="opts-Dropbox"><input type="checkbox" id="opts-Dropbox" checked/> Dropbox</label></li>
+    <li><label for="opts-Unsplash"><input type="checkbox" id="opts-Unsplash" checked/> Unsplash</label></li>
     <!-- <li><label for="opts-Box"><input type="checkbox" id="opts-Box" checked/> Box</label></li> -->
     <li><label for="opts-Instagram"><input type="checkbox" id="opts-Instagram" checked/> Instagram</label></li>
     <li><label for="opts-Facebook"><input type="checkbox" id="opts-Facebook" checked/> Facebook</label></li>
@@ -49,6 +50,7 @@
     ScreenCapture: document.querySelector('#opts-ScreenCapture'),
     GoogleDrive: document.querySelector('#opts-GoogleDrive'),
     Dropbox: document.querySelector('#opts-Dropbox'),
+    Unsplash: document.querySelector('#opts-Unsplash'),
     // Box: document.querySelector('#opts-Box'),
     Instagram: document.querySelector('#opts-Instagram'),
     Facebook: document.querySelector('#opts-Facebook'),
@@ -71,6 +73,7 @@
     GoogleDrive: true,
     Instagram: true,
     Dropbox: true,
+    Unsplash: true,
     // Box: true,
     OneDrive: true,
     Facebook: false,

website/src/examples/dashboard/index.ejs

@@ -26,6 +26,7 @@ const Uppy = require('@uppy/core')
 const Dashboard = require('@uppy/dashboard')
 const GoogleDrive = require('@uppy/google-drive')
 const Dropbox = require('@uppy/dropbox')
+const Unsplash = require('@uppy/unsplash')
 const Box = require('@uppy/box')
 const Instagram = require('@uppy/instagram')
 const Facebook = require('@uppy/facebook')
@@ -68,6 +69,7 @@ const uppy = new Uppy({
 .use(Instagram, { target: Dashboard, companionUrl: 'https://companion.uppy.io' })
 .use(Facebook, { target: Dashboard, companionUrl: 'https://companion.uppy.io' })
 .use(OneDrive, { target: Dashboard, companionUrl: 'https://companion.uppy.io' })
+.use(Unsplash, { target: Dashboard, companionUrl: 'https://companion.uppy.io' })
 .use(Webcam, { target: Dashboard })
 .use(Audio, { target: Dashboard })
 .use(ScreenCapture, { target: Dashboard })