Merge pull request #757 from transloadit/fix/dragdrop-label

dragdrop: Link <label> and <input>, fixes #749

CHANGELOG.md

@@ -114,6 +114,7 @@ What we need to do to release Uppy 1.0
 - [ ] providers: select files only after “select” is pressed, don’t add them right away when they are checked (keep a list of fileIds in state?); better UI + solves issue with autoProceed uploading in background, which is weird; re-read https://github.com/transloadit/uppy/pull/419#issuecomment-345210519 (@arturi, @goto-bus-stop)
 - [ ] tus: add `filename` and `filetype`, so that tus servers knows what headers to set  https://github.com/tus/tus-js-client/commit/ebc5189eac35956c9f975ead26de90c896dbe360
 - [ ] core: look into utilizing https://github.com/que-etc/resize-observer-polyfill for responsive components
+- [ ] dragdrop: link `<label>` and `<input>` (#747, @goto-bus-stop)
 
 ## 0.24.0
 

src/plugins/DragDrop/index.js

@@ -46,7 +46,6 @@ module.exports = class DragDrop extends Plugin {
 
     // Bind `this` to class methods
     this.handleDrop = this.handleDrop.bind(this)
-    this.handleBrowseClick = this.handleBrowseClick.bind(this)
     this.handleInputChange = this.handleInputChange.bind(this)
     this.checkDragDropSupport = this.checkDragDropSupport.bind(this)
     this.render = this.render.bind(this)
@@ -102,11 +101,6 @@ module.exports = class DragDrop extends Plugin {
     })
   }
 
-  handleBrowseClick (ev) {
-    ev.stopPropagation()
-    this.input.click()
-  }
-
   render (state) {
     const DragDropClass = `uppy uppy-DragDrop-container ${this.isDragDropSupported ? 'is-dragdrop-supported' : ''}`
     const DragDropStyle = {
@@ -119,15 +113,15 @@ module.exports = class DragDrop extends Plugin {
           <svg aria-hidden="true" class="UppyIcon uppy-DragDrop-arrow" 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"
-            type="file"
-            name="files[]"
-            multiple="true"
-            ref={(input) => {
-              this.input = input
-            }}
-            onchange={this.handleInputChange} />
-          <label class="uppy-DragDrop-label" onclick={this.handleBrowseClick}>
+          <label class="uppy-DragDrop-label">
+            <input class="uppy-DragDrop-input"
+              type="file"
+              name="files[]"
+              multiple="true"
+              ref={(input) => {
+                this.input = input
+              }}
+              onchange={this.handleInputChange} />
             {this.i18n('dropHereOr')} <span class="uppy-DragDrop-dragText">{this.i18n('browse')}</span>
           </label>
           <span class="uppy-DragDrop-note">{this.opts.note}</span>