DragDrop: redesign, add note, width/height options, arrow icon

src/core/Core.js

@@ -137,7 +137,6 @@ class Uppy {
    * @param {patch} object
    */
   setState (patch) {
-    console.log('STATE')
     const prevState = Object.assign({}, this.state)
     const nextState = Object.assign({}, this.state, patch)
 

src/plugins/DragDrop/index.js

@@ -24,20 +24,22 @@ module.exports = class DragDrop extends Plugin {
 
     const defaultLocale = {
       strings: {
-        chooseFile: 'Choose a file',
-        orDragDrop: 'or drop it here',
-        upload: 'Upload',
-        selectedFiles: {
-          0: '%{smart_count} file selected',
-          1: '%{smart_count} files selected'
-        }
+        dropHereOr: 'Drop files here or',
+        browse: 'browse'
+        // selectedFiles: {
+        //   0: '%{smart_count} file selected',
+        //   1: '%{smart_count} files selected'
+        // }
       }
     }
 
     // Default options
     const defaultOpts = {
       target: null,
       getMetaFromForm: true,
+      width: '100%',
+      height: '100%',
+      note: '',
       locale: defaultLocale
     }
 
@@ -84,7 +86,7 @@ module.exports = class DragDrop extends Plugin {
   }
 
   handleDrop (files) {
-    this.core.log('All right, someone dropped something...')
+    this.core.log('[DragDrop] Files dropped')
 
     files.forEach((file) => {
       this.core.addFile({
@@ -97,7 +99,7 @@ module.exports = class DragDrop extends Plugin {
   }
 
   handleInputChange (ev) {
-    this.core.log('All right, something selected through input...')
+    this.core.log('[DragDrop] Files selected through input')
 
     const files = toArray(ev.target.files)
 
@@ -113,36 +115,41 @@ module.exports = class DragDrop extends Plugin {
 
   render (state) {
     const onSelect = (ev) => {
-      const input = this.target.querySelector('.UppyDragDrop-input')
+      const input = this.target.querySelector('.uppy-DragDrop-input')
       input.click()
     }
 
-    const selectedFilesCount = Object.keys(state.files).length
+    // const selectedFilesCount = Object.keys(state.files).length
 
     return html`
-      <div class="Uppy UppyTheme--default UppyDragDrop-container ${this.isDragDropSupported ? 'is-dragdrop-supported' : ''}">
-        <form class="UppyDragDrop-inner"
-              onsubmit=${(ev) => ev.preventDefault()}>
-          <input class="UppyDragDrop-input UppyDragDrop-focus"
+      <div class="Uppy UppyTheme--default uppy-DragDrop-container ${this.isDragDropSupported ? 'is-dragdrop-supported' : ''}"
+           style="width: ${this.opts.width}; height: ${this.opts.height};">
+        <form class="uppy-DragDrop-inner" onsubmit=${(ev) => ev.preventDefault()}>
+          <svg class="UppyIcon uppy-DragDrop-arrow" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+            <path d="M11 10V0H5v10H2l6 6 6-6h-3zm0 0" fill-rule="evenodd"/>
+          </svg>
+          <input class="uppy-DragDrop-input uppy-DragDrop-focus"
                  type="file"
                  name="files[]"
                  multiple="true"
                  value=""
                  onchange=${this.handleInputChange.bind(this)} />
-          <label class="UppyDragDrop-label" onclick=${onSelect}>
-            <strong>${this.i18n('chooseFile')}</strong>
-            <span class="UppyDragDrop-dragText">${this.i18n('orDragDrop')}</span>
+          <label class="uppy-DragDrop-label" onclick=${onSelect}>
+            ${this.i18n('dropHereOr')}
+            <span class="uppy-DragDrop-dragText">${this.i18n('browse')}</span>
           </label>
-          ${selectedFilesCount > 0
-            ? html`<div class="UppyDragDrop-selectedCount">
-                ${this.i18n('selectedFiles', {'smart_count': selectedFilesCount})}
-              </div>`
-            : ''}
+          <span class="uppy-DragDrop-note">${this.opts.note}</span>
         </form>
       </div>
     `
   }
 
+  // ${selectedFilesCount > 0
+  // ? html`<div class="uppy-DragDrop-selectedCount">
+  //     ${this.i18n('selectedFiles', {'smart_count': selectedFilesCount})}
+  //   </div>`
+  // : ''}
+
   install () {
     const target = this.opts.target
     const plugin = this
@@ -151,10 +158,14 @@ module.exports = class DragDrop extends Plugin {
     }
   }
 
+  uninstall () {
+    this.unmount()
+  }
+
   mount (...args) {
     super.mount(...args)
 
-    const dndContainer = this.target.querySelector('.UppyDragDrop-container')
+    const dndContainer = this.target.querySelector('.uppy-DragDrop-container')
     this.removeDragDropListener = dragDrop(dndContainer, (files) => {
       this.handleDrop(files)
       this.core.log(files)
@@ -166,8 +177,4 @@ module.exports = class DragDrop extends Plugin {
 
     super.unmount(...args)
   }
-
-  uninstall () {
-    this.unmount()
-  }
 }

src/scss/_dragdrop.scss

@@ -1,76 +1,76 @@
-// @import '_variables.scss';
-// @import '_utils.scss';
-// @import '_animation.scss';
-// @import '_common.scss';
+// .Uppy {
 
-.UppyDragDrop-container {
-  min-height: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 10px;
-}
-
-.UppyDragDrop-inner {
-  margin: 0;
-}
-
-  .UppyDragDrop-container.is-dragdrop-supported {
-    border: 2px dashed;
-    border-color: lighten($color-gray, 20%);
+  .uppy-DragDrop-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 7px;
+    background-color: $color-white;
   }
-
-  .UppyDragDrop-container.is-dragdrop-supported .UppyDragDrop-dragText {
-    display: inline;
+
+  .uppy-DragDrop-inner {
+    margin: 0;
+    text-align: center;
+    padding: 80px 0;
   }
-
-  .UppyDragDrop-container.drag {
-    border-color: $color-gray;
-    // background-color: #dbf5f3;
+
+  .uppy-DragDrop-arrow {
+    width: 60px;
+    height: 60px;
+    fill: lighten($color-gray, 30%);
+    margin-bottom: 20px;
   }
+
+    .uppy-DragDrop-container.is-dragdrop-supported {
+      border: 2px dashed;
+      border-color: lighten($color-gray, 10%);
+    }
+
+    // .uppy-DragDrop-container.is-dragdrop-supported .uppy-DragDrop-dragText {
+    //   display: inline;
+    // }
+
+    .uppy-DragDrop-container.drag {
+      border-color: $color-gray;
+      background-color: darken($color-white, 10%);
+    }
 
-/* http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ */
-.UppyDragDrop-input {
-  width: 0.1px;
-	height: 0.1px;
-	opacity: 0;
-	overflow: hidden;
-	position: absolute;
-	z-index: -1;
-}
-
-.UppyDragDrop-label {
-  display: block;
-  cursor: pointer;
-  font-size: 1.2em;
-}
-
-.UppyDragDrop-selectedCount {
-  text-align: center;
-  font-size: 0.75em;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  margin-top: 10px;
-}
+    .uppy-DragDrop-container.drag .uppy-DragDrop-arrow {
+      fill: $color-gray;
+    }
+
+  /* http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ */
+  .uppy-DragDrop-input {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+
+  .uppy-DragDrop-label {
+    display: block;
+    cursor: pointer;
+    font-size: 1.15em;
+    margin-bottom: 10px;
+  }
 
-.UppyDragDrop-dragText {
-  display: none;
-}
+  .uppy-DragDrop-note {
+    font-size: 1em;
+    color: lighten($color-gray, 10%);
+  }
+
+  // .uppy-DragDrop-selectedCount {
+  //   text-align: center;
+  //   font-size: 0.75em;
+  //   text-transform: uppercase;
+  //   letter-spacing: 1px;
+  //   margin-top: 10px;
+  // }
+
+  .uppy-DragDrop-dragText {
+    color: $color-cornflower-blue;
+  }
 
-// .UppyDragDrop-uploadBtn {
-//   display: block;
-//   margin: auto;
-//   padding: 5px 15px;
-//   font-size: 12px;
-//   text-transform: uppercase;
-//   letter-spacing: 1px;
-//   border: 0;
-//   border: 1px solid $color-gray;
-//   background: none;
-//   cursor: pointer;
-//   margin-top: 15px;
-//
-//   &:hover {
-//     background: $color-gray;
-//   }
-// }
+// }

test/acceptance/dragdrop.spec.js

@@ -26,11 +26,11 @@ module.exports = function (driver, platform, host) {
     } else {
       console.log('selecting a real file')
       // Make file input “visible”
-      driver.executeScript('document.querySelector(".UppyDragDrop-One .UppyDragDrop-input").style.opacity = 1')
+      driver.executeScript('document.querySelector(".UppyDragDrop-One .uppy-DragDrop-input").style.opacity = 1')
 
       // Find input by css selector & pass absolute image path to it
       driver
-        .findElement({css: '.UppyDragDrop-One .UppyDragDrop-input'})
+        .findElement({css: '.UppyDragDrop-One .uppy-DragDrop-input'})
         .sendKeys(path.join(__dirname, 'image.jpg'))
     }
 

test/acceptance/i18n.spec.js

@@ -2,7 +2,7 @@ var test = require('tape')
 var tools = require('./tools')
 
 module.exports = function (driver, platform, host) {
-  var testName = 'i18n: load with Russian language pack'
+  var testName = 'i18n: load DragDrop with Russian localization strings'
 
   test(tools.prettyTestName(testName, platform), function (t) {
     t.plan(1)
@@ -13,7 +13,7 @@ module.exports = function (driver, platform, host) {
     tools.setSauceTestName(driver, testName)
 
     function findLabelTextElement () {
-      return driver.findElements({css: '.UppyDragDrop-label'}).then(function (result) {
+      return driver.findElements({css: '.uppy-DragDrop-label'}).then(function (result) {
         return result[0]
       })
     }
@@ -24,7 +24,7 @@ module.exports = function (driver, platform, host) {
           // why trim? Microsoft Edge:
           // expected: 'Выберите файл или перенесите его сюда'
           // actual:   'Выберите файл или перенесите его сюда '
-          var expectedValue = 'Выберите файл или перенесите его сюда'
+          var expectedValue = 'Перенесите файлы сюда или выберите'
           console.log(value, '/', expectedValue)
           tools.testEqual(driver, t, value.trim() === expectedValue)
           driver.quit()

website/src/examples/i18n/app.html

@@ -11,8 +11,8 @@
     target: '.UppyDragDrop',
     locale: {
       strings: {
-        chooseFile: 'Выберите файл',
-        orDragDrop: 'или перенесите его сюда'
+        dropHereOr: 'Перенесите файлы сюда или',
+        browse: 'выберите'
       }
     }
   });