Merge branch 'master' into improvement/restrictions-accept-multiple

CHANGELOG.md

@@ -125,6 +125,7 @@ What we need to do to release Uppy 1.0
 - [x] dashboard: fix duplicate plugin IDs, see #702 (@goto-bus-stop)
 - [x] react: update propTypes (#776 / @goto-bus-stop)
 - [x] dashboard/statusbar: fix some unicode characters showing up as gibberish (#787 / @goto-bus-stop)
+- [ ] core: customizing metadata fields, see #809 and related
 
 ## 0.24.2
 

src/core/Core.js

@@ -398,15 +398,16 @@ class Uppy {
 
     const fileID = Utils.generateFileID(file)
 
+    const meta = file.meta || {}
+    meta.name = fileName
+    meta.type = fileType
+
     const newFile = {
       source: file.source || '',
       id: fileID,
       name: fileName,
       extension: fileExtension || '',
-      meta: Object.assign({}, this.getState().meta, {
-        name: fileName,
-        type: fileType
-      }),
+      meta: Object.assign({}, this.getState().meta, meta),
       type: fileType,
       data: file.data,
       progress: {

src/core/Core.test.js

@@ -850,6 +850,28 @@ describe('src/Core', () => {
         boo: 'moo'
       })
     })
+
+    it('should merge meta data when add file', () => {
+      const core = new Core({
+        meta: { foo2: 'bar2' }
+      })
+      core.addFile({
+        source: 'jest',
+        name: 'foo.jpg',
+        type: 'image/jpeg',
+        meta: {
+          resize: 5000
+        },
+        data: new File([sampleImage], { type: 'image/jpeg' })
+      })
+      const fileId = Object.keys(core.state.files)[0]
+      expect(core.state.files[fileId].meta).toEqual({
+        name: 'foo.jpg',
+        type: 'image/jpeg',
+        foo2: 'bar2',
+        resize: 5000
+      })
+    })
   })
 
   describe('progress', () => {

src/plugins/Dashboard/ActionBrowseTagline.js

@@ -11,9 +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
     }
 
@@ -111,12 +113,16 @@ module.exports = class DragDrop extends Plugin {
       position: 'absolute',
       zIndex: -1
     }
-    const DragDropClass = `uppy uppy-DragDrop-container ${this.isDragDropSupported ? 'uppy-DragDrop--is-dragdrop-supported' : ''}`
+    const DragDropClass = `uppy-Root uppy-DragDrop-container ${this.isDragDropSupported ? 'uppy-DragDrop--is-dragdrop-supported' : ''}`
     const DragDropStyle = {
       width: this.opts.width,
       height: this.opts.height
     }
     const restrictions = this.uppy.opts.restrictions
+
+    // 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">
@@ -127,13 +133,14 @@ module.exports = class DragDrop extends Plugin {
             <input style={hiddenInputStyle}
               class="uppy-DragDrop-input"
               type="file"
-              name="files[]"
+              name={this.opts.inputName}
               multiple={restrictions.maxNumberOfFiles !== 1}
               accept={restrictions.allowedFileTypes}
               ref={(input) => {
                 this.input = input
               }}
-              onchange={this.handleInputChange} />
+              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

@@ -72,7 +72,10 @@ module.exports = class FileInput extends Plugin {
 
     const restrictions = this.uppy.opts.restrictions
 
-    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"
@@ -81,6 +84,7 @@ module.exports = class FileInput extends Plugin {
         multiple={restrictions.maxNumberOfFiles !== 1}
         accept={restrictions.allowedFileTypes}
         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.