From bb6209bef8880b2285ef25a7286f74c1b020b373 Mon Sep 17 00:00:00 2001
From: Marston Ng <tcng@rakudesignstudio.com>
Date: Tue, 27 Mar 2018 22:48:21 +1100
Subject: [PATCH 1/2] Moved wrapper existence check to componentDidMount

- as mentioned in #17, wrapper existence check does not work for wrapperId pointing to Receiver's parent wrapper. Moving the logic back to componentDidMount solves this issue.
---
 src/Receiver.js                | 20 +++++++++++---------
 src/__tests__/Receiver-test.js | 16 +++++++++++++++-
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/Receiver.js b/src/Receiver.js
index fcf10e8..fcf8bb1 100644
--- a/src/Receiver.js
+++ b/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);
diff --git a/src/__tests__/Receiver-test.js b/src/__tests__/Receiver-test.js
index 84a36dc..6afec62 100644
--- a/src/__tests__/Receiver-test.js
+++ b/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', () => {

From 751adde4b1f414f3086be36540132f5a5af9e90b Mon Sep 17 00:00:00 2001
From: Marston Ng <tcng@rakudesignstudio.com>
Date: Tue, 27 Mar 2018 22:50:54 +1100
Subject: [PATCH 2/2] bumped up version to 0.4.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ca26bc0..6b2d7d5 100644
--- a/package.json
+++ b/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": {