Merge pull request #778 from transloadit/feature/drag-drop-input-name

dragdrop: Add `inputName` option like FileInput has, closes #729.

src/plugins/Dashboard/ActionBrowseTagline.js

@@ -11,8 +11,9 @@ class ActionBrowseTagline extends Component {
   }
 
   render () {
-    // empty value=""  on file input, so we can select same file
-    // after removing it from Uppy — otherwise OS thinks it’s selected
+    // empty value="" on file input, so that the input is cleared after a file is selected,
+    // because Uppy will be handling the upload and so we can select same file
+    // after removing — otherwise browser thinks it’s already selected
     return (
       <span>
         {this.props.acquirers.length === 0

src/plugins/Dashboard/Tabs.js

@@ -29,9 +29,9 @@ class Tabs extends Component {
       )
     }
 
-    // empty value=""  on file input, so we can select same file
-    // after removing it from Uppy — otherwise OS thinks it’s selected
-
+    // empty value="" on file input, so that the input is cleared after a file is selected,
+    // because Uppy will be handling the upload and so we can select same file
+    // after removing — otherwise browser thinks it’s already selected
     return <div class="uppy-DashboardTabs">
       <ul class="uppy-DashboardTabs-list" role="tablist">
         <li class="uppy-DashboardTab" role="presentation">

src/plugins/DragDrop/index.js

@@ -25,9 +25,11 @@ module.exports = class DragDrop extends Plugin {
     // Default options
     const defaultOpts = {
       target: null,
+      inputName: 'files[]',
+      allowMultipleFiles: true,
       width: '100%',
       height: '100%',
-      note: '',
+      note: null,
       locale: defaultLocale
     }
 
@@ -102,11 +104,15 @@ module.exports = class DragDrop extends Plugin {
   }
 
   render (state) {
-    const DragDropClass = `uppy uppy-DragDrop-container ${this.isDragDropSupported ? 'is-dragdrop-supported' : ''}`
+    const DragDropClass = `uppy-Root uppy-DragDrop-container ${this.isDragDropSupported ? 'is-dragdrop-supported' : ''}`
     const DragDropStyle = {
       width: this.opts.width,
       height: this.opts.height
     }
+
+    // empty value="" on file input, so that the input is cleared after a file is selected,
+    // because Uppy will be handling the upload and so we can select same file
+    // after removing — otherwise browser thinks it’s already selected
     return (
       <div class={DragDropClass} style={DragDropStyle}>
         <div class="uppy-DragDrop-inner">
@@ -116,12 +122,11 @@ module.exports = class DragDrop extends Plugin {
           <label class="uppy-DragDrop-label">
             <input class="uppy-DragDrop-input"
               type="file"
-              name="files[]"
-              multiple="true"
-              ref={(input) => {
-                this.input = input
-              }}
-              onchange={this.handleInputChange} />
+              name={this.opts.inputName}
+              multiple={this.opts.allowMultipleFiles}
+              ref={(input) => { this.input = input }}
+              onchange={this.handleInputChange}
+              value="" />
             {this.i18n('dropHereOr')} <span class="uppy-DragDrop-dragText">{this.i18n('browse')}</span>
           </label>
           <span class="uppy-DragDrop-note">{this.opts.note}</span>

src/plugins/FileInput.js

@@ -69,14 +69,18 @@ module.exports = class FileInput extends Plugin {
       zIndex: -1
     }
 
-    return <div class="uppy uppy-FileInput-container">
+    // empty value="" on file input, so that the input is cleared after a file is selected,
+    // because Uppy will be handling the upload and so we can select same file
+    // after removing — otherwise browser thinks it’s already selected
+    return <div class="uppy-Root 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 }} />
+        ref={(input) => { this.input = input }}
+        value="" />
       {this.opts.pretty &&
         <button class="uppy-FileInput-btn" type="button" onclick={this.handleClick}>
           {this.i18n('chooseFiles')}

website/src/docs/dragdrop.md

@@ -16,7 +16,8 @@ uppy.use(DragDrop, {
   target: null,
   width: '100%',
   height: '100%',
-  note: '',
+  allowMultipleFiles: true,
+  note: null,
   locale: {
     strings: {
       dropHereOr: 'Drop files here or',
@@ -26,6 +27,22 @@ uppy.use(DragDrop, {
 })
 ```
 
+### `target: null`
+
+DOM element, CSS selector, or plugin to place the drag and drop area into.
+
+### `width: '100%'`
+
+Drag and drop area width, set in inline CSS, so feel free to use percentage, pixels or other values that you like.
+
+### `height: '100%'`
+
+Drag and drop area height, set in inline CSS, so feel free to use percentage, pixels or other values that you like.
+
+### `allowMultipleFiles: true`
+
+Whether to allow user to select multiple files at once via the system file dialog.
+
 ### `note: null`
 
 Optionally specify a string of text that explains something about the upload for the user. This is a place to explain `restrictions` that are put in place. For example: `'Images and video only, 2–3 files, up to 1 MB'`.

website/src/docs/fileinput.md

@@ -13,13 +13,13 @@ permalink: docs/fileinput/
 
 ```js
 uppy.use(FileInput, {
-  target: '.UppyForm',
+  target: null,
   allowMultipleFiles: true,
   pretty: true,
   inputName: 'files[]',
   locale: {
     strings: {
-      chooseFiles: 'Select to upload'
+      chooseFiles: 'Choose files'
     }
   }
 })
@@ -43,4 +43,4 @@ The `name` attribute for the `<input type="file">` element.
 
 ### `locale: {}`
 
-Custom text to show on the button when `pretty` is true. There is only one string that can be configured: `strings.chooseFiles`.
+Custom text to show on the button when `pretty` is true.