Prechádzať zdrojové kódy

add restrictions to website Dashboard demo

Artur Paikin 7 rokov pred
rodič
commit
7927d67c06

+ 0 - 1
src/core/Core.js

@@ -196,7 +196,6 @@ class Uppy {
     const {maxFileSize, maxNumberOfFiles, minNumberOfFiles, allowedFileTypes} = this.opts.restrictions
 
     if (checkMinNumberOfFiles && minNumberOfFiles) {
-      console.log(Object.keys(this.state.files).length)
       if (Object.keys(this.state.files).length < minNumberOfFiles) {
         this.emit('informer', `${this.i18n('youHaveToAtLeastSelectX', {smart_count: minNumberOfFiles})}`, 'error', 5000)
         return false

+ 3 - 1
src/plugins/Dashboard/index.js

@@ -164,9 +164,11 @@ module.exports = class DashboardUI extends Plugin {
     // save scroll position
     this.savedDocumentScrollPosition = window.scrollY
 
-    // add class to body that sets position fixed
+    // add class to body that sets position fixed, move everything back
+    // to scroll position
     document.body.classList.add('is-UppyDashboard-open')
     document.body.style.top = `-${this.savedDocumentScrollPosition}px`
+
     // focus on modal inner block
     this.target.querySelector('.UppyDashboard-inner').focus()
 

+ 16 - 4
website/src/examples/dashboard/app.es6

@@ -20,7 +20,19 @@ function uppyInit () {
     dashboardElParent.removeChild(dashboardEl)
   }
 
-  const uppy = Uppy({debug: true, autoProceed: opts.autoProceed})
+  const restrictions = {
+    maxFileSize: 1000000,
+    maxNumberOfFiles: 3,
+    minNumberOfFiles: 2,
+    allowedFileTypes: ['image/*', 'video/*']
+  }
+
+  const uppy = Uppy({
+    debug: true,
+    autoProceed: opts.autoProceed,
+    restrictions: opts.restrictions ? restrictions : ''
+  })
+
   uppy.use(Dashboard, {
     trigger: '.UppyModalOpenerBtn',
     inline: opts.DashboardInline,
@@ -44,7 +56,6 @@ function uppyInit () {
   }
 
   uppy.use(Tus10, {endpoint: TUS_ENDPOINT, resume: true})
-  // uppy.use(Informer, {target: Dashboard})
   uppy.use(MetaData, {
     fields: [
       { id: 'resizeTo', name: 'Resize to', value: 1200, placeholder: 'specify future image size' },
@@ -53,8 +64,9 @@ function uppyInit () {
   })
   uppy.run()
 
-  uppy.on('core:success', (fileCount) => {
-    console.log('Yo, uploaded: ' + fileCount)
+  uppy.on('core:success', (fileList) => {
+    console.log('Yo, uploaded: ')
+    console.log(fileList)
   })
 }
 

+ 5 - 6
website/src/examples/dashboard/app.html

@@ -4,6 +4,7 @@
 <div class="DashboardOptions">
   <input type="checkbox" id="opts-DashboardInline" checked/><label for="opts-DashboardInline">Display inline</label>
   <input type="checkbox" id="opts-autoProceed" checked/><label for="opts-autoProceed">Autoproceed</label>
+  <input type="checkbox" id="opts-restrictions" checked/><label for="opts-restrictions">Restrictions</label>
   <input type="checkbox" id="opts-Webcam" checked/><label for="opts-Webcam">Webcam</label>
   <input type="checkbox" id="opts-GoogleDrive" checked/><label for="opts-GoogleDrive">Google Drive</label>
   <input type="checkbox" id="opts-Dropbox" checked/><label for="opts-Dropbox">Dropbox</label>
@@ -26,7 +27,8 @@
     GoogleDrive: document.querySelector('#opts-GoogleDrive'),
     Dropbox: document.querySelector('#opts-Dropbox'),
     Instagram: document.querySelector('#opts-Instagram'),
-    autoProceed: document.querySelector('#opts-autoProceed')
+    autoProceed: document.querySelector('#opts-autoProceed'),
+    restrictions: document.querySelector('#opts-restrictions')
   }
 
   var defaultOpts = {
@@ -35,7 +37,8 @@
     GoogleDrive: true,
     Instagram: true,
     Dropbox: false,
-    autoProceed: false
+    autoProceed: false,
+    restrictions: false
   }
 
   // try to get options from localStorage, if its empty, set to defaultOpts
@@ -69,8 +72,4 @@
   })
 
   toggleModalBtn()
-
-  // window.addEventListener('load', function () {
-  //
-  // }, false)
 </script>