Modal Upload/Next button, refactoring

src/plugins/DragDrop.js

@@ -36,10 +36,10 @@ export default class DragDrop extends Plugin {
   }
 
   render () {
-    return `<form class="UppyDragDrop-inner"
-        method="post"
-        action="${this.opts.endpoint}"
-        enctype="multipart/form-data">
+    return `
+    <form class="UppyDragDrop-inner"
+          method="post"
+          enctype="multipart/form-data">
       <input class="UppyDragDrop-input"
              id="UppyDragDrop-input"
              type="file"
@@ -49,10 +49,10 @@ 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>`
-      : ''}
-  </form>`
+      ${!this.core.opts.autoProceed
+        ? `<button class="UppyDragDrop-uploadBtn" type="submit">${this.core.i18n('upload')}</button>`
+        : ''}
+    </form>`
   }
 
 /**
@@ -138,12 +138,12 @@ export default class DragDrop extends Plugin {
       // otherwise just pass files to uploaders right away
       if (this.core.opts.autoProceed) {
         return resolve(result)
-      } else {
-        this.dropzone.addEventListener('submit', (e) => {
-          e.preventDefault()
-          return resolve(result)
-        })
       }
+
+      this.dropzone.addEventListener('submit', (e) => {
+        e.preventDefault()
+        return resolve(result)
+      })
     })
   }
 

src/plugins/Modal.js

@@ -20,6 +20,8 @@ export default class Modal extends Plugin {
       panelSelectorPrefix: 'UppyModalContent-panel'
     }
 
+    this.tabPanels = []
+
     this.isModalVisible = false
 
     // merge default options with the ones set by user
@@ -38,9 +40,9 @@ export default class Modal extends Plugin {
 
     switch (callerPlugin.type) {
       case 'progress':
-        return '.UppyModal-progressContainer'
+        return '.UppyModal-progressBarContainer'
       case 'presenter':
-        return '.UppyModal-presenterContainer'
+        return '.UppyModal-presenter'
       case 'selecter':
 
         // add tab panel, where plugin will render
@@ -96,12 +98,15 @@ export default class Modal extends Plugin {
            role="dialog">
         <div class="UppyModal-overlay js-UppyModal-close" tabindex="-1"></div>
         <div class="UppyModal-inner">
-          <button class="UppyModal-close js-UppyModal-close" title="Close uploader modal" data-modal-hide>×</button>
+          <button class="UppyModal-close js-UppyModal-close" title="Close Uppy modal">×</button>
 
           <ul class="UppyModalTabs" role="tablist"></ul>
           <div class="UppyModalContent">
-            <div class="UppyModal-progressContainer">progress here</div>
-            <div class="UppyModal-presenterContainer"></div>
+            <div class="UppyModal-presenter"></div>
+            <div class="UppyModal-progress">
+              <button class="UppyModal-next">Upload</button>
+              <div class="UppyModal-progressBarContainer"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -132,7 +137,6 @@ export default class Modal extends Plugin {
 
   initEvents () {
     this.tabs = Utils.qsa('.UppyModalTab-btn')
-    this.tabPanels = []
     this.tabs.forEach(tab => {
       const tabId = tab.getAttribute('data-open')
       const tabPanel = document.querySelector(`.${tabId}`)

src/plugins/ProgressBar.js

@@ -17,7 +17,8 @@ export default class ProgressBar extends Plugin {
   }
 
   setProgress (percentage) {
-    this.progressBarPercentageEl.innerHTML = percentage
+    this.progressBarContainerEl.classList.add('is-active')
+    this.progressBarPercentageEl.innerHTML = `${percentage}%`
     this.progressBarInnerEl.setAttribute('style', `width: ${percentage}%`)
   }
 
@@ -25,8 +26,8 @@ export default class ProgressBar extends Plugin {
     const caller = this
     this.target = this.getTarget(this.opts.target, caller)
 
-    const progressBarContainerEl = document.querySelector(this.target)
-    progressBarContainerEl.innerHTML = `<div class="UppyProgressBar">
+    this.progressBarContainerEl = document.querySelector(this.target)
+    this.progressBarContainerEl.innerHTML = `<div class="UppyProgressBar">
       <div class="UppyProgressBar-inner"></div>
       <div class="UppyProgressBar-percentage"></div>
     </div>`

src/scss/_modal.scss

@@ -126,11 +126,42 @@
 
 // Progress bar placeholder
 
-.UppyModal-progressContainer {
+.UppyModal-progress {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
+  height: 30px;
+}
+
+.UppyModal-progressBarContainer.is-active {
+  z-index: $zIndex-4;
+  position: relative;
+}
+
+.UppyModal-next {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: none;
+  background-color: $color-cornflower-blue;
+  -webkit-appearance: none;
+  border: 0;
+  z-index: $zIndex-3;
+  transition: background-color 0.5s;
+  cursor: pointer;
+  color: $color-white;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+
+  &:hover {
+    background-color: darken($color-cornflower-blue, 20%);
+  }
 }
 
 // .loader-block {

src/scss/_progressbar.scss

@@ -1,6 +1,7 @@
 .UppyProgressBar {
-  height: 20px;
+  height: 30px;
   margin: 0 auto;
+  background-color: lighten($color-pink, 30%);
 }
 
 .UppyProgressBar-inner {
@@ -12,12 +13,12 @@
 .UppyProgressBar-percentage {
   text-align: center;
   position: relative;
-  bottom: 20px;
+  bottom: 30px;
   font-size: 12px;
-  line-height: 20px;
+  line-height: 30px;
   color: $color-white;
 
-  &:after {
-    content: ' %';
-  }
+  // &:after {
+  //   content: ' %';
+  // }
 }