Merge pull request #18 from lionng429/fix-issue-17

Fixed wrapper existence check in Receiver constructor

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-file-uploader",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A set of file-upload-components with React.js.",
   "main": "lib/index.js",
   "scripts": {

src/Receiver.js

@@ -10,15 +10,6 @@ class Receiver extends Component {
     super(props);
 
     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);
     this.onDragOver = this.onDragOver.bind(this);
     this.onDragLeave = this.onDragLeave.bind(this);
@@ -37,6 +28,17 @@ class Receiver extends Component {
       'Browser does not support DnD events or File API.'
     );
 
+    const { wrapperId } = this.props;
+
+    if (wrapperId) {
+      invariant(
+        !!document.getElementById(wrapperId),
+        `wrapper element with Id ${wrapperId} not found.`
+      );
+
+      this.wrapper = document.getElementById(wrapperId);
+    }
+
     this.wrapper.addEventListener('dragenter', this.onDragEnter);
     this.wrapper.addEventListener('dragleave', this.onDragLeave);
     this.wrapper.addEventListener('dragover', this.onDragOver);

src/__tests__/Receiver-test.js

@@ -4,7 +4,7 @@ jest.dontMock('../index');
 jest.dontMock('classnames');
 
 import React from 'react';
-import { shallow, configure } from 'enzyme';
+import { mount, shallow, configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import { jsdom } from 'jsdom';
 
@@ -92,6 +92,20 @@ describe('Receiver', () => {
         />
       )).toThrow();
     });
+
+    it('should not throw an error if wrapperId is given and the element exists', () => {
+      expect(() => mount((
+        <div id="wrapper">
+          <Receiver
+            wrapperId="wrapper"
+            onDragEnter={emptyFn}
+            onDragOver={emptyFn}
+            onDragLeave={emptyFn}
+            onFileDrop={emptyFn}
+          />
+        </div>
+      ), { attachTo: document.body })).not.toThrow();
+    });
   });
 
   describe('state of dragLevel', () => {