Hide upload/next in plugins if Modal is the target, styles

src/plugins/DragDrop.js

@@ -36,6 +36,8 @@ export default class DragDrop extends Plugin {
   }
 
   render () {
+    // Another way not to render next/upload button — if Modal is used as a target
+    const target = this.opts.target.name
     return `
     <form class="UppyDragDrop-inner"
           method="post"
@@ -49,8 +51,8 @@ export default class DragDrop extends Plugin {
         <strong>${this.core.i18n('chooseFile')}</strong>
         <span class="UppyDragDrop-dragText">${this.core.i18n('orDragDrop')}</span>.
       </label>
-      ${!this.core.opts.autoProceed
-        ? `<button class="UppyDragDrop-uploadBtn" type="submit">${this.core.i18n('upload')}</button>`
+      ${!this.core.opts.autoProceed && target !== 'Modal'
+        ? `<button class="UppyDragDrop-uploadBtn UppyNextBtn" type="submit">${this.core.i18n('upload')}</button>`
         : ''}
     </form>`
   }
@@ -140,6 +142,10 @@ export default class DragDrop extends Plugin {
         return resolve(result)
       }
 
+      this.core.emitter.on('next', () => {
+        return resolve(result)
+      })
+
       this.dropzone.addEventListener('submit', (e) => {
         e.preventDefault()
         return resolve(result)

src/plugins/Modal.js

@@ -133,6 +133,9 @@ export default class Modal extends Plugin {
   showTabPanel (id) {
     const tabPanel = document.querySelector(`.${id}`)
     tabPanel.style.display = 'block'
+
+    // Remove `next` buttons provided by plugins, since Modal has it’s own
+    // document.querySelector('.UppyNextBtn').remove()
   }
 
   initEvents () {
@@ -179,6 +182,11 @@ export default class Modal extends Plugin {
     hideModalTrigger.forEach(trigger => trigger.addEventListener('click', this.hideModal))
     showModalTrigger.addEventListener('click', this.showModal)
 
+    // When `next` (upload) button is clicked, emit `next` event,
+    // so that plugins can proceed to the next stage
+    const nextButton = document.querySelector('.UppyModal-next')
+    nextButton.addEventListener('click', () => this.core.emitter.emit('next'))
+
     this.initEvents()
   }
 }

src/plugins/Tus10.js

@@ -57,7 +57,7 @@ export default class Tus10 extends Plugin {
       }
     })
     // Start the upload
-    upload.start()
+    return upload.start()
   }
 
 /**

src/scss/_modal.scss

@@ -122,6 +122,7 @@
 
 .UppyModalContent-panel {
   display: none;
+  height: 88%;
 }
 
 // Progress bar placeholder
@@ -131,12 +132,16 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 30px;
+  height: 12%;
 }
 
 .UppyModal-progressBarContainer.is-active {
   z-index: $zIndex-4;
-  position: relative;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 .UppyModal-next {
@@ -158,6 +163,7 @@
   line-height: 1;
   padding: 0;
   margin: 0;
+  outline: none;
 
   &:hover {
     background-color: darken($color-cornflower-blue, 20%);

src/scss/_present.scss

@@ -0,0 +1,4 @@
+.UppyPresenter {
+  font-size: 25px;
+  text-align: center;
+}

src/scss/_progressbar.scss

@@ -1,5 +1,5 @@
 .UppyProgressBar {
-  height: 30px;
+  height: 100%;
   margin: 0 auto;
   background-color: lighten($color-pink, 30%);
 }
@@ -12,10 +12,13 @@
 
 .UppyProgressBar-percentage {
   text-align: center;
-  position: relative;
-  bottom: 30px;
-  font-size: 12px;
-  line-height: 30px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  // bottom: 30px;
+  // font-size: 12px;
+  // line-height: 30px;
   color: $color-white;
 
   // &:after {

src/scss/uppy.scss

@@ -8,3 +8,4 @@
 @import '_progressbar.scss';
 @import '_spinner.scss';
 @import '_modal.scss';
+@import '_present.scss';