react-dropzone - npm Package Compare versions

Comparing version 3.5.3 to 3.6.0

CHANGELOG.md

@@ -0,4 +1,9 @@
+# 3.6.0
+
+- Added `minSize` and `maxSize` props for file validation. #202 by @lemuelbarango
+- Fixed OS X drag'n'drop issues. Fixes #74, #195. #225 by @MaffooBristol
+
 # 3.5.3
 
-- Fixed unknown props warning in React v15.2 #195. Closes #193 <@nuc>
+- Fixed unknown props warning in React v15.2 #195. Closes #193 @nuc
 - Updated to the latest lint-staged (2.0.0)
@@ -8,3 +13,3 @@
 
-- Fixed unknown props warning in React v15.2 #194. Closes #193 <@nuc>
+- Fixed unknown props warning in React v15.2 #194. Closes #193 @nuc
 - Updated to the latest lint-staged (1.0.2)
@@ -14,7 +19,7 @@
 
-* Fixed: `onDrop` is now called only if all files are passing the `accept` check. [#173](https://github.com/okonet/react-dropzone/pull/173) Closes #138, #145
+* Fixed: `onDrop` is now called only if all files are passing the `accept` check. #173. Closes #138, #145
 
 # 3.5.0
 
-* Optionally handle onDragStart event [#181](https://github.com/okonet/react-dropzone/pull/181)
+* Optionally handle onDragStart event #181
 * Added lint-staged and npmpub to improve DX
@@ -28,3 +33,3 @@
 
-* fix issue Cannot find module "React" (#159) <Jonathan Sanchez Pando>
+* fix issue Cannot find module "React" #159 <Jonathan Sanchez Pando>
 
@@ -34,4 +39,4 @@ # 3.3.3
 * More MIME type examples <Matija Marohnić>
-* Fix off-by-one in droppedFiles length (#156) <BJTerry>
-* Use webpack for build (#112) <Ville Lindholm>
+* Fix off-by-one in droppedFiles length #156 <BJTerry>
+* Use webpack for build #112 <Ville Lindholm>
 
@@ -38,0 +43,0 @@ # 3.3.2

dist/index.js

@@ -149,2 +149,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	      e.stopPropagation();
+	      e.dataTransfer.dropEffect = 'copy'; // eslint-disable-line no-param-reassign
 	      return false;
@@ -197,3 +198,3 @@ }
 	
-	      if (this.allFilesAccepted(files)) {
+	      if (this.allFilesAccepted(files) && this.allFilesMatchSize(files)) {
 	        if (this.props.onDrop) {
@@ -229,2 +230,11 @@ this.props.onDrop.call(this, files, e);
 	  }, {
+	    key: 'allFilesMatchSize',
+	    value: function allFilesMatchSize(files) {
+	      var _this3 = this;
+	
+	      return files.every(function (file) {
+	        return file.size <= _this3.props.maxSize && file.size >= _this3.props.minSize;
+	      });
+	    }
+	  }, {
 	    key: 'open',
@@ -238,3 +248,3 @@ value: function open() {
 	    value: function render() {
-	      var _this3 = this;
+	      var _this4 = this;
 	
@@ -306,3 +316,3 @@ var _props = this.props;
 	        ref: function ref(el) {
-	          return _this3.fileInputEl = el;
+	          return _this4.fileInputEl = el;
 	        }, // eslint-disable-line
@@ -317,3 +327,3 @@ onChange: this.onDrop
 	      // Remove custom properties before passing them to the wrapper div element
-	      var customProps = ['disablePreview', 'disableClick', 'onDropAccepted', 'onDropRejected'];
+	      var customProps = ['disablePreview', 'disableClick', 'onDropAccepted', 'onDropRejected', 'maxSize', 'minSize'];
 	      var divProps = _extends({}, props);
@@ -349,3 +359,5 @@ customProps.forEach(function (prop) {
 	  disableClick: false,
-	  multiple: true
+	  multiple: true,
+	  maxSize: Infinity,
+	  minSize: 0
 	};
@@ -378,3 +390,5 @@
 	  accept: _react2.default.PropTypes.string, // Allow specific types of files. See https://github.com/okonet/attr-accept for more information
-	  name: _react2.default.PropTypes.string // name attribute for the input tag
+	  name: _react2.default.PropTypes.string, // name attribute for the input tag
+	  maxSize: _react2.default.PropTypes.number,
+	  minSize: _react2.default.PropTypes.number
 	};
@@ -381,0 +395,0 @@

package.json

 {
   "name": "react-dropzone",
-  "version": "3.5.3",
+  "version": "3.6.0",
   "description": "Simple HTML5 drag-drop zone with React.js",
@@ -21,3 +21,6 @@ "main": "dist/index.js",
   "lint-staged": {
-    "*.js": ["eslint:fix", "git:add"]
+    "*.js": [
+      "eslint:fix",
+      "git:add"
+    ]
   },
@@ -71,3 +74,3 @@ "pre-commit": [
     "jsdom": "^9.2.1",
-    "lint-staged": "^2.0.0",
+    "lint-staged": "^2.0.1",
     "mocha": "^2.5.3",
@@ -82,2 +85,3 @@ "npm-check": "^5.2.1",
     "rimraf": "^2.5.2",
+    "semver": "^5.3.0",
     "sinon": "^1.17.4",
@@ -84,0 +88,0 @@ "webpack": "^1.13.1"

README.md

@@ -70,8 +70,7 @@ react-dropzone [![Build Status](https://travis-ci.org/okonet/react-dropzone.svg)](https://travis-ci.org/okonet/react-dropzone)
 
-- `disableClick` - Clicking the `<Dropzone>` brings up the browser file picker. To disable, set to `true`.
-- `multiple` - To accept only a single file, set this to `false`.
-- `accept` - Filters the file types that are valid. It should have a valid MIME type according to [input element](http://www.w3.org/TR/html-markup/input.file.html), for example:
-  * `application/pdf`
-  * `image/*`
-  * `audio/aiff,audio/midi`
+- `disableClick` `[Boolean | **false**]` — Clicking the `<Dropzone>` brings up the browser file picker.
+- `multiple` `[Boolean | **true**]` — Accept multiple files
+- `minSize` `[Number | **0**]` —  Only accept file(s) larger than  `minSize` bytes.
+- `maxSize` `[Number | **Infinity**]` — Only accept file(s) smaller than  `maxSize` bytes.
+- `accept` - Accept only specified mime types. Must be a valid MIME type according to [input element specification](http://www.w3.org/TR/html-markup/input.file.html), for example `application/pdf`, `image/*`, `audio/aiff,audio/midi`
 
@@ -78,0 +77,0 @@ To show a preview of the dropped file while it uploads, use the `file.preview` property. Use `<img src={file.preview} />` to display a preview of the image dropped.

src/index.js

@@ -61,2 +61,3 @@ /* eslint prefer-template: 0 */
     e.stopPropagation();
+    e.dataTransfer.dropEffect = 'copy'; // eslint-disable-line no-param-reassign
     return false;
@@ -107,3 +108,3 @@ }
 
-    if (this.allFilesAccepted(files)) {
+    if (this.allFilesAccepted(files) && this.allFilesMatchSize(files)) {
       if (this.props.onDrop) {
@@ -133,2 +134,6 @@ this.props.onDrop.call(this, files, e);
 
+  allFilesMatchSize(files) {
+    return files.every(file => (file.size <= this.props.maxSize && file.size >= this.props.minSize));
+  }
+
   open() {
@@ -219,3 +224,3 @@ this.fileInputEl.value = null;
     // Remove custom properties before passing them to the wrapper div element
-    const customProps = ['disablePreview', 'disableClick', 'onDropAccepted', 'onDropRejected'];
+    const customProps = ['disablePreview', 'disableClick', 'onDropAccepted', 'onDropRejected', 'maxSize', 'minSize'];
     const divProps = { ...props };
@@ -249,3 +254,5 @@ customProps.forEach(prop => delete divProps[prop]);
   disableClick: false,
-  multiple: true
+  multiple: true,
+  maxSize: Infinity,
+  minSize: 0
 };
@@ -278,5 +285,7 @@
   accept: React.PropTypes.string, // Allow specific types of files. See https://github.com/okonet/attr-accept for more information
-  name: React.PropTypes.string // name attribute for the input tag
+  name: React.PropTypes.string, // name attribute for the input tag
+  maxSize: React.PropTypes.number,
+  minSize: React.PropTypes.number
 };
 
 export default Dropzone;

src/test.js

@@ -7,3 +7,5 @@ /* eslint no-unused-expressions: 0 */
 import TestUtils from 'react-testutils-additions';
+import semver from 'semver';
 const Dropzone = require(process.env.NODE_ENV === 'production' ? '../dist/index' : './index');
+const itConditional = semver.satisfies(React.version, '>=15.2.1') ? it : it.skip;
 
@@ -195,2 +197,77 @@ describe('Dropzone', () => {
 
+    it('applies the maxSize prop to the dropped files', () => {
+      const images = [{
+        name: 'cats.gif',
+        size: 1234,
+        type: 'image/gif'
+      }, {
+        name: 'dogs.jpg',
+        size: 2345,
+        type: 'image/jpeg'
+      }];
+      const dropSpy = spy();
+      const dropzone = TestUtils.renderIntoDocument(
+        <Dropzone onDrop={dropSpy} maxSize={1111}>
+          <div className="dropzone-content">some content</div>
+        </Dropzone>
+      );
+      const content = TestUtils.findRenderedDOMComponentWithClass(dropzone, 'dropzone-content');
+
+      TestUtils.Simulate.drop(content, { dataTransfer: { files } });
+      expect(dropSpy.callCount).to.equal(1);
+      TestUtils.Simulate.drop(content, { dataTransfer: { files: images } });
+      expect(dropSpy.callCount).to.equal(1);
+      expect(dropSpy.firstCall.args[0]).to.have.length(1);
+    });
+
+    it('applies the minSize prop to the dropped files', () => {
+      const images = [{
+        name: 'cats.gif',
+        size: 1234,
+        type: 'image/gif'
+      }, {
+        name: 'dogs.jpg',
+        size: 2345,
+        type: 'image/jpeg'
+      }];
+      const dropSpy = spy();
+      const dropzone = TestUtils.renderIntoDocument(
+        <Dropzone onDrop={dropSpy} minSize={1112}>
+          <div className="dropzone-content">some content</div>
+        </Dropzone>
+      );
+      const content = TestUtils.findRenderedDOMComponentWithClass(dropzone, 'dropzone-content');
+
+      TestUtils.Simulate.drop(content, { dataTransfer: { files } });
+      expect(dropSpy.callCount).to.equal(0);
+      TestUtils.Simulate.drop(content, { dataTransfer: { files: images } });
+      expect(dropSpy.callCount).to.equal(1);
+      expect(dropSpy.firstCall.args[0]).to.have.length(2);
+    });
+
+    it('accepts all dropped files when no size prop is specified', () => {
+      const images = [{
+        name: 'cats.gif',
+        size: 1234,
+        type: 'image/gif'
+      }, {
+        name: 'dogs.jpg',
+        size: 2345,
+        type: 'image/jpeg'
+      }];
+      const dropSpy = spy();
+      const dropzone = TestUtils.renderIntoDocument(
+        <Dropzone onDrop={dropSpy}>
+          <div className="dropzone-content">some content</div>
+        </Dropzone>
+      );
+      const content = TestUtils.findRenderedDOMComponentWithClass(dropzone, 'dropzone-content');
+
+      TestUtils.Simulate.drop(content, { dataTransfer: { files } });
+      expect(dropSpy.callCount).to.equal(1);
+      TestUtils.Simulate.drop(content, { dataTransfer: { files: images } });
+      expect(dropSpy.callCount).to.equal(2);
+      expect(dropSpy.secondCall.args[0]).to.have.length(2);
+    });
+
     it('applies the name prop to the child input', () => {
@@ -206,3 +283,3 @@ const component = TestUtils.renderIntoDocument(
 
-    it.skip('does not apply the name prop if name is falsey', () => {
+    itConditional('does not apply the name prop if name is falsey', () => {
       const component = TestUtils.renderIntoDocument(
@@ -209,0 +286,0 @@ <Dropzone className="my-dropzone" name="" />

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

123236

increased by3.93%

Lines of code

920

increased by11.11%

Worsened metrics

Dev dependency count

29

increased by3.57%

Number of lines in readme file

147

decreased by-0.68%

Published versions last week

0

decreased by-100%

No dependency changes