Refactor FileInput to JSX and minor tweaks

src/plugins/FileInput.js

@@ -2,8 +2,6 @@ const Plugin = require('../core/Plugin')
 const { toArray } = require('../core/Utils')
 const Translator = require('../core/Translator')
 const { h } = require('preact')
-const hyperx = require('hyperx')
-const html = hyperx(h)
 
 module.exports = class FileInput extends Plugin {
   constructor (uppy, opts) {
@@ -14,16 +12,16 @@ module.exports = class FileInput extends Plugin {
 
     const defaultLocale = {
       strings: {
-        selectToUpload: 'Select to upload'
+        chooseFiles: 'Choose files'
       }
     }
 
     // Default options
     const defaultOptions = {
-      target: '.UppyForm',
+      target: null,
       getMetaFromForm: true,
-      replaceTargetContent: true,
-      multipleFiles: true,
+      replaceTargetContent: false,
+      allowMultipleFiles: true,
       pretty: true,
       locale: defaultLocale,
       inputName: 'files[]'
@@ -40,10 +38,12 @@ module.exports = class FileInput extends Plugin {
     this.i18n = this.translator.translate.bind(this.translator)
 
     this.render = this.render.bind(this)
+    this.handleInputChange = this.handleInputChange.bind(this)
+    this.handleClick = this.handleClick.bind(this)
   }
 
   handleInputChange (ev) {
-    this.uppy.log('All right, something selected through input...')
+    this.uppy.log('[FileInput] Something selected through input...')
 
     const files = toArray(ev.target.files)
 
@@ -57,26 +57,34 @@ module.exports = class FileInput extends Plugin {
     })
   }
 
-  render (state) {
-    const hiddenInputStyle = 'width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1;'
+  handleClick (ev) {
+    this.input.click()
+  }
 
-    const input = html`<input class="uppy-FileInput-input"
-           style="${this.opts.pretty ? hiddenInputStyle : ''}"
-           type="file"
-           name=${this.opts.inputName}
-           onchange=${this.handleInputChange.bind(this)}
-           multiple="${this.opts.multipleFiles ? 'true' : 'false'}"
-           value="">`
+  render (state) {
+    const hiddenInputStyle = {
+      width: '0.1px',
+      height: '0.1px',
+      opacity: 0,
+      overflow: 'hidden',
+      position: 'absolute',
+      zIndex: -1
+    }
 
-    return html`<form class="Uppy uppy-FileInput-form">
-      ${input}
-      ${this.opts.pretty
-        ? html`<button class="uppy-FileInput-btn" type="button" onclick=${() => input.click()}>
-          ${this.i18n('selectToUpload')}
-        </button>`
-       : null
-     }
-    </form>`
+    return <div class="Uppy uppy-FileInput-container">
+      <input class="uppy-FileInput-input"
+        style={this.opts.pretty && hiddenInputStyle}
+        type="file"
+        name={this.opts.inputName}
+        onchange={this.handleInputChange}
+        multiple={this.opts.allowMultipleFiles}
+        ref={(input) => { this.input = input }} />
+      {this.opts.pretty &&
+        <button class="uppy-FileInput-btn" type="button" onclick={this.handleClick}>
+          {this.i18n('chooseFiles')}
+        </button>
+      }
+    </div>
   }
 
   install () {

src/scss/_fileinput.scss

@@ -1,4 +1,4 @@
-.uppy-FileInput-form {
+.uppy-FileInput-container {
   margin-bottom: 15px;
 }
 
@@ -9,13 +9,13 @@
   font-size: 0.85em;
   // text-transform: uppercase;
   padding: 10px 15px;
-  color: $color-pink;
-  border: 1px solid $color-pink;
-  border-radius: 15px;
+  color: darken($color-cornflower-blue, 20%);
+  border: 1px solid darken($color-cornflower-blue, 20%);
+  border-radius: 8px;
   cursor: pointer;
 
   &:hover {
-    background-color: $color-pink;
+    background-color: darken($color-cornflower-blue, 20%);
     color: $color-white;
   }
 }