react-file-uploader - npm Package Compare versions

Comparing version 0.3.7 to 0.4.0

lib/__tests__/Receiver-test.js

 'use strict';
 
-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; };
-
 var _react = require('react');
@@ -9,6 +7,8 @@
 
-var _reactDom = require('react-dom');
+var _enzyme = require('enzyme');
 
-var _reactDom2 = _interopRequireDefault(_reactDom);
+var _enzymeAdapterReact = require('enzyme-adapter-react-16');
 
+var _enzymeAdapterReact2 = _interopRequireDefault(_enzymeAdapterReact);
+
 var _jsdom = require('jsdom');
@@ -28,192 +28,220 @@
 
-var createComponent = function createComponent(onDragEnter, onDragOver, onDragLeave, onFileDrop) {
-  return _react2.default.createElement(Receiver, {
-    onDragEnter: onDragEnter,
-    onDragOver: onDragOver,
-    onDragLeave: onDragLeave,
-    onFileDrop: onFileDrop
-  });
+(0, _enzyme.configure)({ adapter: new _enzymeAdapterReact2.default() });
+
+var testFile = {
+  lastModified: 1465229147840,
+  lastModifiedDate: 'Tue Jun 07 2016 00:05:47 GMT+0800 (HKT)',
+  name: 'test.jpg',
+  size: 1024,
+  type: 'image/jpg',
+  webkitRelativePath: ''
 };
 
-// eslint-disable-next-line react/prefer-es6-class
-var createTemplate = function createTemplate(initialState, props, Component) {
-  return _react2.default.createClass({
-    getInitialState: function getInitialState() {
-      return initialState;
-    },
-    render: function render() {
-      return _react2.default.createElement(
-        Component.type,
-        _extends({
-          ref: 'receiver',
-          isOpen: this.state.isOpen,
-          files: this.state.files
-        }, props, Component.props),
-        _react2.default.createElement(
-          'h1',
-          null,
-          'Test'
-        )
-      );
-    }
-  });
+var files = [testFile];
+
+var createEvent = function createEvent(eventName) {
+  var event = document.createEvent('HTMLEvents');
+  event.initEvent(eventName, false, true);
+  event.preventDefault = jest.genMockFn();
+  event.dataTransfer = {
+    files: files,
+    setData: jest.genMockFunction(),
+    types: ['Files']
+  };
+
+  return event;
 };
 
 describe('Receiver', function () {
-  beforeEach(function setting() {
+  var dragEnterEvent = void 0,
+      dragOverEvent = void 0,
+      dragLeaveEvent = void 0,
+      dropEvent = void 0,
+      stringClass = 'receiver',
+      arrayClass = ['react', 'receiver'];
+
+  beforeEach(function () {
     global.document = (0, _jsdom.jsdom)();
     global.window = document.parentWindow;
+    global.window.DragEvent = 'DragEvent';
+    global.window.DataTransfer = 'DataTransfer';
 
-    var testFile = {
-      lastModified: 1465229147840,
-      lastModifiedDate: 'Tue Jun 07 2016 00:05:47 GMT+0800 (HKT)',
-      name: 'test.jpg',
-      size: 1024,
-      type: 'image/jpg',
-      webkitRelativePath: ''
-    };
-    var files = [testFile];
+    dragEnterEvent = createEvent('dragenter');
+    dragOverEvent = createEvent('dragover');
+    dragLeaveEvent = createEvent('dragleave');
+    dropEvent = createEvent('drop');
+  });
 
-    var mockDT = {
-      files: files,
-      setData: jest.genMockFunction()
-    };
+  describe('constructor', function () {
+    var emptyFn = function emptyFn() {},
+        component = _react2.default.createElement(Receiver, {
+      onDragEnter: emptyFn,
+      onDragOver: emptyFn,
+      onDragLeave: emptyFn,
+      onFileDrop: emptyFn
+    });
 
-    this.stringClass = 'receiver';
-    this.arrayClass = ['react', 'receiver'];
+    it('should throw an error if DnD or File API is not supported', function () {
+      global.window.DragEvent = undefined;
+      global.window.DataTransfer = undefined;
 
-    this.dragEnterEvent = document.createEvent('HTMLEvents');
-    this.dragEnterEvent.initEvent('dragenter', false, true);
+      expect(function () {
+        return (0, _enzyme.shallow)(component);
+      }).toThrow('Browser does not support DnD events or File API.');
+    });
 
-    this.dragOverEvent = document.createEvent('HTMLEvents');
-    this.dragOverEvent.initEvent('dragover', false, true);
-    this.dragOverEvent.preventDefault = jest.genMockFn();
+    it('should assign window to this.wrapper if no wrapperId is provided', function () {
+      var receiver = (0, _enzyme.shallow)(component);
+      expect(receiver.instance().wrapper).toEqual(global.window);
+    });
 
-    this.dragLeaveEvent = document.createEvent('HTMLEvents');
-    this.dragLeaveEvent.initEvent('dragleave', false, true);
-
-    this.dropEvent = document.createEvent('HTMLEvents');
-    this.dropEvent.initEvent('drop', false, true);
-    this.dropEvent.preventDefault = jest.genMockFn();
-    this.dropEvent.dataTransfer = mockDT;
+    it('should throw an error if wrapperId is given but element is not found', function () {
+      expect(function () {
+        return (0, _enzyme.shallow)(_react2.default.createElement(Receiver, {
+          wrapperId: 'random',
+          onDragEnter: emptyFn,
+          onDragOver: emptyFn,
+          onDragLeave: emptyFn,
+          onFileDrop: emptyFn
+        }));
+      }).toThrow();
+    });
   });
 
   describe('state of dragLevel', function () {
-    beforeEach(function setting() {
-      var onDragEnter = jest.genMockFn();
-      var onDragOver = jest.genMockFn();
-      var onDragLeave = jest.genMockFn();
-      var onFileDrop = jest.genMockFn();
+    var receiver = void 0,
+        onDragEnter = void 0,
+        onDragOver = void 0,
+        onDragLeave = void 0,
+        onFileDrop = void 0;
 
-      this.onDragEnter = onDragEnter;
-      this.onDragOver = onDragOver;
-      this.onDragLeave = onDragLeave;
-      this.onFileDrop = onFileDrop;
+    beforeEach(function () {
+      var mockOnDragEnter = jest.genMockFn();
+      var mockOnDragOver = jest.genMockFn();
+      var mockOnDragLeave = jest.genMockFn();
+      var mockOnFileDrop = jest.genMockFn();
 
-      var Component = createComponent(onDragEnter, onDragOver, onDragLeave, onFileDrop);
-      var template = createTemplate({ isOpen: false, files: [] }, {}, Component);
+      onDragEnter = mockOnDragEnter;
+      onDragOver = mockOnDragOver;
+      onDragLeave = mockOnDragLeave;
+      onFileDrop = mockOnFileDrop;
 
-      this.createTestParent = _react2.default.createFactory(template);
-      this.ParentComponent = this.createTestParent();
-      this.container = document.createElement('div');
-      this.instance = _reactDom2.default.render(this.ParentComponent, this.container);
-      this.receiver = this.instance.refs.receiver;
+      var component = _react2.default.createElement(Receiver, {
+        isOpen: false,
+        files: [],
+        onDragEnter: onDragEnter,
+        onDragOver: onDragOver,
+        onDragLeave: onDragLeave,
+        onFileDrop: onFileDrop
+      });
+
+      receiver = (0, _enzyme.shallow)(component);
     });
 
-    it('should increase state of dragLevel by 1 with dragEnter event', function test() {
-      var oldDragLevel = this.receiver.state.dragLevel;
-      window.dispatchEvent(this.dragEnterEvent);
-      var newDragLevel = this.receiver.state.dragLevel;
+    it('should increase state of dragLevel by 1 with dragEnter event', function () {
+      var oldDragLevel = receiver.state().dragLevel;
+      window.dispatchEvent(dragEnterEvent);
+      var newDragLevel = receiver.state().dragLevel;
       expect(newDragLevel).toEqual(oldDragLevel + 1);
     });
 
-    it('should call onDragEnter with dragEnter event if isOpen is false', function test() {
-      window.dispatchEvent(this.dragEnterEvent);
-      expect(this.onDragEnter).toBeCalled();
+    it('should call onDragEnter with dragEnter event if isOpen is false', function () {
+      window.dispatchEvent(dragEnterEvent);
+      expect(onDragEnter).toBeCalled();
     });
 
-    it('should not call onDragEnter with dragEnter event if isOpen is true', function test() {
-      this.instance.setState({ isOpen: true });
-      window.dispatchEvent(this.dragEnterEvent);
-      expect(this.onDragEnter).not.toBeCalled();
+    it('should not call onDragEnter with dragEnter event if isOpen is true', function () {
+      receiver.setProps({ isOpen: true });
+      window.dispatchEvent(dragEnterEvent);
+      expect(onDragEnter).not.toBeCalled();
     });
 
-    it('should call event.preventDefault with dragOver event', function test() {
-      window.dispatchEvent(this.dragOverEvent);
-      expect(this.dragOverEvent.preventDefault).toBeCalled();
+    it('should not call onDragEnter callback with dragEnter event if dataTransfer.types does not include `Files`', function () {
+      onDragEnter = jest.genMockFn();
+      dragEnterEvent.dataTransfer.types = ['HTMLElement'];
+
+      receiver.setProps({ onDragEnter: onDragEnter });
+
+      window.dispatchEvent(dragEnterEvent);
+      expect(onDragEnter).not.toBeCalled();
     });
 
-    it('should call onDragOver with dragOver event', function test() {
-      window.dispatchEvent(this.dragOverEvent);
-      expect(this.onDragOver).toBeCalled();
+    it('should call event.preventDefault with dragOver event', function () {
+      window.dispatchEvent(dragOverEvent);
+      expect(dragOverEvent.preventDefault).toBeCalled();
     });
 
-    it('should decrease state of dragLevel by 1 with dragLeave event', function test() {
-      var oldDragLevel = this.receiver.state.dragLevel;
-      window.dispatchEvent(this.dragEnterEvent);
-      var newDragLevel = this.receiver.state.dragLevel;
+    it('should call onDragOver with dragOver event', function () {
+      window.dispatchEvent(dragOverEvent);
+      expect(onDragOver).toBeCalled();
+    });
+
+    it('should decrease state of dragLevel by 1 with dragLeave event', function () {
+      var oldDragLevel = receiver.state().dragLevel;
+      window.dispatchEvent(dragEnterEvent);
+      var newDragLevel = receiver.state().dragLevel;
       expect(newDragLevel).toEqual(oldDragLevel + 1);
 
-      window.dispatchEvent(this.dragLeaveEvent);
-      var finalDragLevel = this.receiver.state.dragLevel;
+      window.dispatchEvent(dragLeaveEvent);
+      var finalDragLevel = receiver.state().dragLevel;
       expect(finalDragLevel).toEqual(newDragLevel - 1);
-      expect(this.onDragLeave).toBeCalled();
+      expect(onDragLeave).toBeCalled();
     });
 
-    it('should call onDragLeave if state of dragLevel is not 0', function test() {
-      var oldDragLevel = this.receiver.state.dragLevel;
-      window.dispatchEvent(this.dragEnterEvent);
-      var newDragLevel = this.receiver.state.dragLevel;
+    it('should call onDragLeave if state of dragLevel is not 0', function () {
+      var oldDragLevel = receiver.state().dragLevel;
+      window.dispatchEvent(dragEnterEvent);
+      var newDragLevel = receiver.state().dragLevel;
       expect(newDragLevel).toEqual(oldDragLevel + 1);
 
-      window.dispatchEvent(this.dragEnterEvent);
-      var newerDragLevel = this.receiver.state.dragLevel;
+      window.dispatchEvent(dragEnterEvent);
+      var newerDragLevel = receiver.state().dragLevel;
       expect(newerDragLevel).toEqual(newDragLevel + 1);
 
-      window.dispatchEvent(this.dragLeaveEvent);
-      var finalDragLevel = this.receiver.state.dragLevel;
+      window.dispatchEvent(dragLeaveEvent);
+      var finalDragLevel = receiver.state().dragLevel;
       expect(finalDragLevel).toEqual(newerDragLevel - 1);
-      expect(this.onDragLeave).not.toBeCalled();
+      expect(onDragLeave).not.toBeCalled();
 
-      window.dispatchEvent(this.dragLeaveEvent);
-      var endDragLevel = this.receiver.state.dragLevel;
+      window.dispatchEvent(dragLeaveEvent);
+      var endDragLevel = receiver.state().dragLevel;
       expect(endDragLevel).toEqual(finalDragLevel - 1);
-      expect(this.onDragLeave).toBeCalled();
+      expect(onDragLeave).toBeCalled();
     });
 
-    it('should call event.preventDefault with drop event', function test() {
-      window.dispatchEvent(this.dropEvent);
+    it('should call event.preventDefault with drop event', function () {
+      window.dispatchEvent(dropEvent);
       // eslint-disable-next-line no-undef
-      expect(this.dropEvent.preventDefault).toBeCalled();
+      expect(dropEvent.preventDefault).toBeCalled();
     });
 
-    it('should call onFileDrop with drop event', function test() {
-      window.dispatchEvent(this.dropEvent);
-      expect(this.onFileDrop).toBeCalled();
+    it('should call onFileDrop with drop event', function () {
+      window.dispatchEvent(dropEvent);
+      expect(onFileDrop).toBeCalled();
     });
 
-    it('should set state of dragLevel to 0 with dragEnter event', function test() {
-      var oldDragLevel = this.receiver.state.dragLevel;
-      window.dispatchEvent(this.dragEnterEvent);
-      var newDragLevel = this.receiver.state.dragLevel;
+    it('should set state of dragLevel to 0 with dragEnter event', function () {
+      var oldDragLevel = receiver.state().dragLevel;
+      window.dispatchEvent(dragEnterEvent);
+      var newDragLevel = receiver.state().dragLevel;
       expect(newDragLevel).toEqual(oldDragLevel + 1);
 
-      window.dispatchEvent(this.dropEvent);
-      var finalDragLevel = this.receiver.state.dragLevel;
+      window.dispatchEvent(dropEvent);
+      var finalDragLevel = receiver.state().dragLevel;
       expect(finalDragLevel).toEqual(0);
     });
 
-    it('should not call any callback after Receiver did unmount', function test() {
-      _reactDom2.default.unmountComponentAtNode(this.container);
-      window.dispatchEvent(this.dragEnterEvent);
-      expect(this.onDragEnter).not.toBeCalled();
+    it('should not call any callback after Receiver did unmount', function () {
+      receiver.unmount();
+      window.dispatchEvent(dragEnterEvent);
+      expect(onDragEnter).not.toBeCalled();
 
-      window.dispatchEvent(this.dragOverEvent);
-      expect(this.onDragOver).not.toBeCalled();
+      window.dispatchEvent(dragOverEvent);
+      expect(onDragOver).not.toBeCalled();
 
-      window.dispatchEvent(this.dragLeaveEvent);
-      expect(this.onDragLeave).not.toBeCalled();
+      window.dispatchEvent(dragLeaveEvent);
+      expect(onDragLeave).not.toBeCalled();
 
-      window.dispatchEvent(this.dropEvent);
-      expect(this.onFileDrop).not.toBeCalled();
+      window.dispatchEvent(dropEvent);
+      expect(onFileDrop).not.toBeCalled();
     });
@@ -223,13 +251,18 @@ });
   describe('callbacks and callback arguments', function () {
-    beforeEach(function setting() {
-      var onDragEnter = function onDragEnter(e) {
+    var onDragEnter = void 0,
+        onDragOver = void 0,
+        onDragLeave = void 0,
+        onFileDrop = void 0;
+
+    beforeEach(function () {
+      var mockOnDragEnter = function mockOnDragEnter(e) {
         expect(e.type).toBe('dragenter');
       };
-      var onDragOver = function onDragOver(e) {
+      var mockOnDragOver = function mockOnDragOver(e) {
         expect(e.type).toBe('dragover');
       };
-      var onDragLeave = function onDragLeave(e) {
+      var mockOnDragLeave = function mockOnDragLeave(e) {
         expect(e.type).toBe('dragleave');
       };
-      var onFileDrop = function onFileDrop(e, _files) {
+      var mockOnFileDrop = function mockOnFileDrop(e, _files) {
         expect(e.type).toBe('drop');
@@ -248,88 +281,92 @@ var file = _files[0];
 
-      this.onDragEnter = onDragEnter;
-      this.onDragOver = onDragOver;
-      this.onDragLeave = onDragLeave;
-      this.onFileDrop = onFileDrop;
+      onDragEnter = mockOnDragEnter;
+      onDragOver = mockOnDragOver;
+      onDragLeave = mockOnDragLeave;
+      onFileDrop = mockOnFileDrop;
 
-      var Component = createComponent(onDragEnter, onDragOver, onDragLeave, onFileDrop);
-      var template = createTemplate({ isOpen: false, files: [] }, {}, Component);
+      var component = _react2.default.createElement(Receiver, {
+        isOpen: false,
+        files: [],
+        onDragEnter: onDragEnter,
+        onDragOver: onDragOver,
+        onDragLeave: onDragLeave,
+        onFileDrop: onFileDrop
+      });
 
-      this.createTestParent = _react2.default.createFactory(template);
-      this.ParentComponent = this.createTestParent();
-      this.container = document.createElement('div');
-      this.instance = _reactDom2.default.render(this.ParentComponent, this.container);
-      this.receiver = this.instance.refs.receiver;
+      (0, _enzyme.shallow)(component);
     });
 
-    it('should execute the onDragEnter callback with a DragEvent with type `dragenter` as argument', function test() {
-      window.dispatchEvent(this.dragEnterEvent);
+    it('should execute the onDragEnter callback with a DragEvent with type `dragenter` as argument', function () {
+      window.dispatchEvent(dragEnterEvent);
     });
 
-    it('should execute the onDragOver callback with a DragEvent with type `dragover` as argument', function test() {
-      window.dispatchEvent(this.dragOverEvent);
+    it('should execute the onDragOver callback with a DragEvent with type `dragover` as argument', function () {
+      window.dispatchEvent(dragOverEvent);
     });
 
-    it('should execute the onDragLeave callback with a DragEvent with type `dragleave` as argument', function test() {
-      window.dispatchEvent(this.dragLeaveEvent);
+    it('should execute the onDragLeave callback with a DragEvent with type `dragleave` as argument', function () {
+      window.dispatchEvent(dragLeaveEvent);
     });
 
-    it('should execute the onFileDrop callback with a DragEvent with type `drop` as argument', function test() {
-      window.dispatchEvent(this.dropEvent);
+    it('should execute the onFileDrop callback with a DragEvent with type `drop` as argument', function () {
+      window.dispatchEvent(dropEvent);
     });
   });
 
-  describe('#render', function () {
-    beforeEach(function setting() {
-      var Component = createComponent();
-      var template = createTemplate({ isOpen: false, files: [] }, {}, Component);
+  describe('render()', function () {
+    var receiver = void 0,
+        childrenItems = Array(5).fill().map(function (value, index) {
+      return _react2.default.createElement(
+        'li',
+        { key: index },
+        index
+      );
+    });
 
-      this.createTestParent = _react2.default.createFactory(template);
-      this.ParentComponent = this.createTestParent();
-      this.container = document.createElement('div');
-      this.instance = _reactDom2.default.render(this.ParentComponent, this.container);
-      this.receiver = this.instance.refs.receiver;
+    beforeEach(function () {
+      var mockOnDragEnter = jest.genMockFn();
+      var mockOnDragOver = jest.genMockFn();
+      var mockOnDragLeave = jest.genMockFn();
+      var mockOnFileDrop = jest.genMockFn();
+
+      var component = _react2.default.createElement(
+        Receiver,
+        {
+          isOpen: false,
+          files: [],
+          onDragEnter: mockOnDragEnter,
+          onDragOver: mockOnDragOver,
+          onDragLeave: mockOnDragLeave,
+          onFileDrop: mockOnFileDrop
+        },
+        childrenItems
+      );
+
+      receiver = (0, _enzyme.shallow)(component);
     });
 
-    it('should render nothing if isOpen is false', function test() {
-      var receiver = _reactDom2.default.findDOMNode(this.receiver);
-      expect(receiver).toBeNull();
-      this.instance.setState({ isOpen: true });
+    it('should render nothing if isOpen is false', function () {
+      expect(receiver.type()).toEqual(null);
+      expect(receiver.children().exists()).toBe(false);
     });
 
-    it('should render a div wrapper with children if isOpen is true', function test() {
-      this.instance.setState({ isOpen: true });
-      var receiver = _reactDom2.default.findDOMNode(this.receiver);
-      expect(receiver).toEqual(jasmine.any(HTMLDivElement));
-      expect(receiver.firstElementChild).toEqual(jasmine.any(HTMLHeadingElement));
+    it('should render a div wrapper with children if isOpen is true', function () {
+      receiver.setProps({ isOpen: true });
+      expect(receiver.type()).toEqual('div');
+      expect(receiver.children().length).toEqual(childrenItems.length);
     });
 
-    it('should render a div wrapper with customClass in string', function test() {
-      var Component = createComponent();
-      var template = createTemplate({ isOpen: true, files: [] }, { customClass: this.stringClass }, Component);
-
-      this.createTestParent = _react2.default.createFactory(template);
-      this.ParentComponent = this.createTestParent();
-      this.container = document.createElement('div');
-      this.instance = _reactDom2.default.render(this.ParentComponent, this.container);
-      this.receiver = this.instance.refs.receiver;
-
-      var receiver = _reactDom2.default.findDOMNode(this.receiver);
-      expect(receiver.className).toEqual(this.stringClass);
+    it('should render a div wrapper with customClass in string', function () {
+      receiver.setProps({ isOpen: true, customClass: stringClass });
+      expect(receiver.hasClass(stringClass)).toBe(true);
     });
 
-    it('should render a div wrapper with customClass in array', function test() {
-      var Component = createComponent();
-      var template = createTemplate({ isOpen: true, files: [] }, { customClass: this.arrayClass }, Component);
-
-      this.createTestParent = _react2.default.createFactory(template);
-      this.ParentComponent = this.createTestParent();
-      this.container = document.createElement('div');
-      this.instance = _reactDom2.default.render(this.ParentComponent, this.container);
-      this.receiver = this.instance.refs.receiver;
-
-      var receiver = _reactDom2.default.findDOMNode(this.receiver);
-      expect(receiver.className).toEqual(this.arrayClass.join(' '));
+    it('should render a div wrapper with customClass in array', function () {
+      receiver.setProps({ isOpen: true, customClass: arrayClass });
+      arrayClass.forEach(function (classname) {
+        expect(receiver.hasClass(classname)).toBe(true);
+      });
     });
   });
 });
-/* eslint-enable no-undef */
+/* eslint-enable no-undef, max-len */

lib/__tests__/UploadManager-test.js

@@ -7,6 +7,8 @@ 'use strict';
 
-var _reactDom = require('react-dom');
+var _enzyme = require('enzyme');
 
-var _reactDom2 = _interopRequireDefault(_reactDom);
+var _enzymeAdapterReact = require('enzyme-adapter-react-16');
 
+var _enzymeAdapterReact2 = _interopRequireDefault(_enzymeAdapterReact);
+
 var _jsdom = require('jsdom');
@@ -30,136 +32,109 @@
 
+(0, _enzyme.configure)({ adapter: new _enzymeAdapterReact2.default() });
+
 describe('UploadManager', function () {
-  beforeEach(function setting() {
+  var stringClass = 'receiver',
+      arrayClass = ['react', 'receiver'],
+      uploadPath = 'http://localhost:3000/api/upload',
+      children = _react2.default.createElement(
+    'p',
+    null,
+    'children'
+  ),
+      uploadManager = void 0,
+      onUploadStart = void 0,
+      onUploadProgress = void 0,
+      onUploadEnd = void 0,
+      formDataParser = void 0,
+      err = void 0,
+      errorResponse = void 0,
+      successResponse = void 0,
+      errorHandler = void 0;
+
+  beforeEach(function () {
     global.document = (0, _jsdom.jsdom)();
     global.window = document.parentWindow;
 
-    this.stringClass = 'receiver';
-    this.arrayClass = ['react', 'receiver'];
-    this.style = { display: 'block' };
-    this.uploadPath = 'http://localhost:3000/api/upload';
-    this.onUploadStart = jest.fn();
-    this.onUploadProgress = jest.fn();
-    this.onUploadEnd = jest.fn();
+    onUploadStart = jest.genMockFn();
+    onUploadProgress = jest.genMockFn();
+    onUploadEnd = jest.genMockFn();
+    formDataParser = jest.genMockFn();
 
-    this.children = _react2.default.createElement(
-      'p',
-      null,
-      'children'
-    );
-    this.container = document.createElement('div');
-    this.instance = _reactDom2.default.render(_react2.default.createElement(
+    err = new Error('not found');
+    errorResponse = { body: { success: false, errors: { message: 'not found' } } };
+    successResponse = { body: { success: true } };
+    errorHandler = UploadManager.defaultProps.uploadErrorHandler;
+
+    uploadManager = (0, _enzyme.shallow)(_react2.default.createElement(
       UploadManager,
       {
-        uploadUrl: this.uploadPath,
-        onUploadEnd: this.onUploadEnd
+        customClass: stringClass,
+        uploadUrl: uploadPath,
+        onUploadStart: onUploadStart,
+        onUploadProgress: onUploadProgress,
+        onUploadEnd: onUploadEnd,
+        formDataParser: formDataParser
       },
-      this.children
-    ), this.container);
+      children
+    ));
   });
 
-  afterEach(function setting() {
-    this.container = null;
-    this.instance = null;
+  afterEach(function () {
+    uploadManager = null;
   });
 
-  describe('#render()', function () {
-    it('should render ul element by default', function test() {
-      var node = _reactDom2.default.findDOMNode(this.instance);
-      expect(node).toEqual(jasmine.any(HTMLUListElement));
-      expect(node.firstElementChild).toEqual(jasmine.any(HTMLParagraphElement));
+  describe('render()', function () {
+    it('should render ul element by default', function () {
+      expect(uploadManager.type()).toEqual('ul');
+      expect(uploadManager.childAt(0).type()).toEqual('p');
     });
 
-    it('should render wrapper element according to component props', function test() {
-      this.instance = _reactDom2.default.render(_react2.default.createElement(
-        UploadManager,
-        {
-          component: 'div',
-          uploadUrl: this.uploadPath,
-          onUploadEnd: this.onUploadEnd
-        },
-        this.children
-      ), this.container);
-      var node = _reactDom2.default.findDOMNode(this.instance);
-      expect(node).toEqual(jasmine.any(HTMLDivElement));
+    it('should render wrapper element according to component props', function () {
+      uploadManager.setProps({ component: 'div' });
+      expect(uploadManager.type()).toEqual('div');
     });
 
-    it('should render a wrapper with customClass in string', function test() {
-      this.instance = _reactDom2.default.render(_react2.default.createElement(
-        UploadManager,
-        {
-          component: 'div',
-          customClass: this.stringClass,
-          style: this.style,
-          uploadUrl: this.uploadPath,
-          onUploadEnd: this.onUploadEnd
-        },
-        this.children
-      ), this.container);
-      var node = _reactDom2.default.findDOMNode(this.instance);
-      expect(node.className).toEqual(this.stringClass);
+    it('should render a wrapper with customClass in string', function () {
+      expect(uploadManager.hasClass(stringClass)).toBe(true);
     });
 
-    it('should render a wrapper with customClass in array', function test() {
-      this.instance = _reactDom2.default.render(_react2.default.createElement(
-        UploadManager,
-        {
-          component: 'div',
-          customClass: this.arrayClass,
-          style: this.style,
-          uploadUrl: this.uploadPath,
-          onUploadEnd: this.onUploadEnd
-        },
-        this.children
-      ), this.container);
-      var node = _reactDom2.default.findDOMNode(this.instance);
-      expect(node.className).toEqual(this.arrayClass.join(' '));
+    it('should render a wrapper with customClass in array', function () {
+      uploadManager.setProps({ customClass: arrayClass });
+
+      arrayClass.forEach(function (classname) {
+        expect(uploadManager.hasClass(classname)).toBe(true);
+      });
     });
   });
 
-  describe('#uploadErrorHandler()', function () {
-    beforeEach(function setting() {
-      this.err = new Error('not found');
-      this.errorResponse = { body: { success: false, errors: { message: 'not found' } } };
-      this.successResponse = { body: { success: true } };
-      this.errorHandler = this.instance.props.uploadErrorHandler;
-    });
-
-    it('should return an object contains key of `error` and `result`', function test() {
-      var result = this.errorHandler(null, this.successResponse);
+  describe('uploadErrorHandler()', function () {
+    it('should return an object contains key of `error` and `result`', function () {
+      var result = errorHandler(null, successResponse);
       expect(result.error).toBeNull();
-      expect(result.result).toEqual(this.successResponse.body);
+      expect(result.result).toEqual(successResponse.body);
     });
 
-    it('should return an object with key of `error` with value equals to the first argument if it is not empty', function test() {
-      var result = this.errorHandler(this.err, this.successResponse);
-      expect(result.error).toEqual(this.err.message);
-      expect(result.result).toEqual(this.successResponse.body);
+    it('should return an object with key of `error` with value equals to the first argument if it is not empty', function () {
+      var result = errorHandler(err, successResponse);
+      expect(result.error).toEqual(err.message);
+      expect(result.result).toEqual(successResponse.body);
     });
 
-    it('should return an object with key of `error` with value equals to the value of `body.error` of the second argument if it is not empty', function test() {
-      var result = this.errorHandler(null, this.errorResponse);
-      expect(result.error).toEqual(this.errorResponse.body.errors);
-      delete this.errorResponse.body.errors;
-      expect(result.result).toEqual(this.errorResponse.body);
+    it('should return an object with key of `error` with value equals to the value of `body.error` of the second argument if it is not empty', function () {
+      var result = errorHandler(null, errorResponse);
+      expect(result.error).toEqual(errorResponse.body.errors);
+      delete errorResponse.body.errors;
+      expect(result.result).toEqual(errorResponse.body);
     });
   });
 
-  describe('#upload()', function () {
-    beforeEach(function setting() {
+  describe('upload()', function () {
+    var file = void 0;
+
+    beforeEach(function () {
+      file = {};
+
       (0, _nock2.default)('http://localhost:3000').filteringRequestBody(function () {
         return '*';
-      }).post('/api/upload', '*').reply(200, this.successResponse);
-
-      this.instance = _reactDom2.default.render(_react2.default.createElement(
-        UploadManager,
-        {
-          uploadUrl: this.uploadPath,
-          onUploadStart: this.onUploadStart,
-          onUploadProgress: this.onUploadProgress,
-          onUploadEnd: this.onUploadEnd
-        },
-        this.children
-      ), this.container);
-      this.errorResponse = { success: false, errors: { message: 'not found' } };
-      this.successResponse = { success: true };
+      }).post('/api/upload', '*').reply(200, successResponse);
     });
@@ -172,7 +147,16 @@
 
-    it('should call onUploadStart prop functions if it is given', function test() {
-      this.instance.upload(this.instance.props.uploadUrl, {});
-      expect(this.onUploadStart).toBeCalledWith({ status: uploadStatus.UPLOADING });
+    it('should call `props.onUploadStart` function if it is given', function () {
+      var instance = uploadManager.instance();
+      instance.upload(instance.props.uploadUrl, file);
+      expect(onUploadStart).toBeCalledWith(Object.assign({}, file, { status: uploadStatus.UPLOADING }));
+      expect(file).toEqual({ status: uploadStatus.UPLOADING });
     });
+
+    it('should call `props.formDataParser` function if it is given', function () {
+      var instance = uploadManager.instance();
+      instance.upload(instance.props.uploadUrl, {});
+      expect(formDataParser).toBeCalledWith(new FormData(), { status: uploadStatus.UPLOADING });
+    });
   });
-});
+});
+/* eslint-enable no-undef, max-len */

lib/Receiver.js

@@ -49,3 +49,12 @@ 'use strict';
 
-    _this.wrapper = document.getElementById(_this.props.wrapperId) || window;
+    _this.wrapper = window;
+
+    if (props.wrapperId) {
+      _this.wrapper = document.getElementById(props.wrapperId);
+    }
+
+    if (!_this.wrapper) {
+      throw new Error('wrapper element with Id ' + props.wrapperId + ' not found.');
+    }
+
     _this.onDragEnter = _this.onDragEnter.bind(_this);
@@ -67,3 +76,3 @@ _this.onDragOver = _this.onDragOver.bind(_this);
     value: function componentDidMount() {
-      (0, _invariant2.default)(!!window.DragEvent && !!window.DataTransfer, 'Upload end point must be provided to upload files');
+      (0, _invariant2.default)((window.DragEvent || window.Event) && window.DataTransfer, 'Browser does not support DnD events or File API.');
 
@@ -76,2 +85,10 @@ this.wrapper.addEventListener('dragenter', this.onDragEnter);
   }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (nextProps.wrapperId !== this.props.wrapperId) {
+        // eslint-disable-next-line no-console
+        console.warn('[Receiver.js] Change in props.wrapperId is unexpected, no new event listeners will be created.');
+      }
+    }
+  }, {
     key: 'componentWillUnmount',
@@ -87,2 +104,6 @@ value: function componentWillUnmount() {
     value: function onDragEnter(e) {
+      if (!e.dataTransfer.types.includes('Files')) {
+        return;
+      }
+
       var dragLevel = this.state.dragLevel + 1;
@@ -122,3 +143,3 @@
 
-      if (!!e.dataTransfer) {
+      if (e.dataTransfer) {
         var fileList = e.dataTransfer.files || [];
@@ -173,2 +194,6 @@
 
+Receiver.defaultProps = {
+  isOpen: false
+};
+
 exports.default = Receiver;

lib/UploadHandler.js

@@ -33,3 +33,3 @@ 'use strict';
 
-var debug = require('debug')('react-file-upload:UploadHandler');
+var debug = require('debug')('react-file-uploader:UploadHandler');
 
@@ -84,3 +84,2 @@ var UploadHandler = function (_Component) {
           component = _props2.component,
-          key = _props2.key,
           customClass = _props2.customClass,
@@ -90,3 +89,3 @@ style = _props2.style;
 
-      return _react2.default.createElement(component, { key: key, className: (0, _classnames2.default)(customClass), style: style }, this.props.children);
+      return _react2.default.createElement(component, { className: (0, _classnames2.default)(customClass), style: style }, this.props.children);
     }
@@ -104,3 +103,2 @@ }]);
   file: _propTypes2.default.object.isRequired,
-  key: _propTypes2.default.string,
   style: _propTypes2.default.object,
@@ -107,0 +105,0 @@ upload: _propTypes2.default.func

lib/UploadManager.js

@@ -25,6 +25,2 @@ 'use strict';
 
-var _assign = require('lodash/assign');
-
-var _assign2 = _interopRequireDefault(_assign);
-
 var _bindKey = require('lodash/bindKey');
@@ -54,3 +50,3 @@
 
-var debug = require('debug')('react-file-upload:UploadManager');
+var debug = require('debug')('react-file-uploader:UploadManager');
 
@@ -80,5 +76,14 @@ var UploadManager = function (_Component) {
       var _props = this.props,
+          _props$reqConfigs = _props.reqConfigs,
+          _props$reqConfigs$acc = _props$reqConfigs.accept,
+          accept = _props$reqConfigs$acc === undefined ? 'application/json' : _props$reqConfigs$acc,
+          _props$reqConfigs$met = _props$reqConfigs.method,
+          method = _props$reqConfigs$met === undefined ? 'post' : _props$reqConfigs$met,
+          timeout = _props$reqConfigs.timeout,
+          _props$reqConfigs$wit = _props$reqConfigs.withCredentials,
+          withCredentials = _props$reqConfigs$wit === undefined ? false : _props$reqConfigs$wit,
           onUploadStart = _props.onUploadStart,
           onUploadEnd = _props.onUploadEnd,
           onUploadProgress = _props.onUploadProgress,
+          formDataParser = _props.formDataParser,
           uploadErrorHandler = _props.uploadErrorHandler,
@@ -90,15 +95,25 @@ _props$uploadHeader = _props.uploadHeader,
       if (typeof onUploadStart === 'function') {
-        onUploadStart((0, _assign2.default)(file, { status: _status2.default.UPLOADING }));
+        onUploadStart(Object.assign(file, { status: _status2.default.UPLOADING }));
       }
 
       var formData = new FormData();
-      formData.append('file', file);
+      formData = formDataParser(formData, file);
 
+      var request = _superagent2.default[method.toLowerCase()](url).accept(accept).set(uploadHeader);
+
+      if (timeout) {
+        request.timeout(timeout);
+      }
+
+      if (withCredentials) {
+        request.withCredentials();
+      }
+
       debug('start uploading file#' + file.id + ' to ' + url, file);
 
-      _superagent2.default.post(url).accept('application/json').set(uploadHeader).send(formData).on('progress', function (_ref) {
+      request.send(formData).on('progress', function (_ref) {
         var percent = _ref.percent;
 
         if (typeof onUploadProgress === 'function') {
-          onUploadProgress((0, _assign2.default)(file, {
+          onUploadProgress(Object.assign(file, {
             progress: percent,
@@ -115,14 +130,13 @@ status: _status2.default.UPLOADING
           debug('failed to upload file', error);
-
-          if (typeof onUploadEnd === 'function') {
-            onUploadEnd((0, _assign2.default)(file, { error: error, status: _status2.default.FAILED }));
-          }
-
-          return;
+        } else {
+          debug('succeeded to upload file', result);
         }
 
-        debug('succeeded to upload file', res);
-
         if (typeof onUploadEnd === 'function') {
-          onUploadEnd((0, _assign2.default)(file, { result: result, status: _status2.default.UPLOADED }));
+          onUploadEnd(Object.assign(file, {
+            progress: error && 0 || 100,
+            error: error,
+            result: error && undefined || result,
+            status: error && _status2.default.FAILED || _status2.default.UPLOADED
+          }));
         }
@@ -145,3 +159,3 @@ });
       return _react2.default.createElement(component, { className: (0, _classnames2.default)(customClass), style: style }, _react2.default.Children.map(children, function (child) {
-        return (0, _react.cloneElement)(child, (0, _assign2.default)({
+        return (0, _react.cloneElement)(child, Object.assign({
           upload: (0, _bindKey2.default)(_this2, 'upload', uploadUrl, child.props.file)
@@ -160,7 +174,17 @@ }, child.props));
   customClass: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)]),
+  formDataParser: _propTypes2.default.func,
   onUploadStart: _propTypes2.default.func,
   onUploadProgress: _propTypes2.default.func,
   onUploadEnd: _propTypes2.default.func.isRequired,
+  reqConfigs: _propTypes2.default.shape({
+    accept: _propTypes2.default.string,
+    method: _propTypes2.default.string,
+    timeout: _propTypes2.default.shape({
+      response: _propTypes2.default.number,
+      deadline: _propTypes2.default.number
+    }),
+    withCredentials: _propTypes2.default.bool
+  }),
   style: _propTypes2.default.object,
-  uploadErrorHandler: _propTypes2.default.func.isRequired,
+  uploadErrorHandler: _propTypes2.default.func,
   uploadUrl: _propTypes2.default.string.isRequired,
@@ -172,3 +196,10 @@ uploadHeader: _propTypes2.default.object
   component: 'ul',
-  uploadErrorHandler: function uploadErrorHandler(err, res) {
+  formDataParser: function formDataParser(formData, file) {
+    formData.append('file', file);
+    return formData;
+  },
+  reqConfigs: {},
+  uploadErrorHandler: function uploadErrorHandler(err) {
+    var res = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
     var error = null;
@@ -175,0 +206,0 @@ var body = (0, _clone2.default)(res.body);

package.json

 {
   "name": "react-file-uploader",
-  "version": "0.3.7",
+  "version": "0.4.0",
   "description": "A set of file-upload-components with React.js.",
@@ -8,4 +8,4 @@ "main": "lib/index.js",
     "clean": "rm -rf lib",
-    "test": "jest fake-test.js",
-    "test:report": "jest fake-test.js --coverage",
+    "test": "jest",
+    "test:report": "jest --coverage",
     "build:lib": "babel src --out-dir lib",
@@ -40,18 +40,13 @@ "build": "npm run eslint && npm run test && npm run clean && npm run build:lib",
     "babel-preset-react": "^6.1.18",
-    "babel-preset-stage-0": "^6.1.18",
-    "eslint": "^2.11.1",
-    "eslint-config-airbnb": "^9.0.1",
-    "eslint-plugin-import": "^1.8.1",
-    "eslint-plugin-jsx-a11y": "^1.3.0",
-    "eslint-plugin-react": "^5.1.1",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^4.19.1",
+    "eslint-plugin-react": "^7.7.0",
     "jest-cli": "*",
     "jsdom": "^7.0.2",
     "nock": "^8.0.0",
-    "prop-types": "^15.5.10",
-    "react": "^0.14.8 || ^15.0.0",
-    "react-addons-test-utils": "^0.14.8 || ^15.0.0",
-    "react-dom": "^0.14.8 || ^15.0.0"
+    "react-dom": "^15.0.0 || ^16.0.0"
   },
   "peerDependencies": {
-    "react": "^0.14.8 || ^15.0.0"
+    "react": "^15.0.0 || ^16.0.0"
   },
@@ -79,2 +74,4 @@ "jest": {
     "lodash": ">=3.10.1",
+    "prop-types": "^15.5.10",
+    "react": "^15.0.0 || ^16.0.0",
     "shortid": "^2.2.6",
@@ -81,0 +78,0 @@ "superagent": "^1.4.0"

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47833

increased by0.04%

Dev dependency count

13

decreased by-27.78%

Lines of code

843

increased by6.71%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

9

increased by28.57%

Number of package files

12

decreased by-7.69%

Dependency changes

• + Addedprop-types@^15.5.10

• + Addedreact@^15.0.0 || ^16.0.0

• + Addedreact@16.14.0(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcreate-react-class@15.7.0(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact@15.7.0(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)