react-dropzone - npm Package Compare versions

Comparing version 3.1.0 to 3.2.0

index.js

@@ -1,4 +0,8 @@
-var React = require('react');
-var accept = require('attr-accept');
+import React from 'react';
+import accept from 'attr-accept';
 
+const supportMultiple = document && docuemnt.createElement ?
+  'multiple' in document.createElement('input') :
+  true;
+
 class Dropzone extends React.Component {
@@ -34,7 +38,6 @@ constructor(props, context) {
     // But Chrome implements some drag store, which is accesible via dataTransfer.items
-    var dataTransferItems = e.dataTransfer && e.dataTransfer.items ? e.dataTransfer.items : [];
+    const dataTransferItems = e.dataTransfer && e.dataTransfer.items ? e.dataTransfer.items : [];
 
     // Now we need to convert the DataTransferList to Array
-    var itemsArray = Array.prototype.slice.call(dataTransferItems);
-    var allFilesAccepted = this.allFilesAccepted(itemsArray);
+    const allFilesAccepted = this.allFilesAccepted(Array.prototype.slice.call(dataTransferItems));
 
@@ -47,3 +50,3 @@ this.setState({
     if (this.props.onDragEnter) {
-      this.props.onDragEnter(e);
+      this.props.onDragEnter.call(this, e);
     }
@@ -70,3 +73,3 @@ }
     if (this.props.onDragLeave) {
-      this.props.onDragLeave(e);
+      this.props.onDragLeave.call(this, e);
     }
@@ -86,9 +89,12 @@ }
 
-    var droppedFiles = e.dataTransfer ? e.dataTransfer.files : e.target.files;
-    var max = this.props.multiple ? droppedFiles.length : 1;
-    var files = [];
+    const droppedFiles = e.dataTransfer ? e.dataTransfer.files : e.target.files;
+    const max = this.props.multiple ? droppedFiles.length : 1;
+    const files = [];
 
-    for (var i = 0; i < max; i++) {
-      var file = droppedFiles[i];
-      file.preview = window.URL.createObjectURL(file);
+    for (let i = 0; i < max; i++) {
+      let file = droppedFiles[i];
+      // We might want to disable the preview creation to support big files
+      if (!this.disablePreview) {
+        file.preview = window.URL.createObjectURL(file);
+      }
       files.push(file);
@@ -98,3 +104,3 @@ }
     if (this.props.onDrop) {
-      this.props.onDrop(files, e);
+      this.props.onDrop.call(this, files, e);
     }
@@ -104,7 +110,7 @@
       if (this.props.onDropAccepted) {
-        this.props.onDropAccepted(files, e);
+        this.props.onDropAccepted.call(this, files, e);
       }
     } else {
       if (this.props.onDropRejected) {
-        this.props.onDropRejected(files, e);
+        this.props.onDropRejected.call(this, files, e);
       }
@@ -121,3 +127,3 @@ }
   open() {
-    var fileInput = this.refs.fileInput;
+    const fileInput = this.refs.fileInput;
     fileInput.value = null;
@@ -128,13 +134,12 @@ fileInput.click();
   render() {
-    var className, style, activeStyle, rejectStyle;
+    let className, style, activeStyle, rejectStyle;
 
-    if (this.props.className) {
-      className = this.props.className;
-      if (this.state.isDragActive && this.props.activeClassName) {
-        className += ' ' + this.props.activeClassName;
-      }
-      if (this.state.isDragReject && this.props.rejectClassName) {
-        className += ' ' + this.props.rejectClassName;
-      }
+    className = this.props.className || '';
+
+    if (this.state.isDragActive && this.props.activeClassName) {
+      className += ' ' + this.props.activeClassName;
     }
+    if (this.state.isDragReject && this.props.rejectClassName) {
+      className += ' ' + this.props.rejectClassName;
+    }
 
@@ -170,3 +175,3 @@ if (this.props.style || this.props.activeStyle || this.props.rejectStyle) {
 
-    var appliedStyle;
+    let appliedStyle;
     if (activeStyle && this.state.isDragActive) {
@@ -178,3 +183,3 @@ appliedStyle = {
     }
-		else if (rejectStyle && this.state.isDragReject) {
+  else if (rejectStyle && this.state.isDragReject) {
       appliedStyle = {
@@ -184,3 +189,3 @@ ...style,
       };
-		} else {
+  } else {
       appliedStyle = {
@@ -191,7 +196,13 @@ ...style
 
-    let inputAttr = {};
-    if (this.props.name) {
-      inputAttr.name = this.props.name;
-    }
+    const inputAttributes = {
+      type: 'file',
+      style: { display: 'none'},
+      ref: 'fileInput',
+      accept: this.props.accept,
+      onChange: this.onDrop
+    };
 
+    supportMultiple && (inputAttributes.multiple = this.props.multiple);
+    this.props.name && (inputAttributes.name = this.props.name);
+
     return (
@@ -208,11 +219,3 @@ <div
         {this.props.children}
-        <input
-          type='file'
-          ref='fileInput'
-          style={{ display: 'none' }}
-          multiple={this.props.multiple}
-          accept={this.props.accept}
-          onChange={this.onDrop}
-          {...inputAttr}
-        />
+        <input {...inputAttributes} />
       </div>
@@ -224,2 +227,3 @@ );
 Dropzone.defaultProps = {
+  disablePreview: false,
   disableClick: false,
@@ -243,2 +247,3 @@ multiple: true
 
+  disablePreview: React.PropTypes.bool,
   disableClick: React.PropTypes.bool,
@@ -250,2 +255,2 @@ multiple: React.PropTypes.bool,
 
-module.exports = Dropzone;
+export default Dropzone;

lib/index.js

 'use strict';
 
+exports.__esModule = true;
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
@@ -9,5 +13,12 @@
 
-var React = require('react');
-var accept = require('attr-accept');
+var _react = require('react');
 
+var _react2 = _interopRequireDefault(_react);
+
+var _attrAccept = require('attr-accept');
+
+var _attrAccept2 = _interopRequireDefault(_attrAccept);
+
+var supportMultiple = document && docuemnt.createElement ? 'multiple' in document.createElement('input') : true;
+
 var Dropzone = (function (_React$Component) {
@@ -39,3 +50,3 @@ _inherits(Dropzone, _React$Component);
     return files.every(function (file) {
-      return accept(file, _this.props.accept);
+      return _attrAccept2['default'](file, _this.props.accept);
     });
@@ -55,4 +66,3 @@ };
     // Now we need to convert the DataTransferList to Array
-    var itemsArray = Array.prototype.slice.call(dataTransferItems);
-    var allFilesAccepted = this.allFilesAccepted(itemsArray);
+    var allFilesAccepted = this.allFilesAccepted(Array.prototype.slice.call(dataTransferItems));
 
@@ -65,3 +75,3 @@ this.setState({
     if (this.props.onDragEnter) {
-      this.props.onDragEnter(e);
+      this.props.onDragEnter.call(this, e);
     }
@@ -88,3 +98,3 @@ };
     if (this.props.onDragLeave) {
-      this.props.onDragLeave(e);
+      this.props.onDragLeave.call(this, e);
     }
@@ -110,3 +120,6 @@ };
       var file = droppedFiles[i];
-      file.preview = window.URL.createObjectURL(file);
+      // We might want to disable the preview creation to support big files
+      if (!this.disablePreview) {
+        file.preview = window.URL.createObjectURL(file);
+      }
       files.push(file);
@@ -116,3 +129,3 @@ }
     if (this.props.onDrop) {
-      this.props.onDrop(files, e);
+      this.props.onDrop.call(this, files, e);
     }
@@ -122,7 +135,7 @@
       if (this.props.onDropAccepted) {
-        this.props.onDropAccepted(files, e);
+        this.props.onDropAccepted.call(this, files, e);
       }
     } else {
       if (this.props.onDropRejected) {
-        this.props.onDropRejected(files, e);
+        this.props.onDropRejected.call(this, files, e);
       }
@@ -145,13 +158,15 @@ }
   Dropzone.prototype.render = function render() {
-    var className, style, activeStyle, rejectStyle;
+    var className = undefined,
+        style = undefined,
+        activeStyle = undefined,
+        rejectStyle = undefined;
 
-    if (this.props.className) {
-      className = this.props.className;
-      if (this.state.isDragActive && this.props.activeClassName) {
-        className += ' ' + this.props.activeClassName;
-      }
-      if (this.state.isDragReject && this.props.rejectClassName) {
-        className += ' ' + this.props.rejectClassName;
-      }
+    className = this.props.className || '';
+
+    if (this.state.isDragActive && this.props.activeClassName) {
+      className += ' ' + this.props.activeClassName;
     }
+    if (this.state.isDragReject && this.props.rejectClassName) {
+      className += ' ' + this.props.rejectClassName;
+    }
 
@@ -187,3 +202,3 @@ if (this.props.style || this.props.activeStyle || this.props.rejectStyle) {
 
-    var appliedStyle;
+    var appliedStyle = undefined;
     if (activeStyle && this.state.isDragActive) {
@@ -197,8 +212,14 @@ appliedStyle = _extends({}, style, activeStyle);
 
-    var inputAttr = {};
-    if (this.props.name) {
-      inputAttr.name = this.props.name;
-    }
+    var inputAttributes = {
+      type: 'file',
+      style: { display: 'none' },
+      ref: 'fileInput',
+      accept: this.props.accept,
+      onChange: this.onDrop
+    };
 
-    return React.createElement(
+    supportMultiple && (inputAttributes.multiple = this.props.multiple);
+    this.props.name && (inputAttributes.name = this.props.name);
+
+    return _react2['default'].createElement(
       'div',
@@ -215,10 +236,3 @@ {
       this.props.children,
-      React.createElement('input', _extends({
-        type: 'file',
-        ref: 'fileInput',
-        style: { display: 'none' },
-        multiple: this.props.multiple,
-        accept: this.props.accept,
-        onChange: this.onDrop
-      }, inputAttr))
+      _react2['default'].createElement('input', inputAttributes)
     );
@@ -228,5 +242,6 @@ };
   return Dropzone;
-})(React.Component);
+})(_react2['default'].Component);
 
 Dropzone.defaultProps = {
+  disablePreview: false,
   disableClick: false,
@@ -237,21 +252,23 @@ multiple: true
 Dropzone.propTypes = {
-  onDrop: React.PropTypes.func,
-  onDropAccepted: React.PropTypes.func,
-  onDropRejected: React.PropTypes.func,
-  onDragEnter: React.PropTypes.func,
-  onDragLeave: React.PropTypes.func,
+  onDrop: _react2['default'].PropTypes.func,
+  onDropAccepted: _react2['default'].PropTypes.func,
+  onDropRejected: _react2['default'].PropTypes.func,
+  onDragEnter: _react2['default'].PropTypes.func,
+  onDragLeave: _react2['default'].PropTypes.func,
 
-  style: React.PropTypes.object,
-  activeStyle: React.PropTypes.object,
-  rejectStyle: React.PropTypes.object,
-  className: React.PropTypes.string,
-  activeClassName: React.PropTypes.string,
-  rejectClassName: React.PropTypes.string,
+  style: _react2['default'].PropTypes.object,
+  activeStyle: _react2['default'].PropTypes.object,
+  rejectStyle: _react2['default'].PropTypes.object,
+  className: _react2['default'].PropTypes.string,
+  activeClassName: _react2['default'].PropTypes.string,
+  rejectClassName: _react2['default'].PropTypes.string,
 
-  disableClick: React.PropTypes.bool,
-  multiple: React.PropTypes.bool,
-  accept: React.PropTypes.string,
-  name: React.PropTypes.string
+  disablePreview: _react2['default'].PropTypes.bool,
+  disableClick: _react2['default'].PropTypes.bool,
+  multiple: _react2['default'].PropTypes.bool,
+  accept: _react2['default'].PropTypes.string,
+  name: _react2['default'].PropTypes.string
 };
 
-module.exports = Dropzone;
+exports['default'] = Dropzone;
+module.exports = exports['default'];

package.json

 {
   "name": "react-dropzone",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Simple HTML5 drag-drop zone with React.js",
   "main": "lib/index.js",
   "scripts": {
-    "build": "babel index.js --out-file lib/index.js",
+    "build": "babel index.js --out-dir ./lib",
     "prepublish": "npm run build"
@@ -34,4 +34,4 @@ },
   "devDependencies": {
-    "babel": "^5.8.21"
+    "babel": "^5.8.29"
   }
 }

README.md

@@ -74,2 +74,3 @@ react-dropzone
 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.
+You can disable the creation of the preview (for example if you drop big files) by setting the `disablePreview` prop to `true`.
 
@@ -76,0 +77,0 @@ To trigger the dropzone manually (open the file prompt), call the component's `open` function.

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

46045

increased by140.97%

Number of package files

21

increased by162.5%

Lines of code

425

increased by2.41%

Number of lines in readme file

142

increased by0.71%

No dependency changes