From 0dfcc72eb73f101b29d3648af734d213c8c0fe35 Mon Sep 17 00:00:00 2001
From: Jonathon Kelly <jonathon.kelly@insidersbyte.com>
Date: Thu, 7 Apr 2016 09:34:22 +0100
Subject: [PATCH 1/9] first stage of on image drop, fire on change event with
 all image placeholders

---
 src/index.js | 59 +++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/index.js b/src/index.js
index 40d5eef..908e41c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,31 +2,66 @@ import React from 'react';
 import MarkdownRenderer from 'react-markdown-renderer';
 import TextArea from 'react-textarea-autosize';
 
-function MarkdownEditor(props) {
-    return (
-        <div className="markdown-editor">
-            <div>
-                <h2>Markdown</h2>
+const imageType = /^image\//;
 
-                <TextArea value={props.value} onChange={props.onChange} />
-            </div>
+class MarkdownEditor extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.onImageDrop = this.onImageDrop.bind(this);
+    }
+
+    onImageDrop(event) {
+        event.preventDefault();
+
+        const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
+        const filesArray = [...files];
+        const images = filesArray.filter(o => imageType.test(o.type));
+        const imageFileNames = images.map(o => `![${o.name}]()`);
+        const imagePlaceholders = imageFileNames.join('\n');
+
+        this.props.onChange({
+            target: {
+                value: `${this.props.value}\n${imagePlaceholders}`,
+            },
+        });
+    }
+
+    render() {
+        return (
+            <div className="markdown-editor">
+                <div>
+                    <h2>Markdown</h2>
+
+                    <TextArea
+                        value={this.props.value}
+                        onChange={this.props.onChange}
+                        onDrop={this.onImageDrop}
+                    />
+                </div>
 
-            <div>
-                <h2>Preview</h2>
+                <div>
+                    <h2>Preview</h2>
 
-                <MarkdownRenderer className="markdown-editor__preview" markdown={props.value} />
+                    <MarkdownRenderer
+                        className="markdown-editor__preview"
+                        markdown={this.props.value}
+                    />
+                </div>
             </div>
-        </div>
-    );
+        );
+    }
 }
 
 MarkdownEditor.propTypes = {
     value: React.PropTypes.string.isRequired,
     onChange: React.PropTypes.func.isRequired,
+    onImageDrop: React.PropTypes.func,
 };
 
 MarkdownEditor.defaultProps = {
     onChange: () => {},
+    onImageDrop: () => {},
 };
 
 export default MarkdownEditor;

From 952c7db1d41d4ed6a8fdfd0364fc56ea7d7873f3 Mon Sep 17 00:00:00 2001
From: Jonathon Kelly <jonathon.kelly@insidersbyte.com>
Date: Thu, 7 Apr 2016 13:31:46 +0100
Subject: [PATCH 2/9] replace placeholder string with uploaded string

---
 pages/index.jsx | 17 ++++++++++++++++-
 src/index.js    | 24 +++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/pages/index.jsx b/pages/index.jsx
index 47c5ec7..4d7e693 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -17,13 +17,28 @@ class App extends React.Component {
         this.updateMarkdown = this.updateMarkdown.bind(this);
     }
 
+    onImageDrop(file) {
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve({
+                    filename: file.name,
+                    url: 'http://images.freeimages.com/images/previews/b56/hands-2-ok-hand-1241594.jpg',
+                });
+            }, 1000);
+        });
+    }
+
     updateMarkdown(event) {
         this.setState({ markdown: event.target.value });
     }
 
     render() {
         return (
-            <MarkdownEditor value={this.state.markdown} onChange={this.updateMarkdown} />
+            <MarkdownEditor
+                value={this.state.markdown}
+                onChange={this.updateMarkdown}
+                onImageDrop={this.onImageDrop}
+            />
         );
     }
 }
diff --git a/src/index.js b/src/index.js
index 908e41c..430e59d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,8 @@ import MarkdownRenderer from 'react-markdown-renderer';
 import TextArea from 'react-textarea-autosize';
 
 const imageType = /^image\//;
+const placeholderTemplate = (filename) => `![uploading ${filename}...]()`;
+const uploadedTemplate = (filename, url) => `![${filename}](${url})`;
 
 class MarkdownEditor extends React.Component {
     constructor(props) {
@@ -17,7 +19,7 @@ class MarkdownEditor extends React.Component {
         const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
         const filesArray = [...files];
         const images = filesArray.filter(o => imageType.test(o.type));
-        const imageFileNames = images.map(o => `![${o.name}]()`);
+        const imageFileNames = images.map(o => placeholderTemplate(o.name));
         const imagePlaceholders = imageFileNames.join('\n');
 
         this.props.onChange({
@@ -25,6 +27,26 @@ class MarkdownEditor extends React.Component {
                 value: `${this.props.value}\n${imagePlaceholders}`,
             },
         });
+
+        for (const image of images) {
+            Promise
+                .resolve(this.props.onImageDrop(image))
+                .then(({ filename, url }) => {
+                    if (!filename || !url) {
+                        return;
+                    }
+
+                    const templateString = placeholderTemplate(filename);
+                    const uploadedString = uploadedTemplate(filename, url);
+                    const value = this.props.value.replace(templateString, uploadedString);
+
+                    this.props.onChange({
+                        target: {
+                            value,
+                        },
+                    });
+                });
+        }
     }
 
     render() {

From f89a7ef9890a3569cf33b012d9b4759e6f95fb79 Mon Sep 17 00:00:00 2001
From: Jonathon Kelly <jonathon.kelly@insidersbyte.com>
Date: Thu, 7 Apr 2016 13:55:19 +0100
Subject: [PATCH 3/9] put a border around the textarea while the file can be
 dropped on it

---
 src/index.js                   | 19 +++++++++++++++++++
 src/react-markdown-editor.styl |  4 ++++
 2 files changed, 23 insertions(+)

diff --git a/src/index.js b/src/index.js
index 430e59d..c41ae9a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,9 +10,23 @@ class MarkdownEditor extends React.Component {
     constructor(props) {
         super(props);
 
+        this.state = {
+            draggingOver: false,
+        };
+
+        this.onDragEnter = this.onDragEnter.bind(this);
+        this.onDragLeave = this.onDragLeave.bind(this);
         this.onImageDrop = this.onImageDrop.bind(this);
     }
 
+    onDragEnter() {
+        this.setState({ draggingOver: true });
+    }
+
+    onDragLeave() {
+        this.setState({ draggingOver: false });
+    }
+
     onImageDrop(event) {
         event.preventDefault();
 
@@ -50,15 +64,20 @@ class MarkdownEditor extends React.Component {
     }
 
     render() {
+        const textAreaClassName = this.state.draggingOver ? 'dragover' : null;
+
         return (
             <div className="markdown-editor">
                 <div>
                     <h2>Markdown</h2>
 
                     <TextArea
+                        className={textAreaClassName}
                         value={this.props.value}
                         onChange={this.props.onChange}
                         onDrop={this.onImageDrop}
+                        onDragEnter={this.onDragEnter}
+                        onDragLeave={this.onDragLeave}
                     />
                 </div>
 
diff --git a/src/react-markdown-editor.styl b/src/react-markdown-editor.styl
index d2c4541..0d46107 100644
--- a/src/react-markdown-editor.styl
+++ b/src/react-markdown-editor.styl
@@ -22,3 +22,7 @@
 
         :last-child
             margin-bottom: 0;
+
+    .dragover
+        border 1px solid #c9ff00
+        box-shadow 0 0 10px #719ECE

From 2f2e17b4af18ad8494fd2143ba8dea8ff0b716e9 Mon Sep 17 00:00:00 2001
From: Jonathon Kelly <jonathon.kelly@insidersbyte.com>
Date: Fri, 8 Apr 2016 09:14:02 +0100
Subject: [PATCH 4/9] set dragging over to false on dropping files

---
 package.json    | 2 +-
 pages/index.jsx | 2 +-
 src/index.js    | 2 ++
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index f9b368a..b5f84be 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@insidersbyte/react-markdown-editor",
   "version": "0.1.1",
-  "description": "React Markdown editor",
+  "description": "React Markdown editor with preview",
   "main": "dist/index.js",
   "files": [
     "dist"
diff --git a/pages/index.jsx b/pages/index.jsx
index 4d7e693..2252cab 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -24,7 +24,7 @@ class App extends React.Component {
                     filename: file.name,
                     url: 'http://images.freeimages.com/images/previews/b56/hands-2-ok-hand-1241594.jpg',
                 });
-            }, 1000);
+            }, 3000);
         });
     }
 
diff --git a/src/index.js b/src/index.js
index c41ae9a..d9d0986 100644
--- a/src/index.js
+++ b/src/index.js
@@ -30,6 +30,8 @@ class MarkdownEditor extends React.Component {
     onImageDrop(event) {
         event.preventDefault();
 
+        this.setState({ draggingOver: false });
+
         const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
         const filesArray = [...files];
         const images = filesArray.filter(o => imageType.test(o.type));

From 0736f8aab66c26cc729e33f345cdc2bc7a4cd43b Mon Sep 17 00:00:00 2001
From: Jonathon Kelly <jonathon.kelly@insidersbyte.com>
Date: Fri, 8 Apr 2016 13:51:33 +0100
Subject: [PATCH 5/9] update packages

---
 package.json | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index b5f84be..e3631f4 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
   },
   "homepage": "https://github.com/InsidersByte/react-markdown-editor#readme",
   "peerDependencies": {
-    "react": ">=0.14.8"
+    "react": "^15.0.0"
   },
   "dependencies": {
     "react-markdown-renderer": "^0.1.3",
@@ -40,8 +40,8 @@
   },
   "devDependencies": {
     "autoprefixer": "^6.3.6",
-    "babel-cli": "^6.6.5",
-    "babel-core": "^6.7.4",
+    "babel-cli": "^6.7.5",
+    "babel-core": "^6.7.5",
     "babel-jest": "^10.0.1",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.6.0",
@@ -52,7 +52,7 @@
     "cssnano": "^3.5.2",
     "eslint": "^2.7.0",
     "eslint-config-airbnb": "^6.2.0",
-    "eslint-plugin-react": "^4.2.3",
+    "eslint-plugin-react": "^4.3.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "gh-pages": "^0.11.0",
     "html-webpack-plugin": "^2.15.0",
@@ -60,9 +60,9 @@
     "mkdirp": "^0.5.1",
     "postcss-cli": "^2.5.1",
     "postcss-loader": "^0.8.2",
-    "react": "^0.14.8",
-    "react-addons-test-utils": "^0.14.8",
-    "react-dom": "^0.14.8",
+    "react": "^15.0.0",
+    "react-addons-test-utils": "^15.0.0",
+    "react-dom": "^15.0.0",
     "rimraf": "^2.5.2",
     "stats-webpack-plugin": "^0.3.1",
     "style-loader": "^0.13.1",

From dbc178cc268148b231baadc603bf7a185279e481 Mon Sep 17 00:00:00 2001
From: Jonathon Kelly <jonathon.kelly@insidersbyte.com>
Date: Fri, 8 Apr 2016 13:56:19 +0100
Subject: [PATCH 6/9] don't proceed with image drop unless on change and on
 image drop are defined

---
 src/index.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/index.js b/src/index.js
index d9d0986..4b38c67 100644
--- a/src/index.js
+++ b/src/index.js
@@ -32,6 +32,10 @@ class MarkdownEditor extends React.Component {
 
         this.setState({ draggingOver: false });
 
+        if (!this.props.onImageDrop || !this.props.onChange) {
+            return;
+        }
+
         const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
         const filesArray = [...files];
         const images = filesArray.filter(o => imageType.test(o.type));
@@ -102,9 +106,4 @@ MarkdownEditor.propTypes = {
     onImageDrop: React.PropTypes.func,
 };
 
-MarkdownEditor.defaultProps = {
-    onChange: () => {},
-    onImageDrop: () => {},
-};
-
 export default MarkdownEditor;

From 01f2aee57cb8ec789e74b43cc89bb55a17465106 Mon Sep 17 00:00:00 2001
From: Jonathon Kelly <jonathon.kelly@insidersbyte.com>
Date: Fri, 8 Apr 2016 21:06:45 +0100
Subject: [PATCH 7/9] update README

---
 README.md | 59 ++++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 39 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index 66634ea..16f7aaf 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@
 
 [![NPM](https://nodei.co/npm/@insidersbyte/react-markdown-editor.png?downloads=true&downloadRank=true)](https://nodei.co/npm/@insidersbyte/react-markdown-editor/)
 
-[React](http://facebook.github.io/react) Markdown editor, built with [react-markdown-renderer](https://github.com/insidersbyte/react-markdown-renderer).
+[React](http://facebook.github.io/react) Markdown editor, with drag and drop image support (at the moment it always adds the image to the end, regardless of where you drop it), built with [react-markdown-renderer](https://github.com/insidersbyte/react-markdown-renderer).
 
 ## Demo
 http://insidersbyte.github.io/react-markdown-editor
@@ -31,24 +31,42 @@ import '@insidersbyte/react-markdown-editor/dist/css/react-markdown-editor.css';
 
 class App extends React.Component {
     constructor() {
-        super();
-
-        this.state = {
-            markdown: '# This is a H1  \n## This is a H2  \n###### This is a H6',
-        };
-
-        this.updateMarkdown = this.updateMarkdown.bind(this);
-    }
-
-    updateMarkdown(event) {
-        this.setState({ markdown: event.target.value });
-    }
-
-    render() {
-        return (
-            <MarkdownEditor value={this.state.markdown} onChange={this.updateMarkdown} />
-        );
-    }
+            super();
+    
+            this.state = {
+                markdown: '# This is a H1  \n## This is a H2  \n###### This is a H6',
+            };
+    
+            this.updateMarkdown = this.updateMarkdown.bind(this);
+        }
+    
+        onImageDrop(file) {
+            // This is where you would upload your files to whatever storage you are using
+            // You just need to return a promise with the original filename and the url of the uploaded file
+        
+            return new Promise((resolve) => {
+                setTimeout(() => {
+                    resolve({
+                        filename: file.name,
+                        url: 'http://images.freeimages.com/images/previews/b56/hands-2-ok-hand-1241594.jpg',
+                    });
+                }, 3000);
+            });
+        }
+    
+        updateMarkdown(event) {
+            this.setState({ markdown: event.target.value });
+        }
+    
+        render() {
+            return (
+                <MarkdownEditor
+                    value={this.state.markdown}
+                    onChange={this.updateMarkdown}
+                    onImageDrop={this.onImageDrop}
+                />
+            );
+        }
 }
 
 ReactDOM.render(<App />, document.getElementById('app'));
@@ -57,7 +75,8 @@ ReactDOM.render(<App />, document.getElementById('app'));
 ## Props
 
 * value (*string*) - the raw markdown that will be converted to html (**required**)
-* onChange (*function*) - css classes to add to the component (**required**).
+* onChange (*function*) - called when a change is made
+* onImageDrop (*function*) - called per image dropped on the textarea
 
 ## Contributing
 

From 9e32273992ebd3a9e01987d954485266d64ffa08 Mon Sep 17 00:00:00 2001
From: Jonathon Kelly <jonathon.kelly@insidersbyte.com>
Date: Fri, 8 Apr 2016 21:24:57 +0100
Subject: [PATCH 8/9] change package description

---
 README.md    | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 16f7aaf..54bd5e0 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@
 
 [![NPM](https://nodei.co/npm/@insidersbyte/react-markdown-editor.png?downloads=true&downloadRank=true)](https://nodei.co/npm/@insidersbyte/react-markdown-editor/)
 
-[React](http://facebook.github.io/react) Markdown editor, with drag and drop image support (at the moment it always adds the image to the end, regardless of where you drop it), built with [react-markdown-renderer](https://github.com/insidersbyte/react-markdown-renderer).
+[React](http://facebook.github.io/react) Markdown editor with preview and drag and drop image support (at the moment it always adds the image to the end, regardless of where you drop it), built with [react-markdown-renderer](https://github.com/insidersbyte/react-markdown-renderer).
 
 ## Demo
 http://insidersbyte.github.io/react-markdown-editor
diff --git a/package.json b/package.json
index e3631f4..2920166 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@insidersbyte/react-markdown-editor",
   "version": "0.1.1",
-  "description": "React Markdown editor with preview",
+  "description": "React Markdown editor with preview and drag and drop image support",
   "main": "dist/index.js",
   "files": [
     "dist"

From 52bddb7b88765cca1d911ce0dcc50283b0c0114b Mon Sep 17 00:00:00 2001
From: Jonathon Kelly <jonathon.kelly@insidersbyte.com>
Date: Sat, 9 Apr 2016 09:16:38 +0100
Subject: [PATCH 9/9] add a lot more tests

---
 .eslintrc                   |   1 +
 README.md                   |   2 +-
 __tests__/src/index-test.js | 249 +++++++++++++++++++++++++++++++++++-
 package.json                |  10 +-
 src/index.js                |   7 +-
 5 files changed, 257 insertions(+), 12 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index a7523a6..0415518 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,7 @@
 
     "rules": {
         "indent": [2, 4, {"SwitchCase": 1}],
+        "max-len": [2, 120],
         "react/jsx-indent-props": [2, 4]
     }
 }
diff --git a/README.md b/README.md
index 54bd5e0..4148f2b 100644
--- a/README.md
+++ b/README.md
@@ -75,7 +75,7 @@ ReactDOM.render(<App />, document.getElementById('app'));
 ## Props
 
 * value (*string*) - the raw markdown that will be converted to html (**required**)
-* onChange (*function*) - called when a change is made
+* onChange (*function*) - called when a change is made (**required**)
 * onImageDrop (*function*) - called per image dropped on the textarea
 
 ## Contributing
diff --git a/__tests__/src/index-test.js b/__tests__/src/index-test.js
index 5cbbc9a..4f9f60d 100644
--- a/__tests__/src/index-test.js
+++ b/__tests__/src/index-test.js
@@ -7,18 +7,257 @@ import ReactDOM from 'react-dom';
 import TestUtils from 'react-addons-test-utils';
 import MarkdownEditor from '../../src';
 
+const value = '';
+const onChangeMock = jest.genMockFunction();
+const onImageDropMock = jest.genMockFunction();
+
+const validFile = [{ type: 'image/jpeg', name: 'image' }];
+const invalidFile = [{ type: 'text/markdown', name: 'markdown' }];
+const uploadedImage = { url: 'url', filename: 'image' };
+
 describe('MarkdownEditor', () => {
+    beforeEach(() => {
+        onChangeMock.mockClear();
+        onImageDropMock.mockClear();
+    });
+
     it('renders', () => {
         const markdownEditor = TestUtils.renderIntoDocument(
-            <div>
-                <MarkdownEditor />
-            </div>
+            <MarkdownEditor value={value} onChange={onChangeMock} />
         );
 
-        const containerNode = ReactDOM.findDOMNode(markdownEditor);
-        const markdownEditorNode = containerNode.children[0];
+        const markdownEditorNode = ReactDOM.findDOMNode(markdownEditor);
 
         expect(markdownEditorNode).toBeDefined();
         expect(markdownEditorNode).not.toBe(null);
+
+        expect(markdownEditor.state.draggingOver).toBe(false);
+    });
+
+    describe('onDragEnter', () => {
+        it('sets draggingOver to true', () => {
+            const markdownEditor = TestUtils.renderIntoDocument(
+                <MarkdownEditor value={value} onChange={onChangeMock} />
+            );
+
+            expect(markdownEditor.state.draggingOver).toBe(false);
+
+            TestUtils.Simulate.dragEnter(
+                TestUtils.findRenderedDOMComponentWithTag(markdownEditor, 'TextArea')
+            );
+
+            expect(markdownEditor.state.draggingOver).toBe(true);
+        });
+    });
+
+    describe('onDragLeave', () => {
+        it('sets draggingOver to false', () => {
+            const markdownEditor = TestUtils.renderIntoDocument(
+                <MarkdownEditor value={value} onChange={onChangeMock} />
+            );
+
+            markdownEditor.setState({ draggingOver: true });
+
+            TestUtils.Simulate.dragLeave(
+                TestUtils.findRenderedDOMComponentWithTag(markdownEditor, 'TextArea')
+            );
+
+            expect(markdownEditor.state.draggingOver).toBe(false);
+        });
+    });
+
+    describe('onDrop', () => {
+        it('sets draggingOver to false', () => {
+            const markdownEditor = TestUtils.renderIntoDocument(
+                <MarkdownEditor value={value} onChange={onChangeMock} />
+            );
+
+            markdownEditor.setState({ draggingOver: true });
+
+            TestUtils.Simulate.drop(
+                TestUtils.findRenderedDOMComponentWithTag(markdownEditor, 'TextArea')
+            );
+
+            expect(markdownEditor.state.draggingOver).toBe(false);
+        });
+
+        describe('valid images, but no onImageDrop prop passed', () => {
+            it('does not call onChange', () => {
+                const markdownEditor = TestUtils.renderIntoDocument(
+                    <MarkdownEditor value={value} onChange={onChangeMock} />
+                );
+
+                expect(onChangeMock.mock.calls.length).toBe(0);
+
+                TestUtils.Simulate.drop(
+                    TestUtils.findRenderedDOMComponentWithTag(markdownEditor, 'TextArea'),
+                    { dataTransfer: { files: validFile } }
+                );
+
+                expect(onChangeMock.mock.calls.length).toBe(0);
+            });
+        });
+
+        describe('onImageDrop prop passed', () => {
+            describe('no files passed', () => {
+                it('does not call onChange or onImageDrop', () => {
+                    const markdownEditor = TestUtils.renderIntoDocument(
+                        <MarkdownEditor
+                            value={value}
+                            onChange={onChangeMock}
+                            onImageDrop={onImageDropMock}
+                        />
+                    );
+
+                    expect(onChangeMock.mock.calls.length).toBe(0);
+                    expect(onImageDropMock.mock.calls.length).toBe(0);
+
+                    TestUtils.Simulate.drop(
+                        TestUtils.findRenderedDOMComponentWithTag(markdownEditor, 'TextArea'),
+                        { dataTransfer: { files: [] } }
+                    );
+
+                    expect(onChangeMock.mock.calls.length).toBe(0);
+                    expect(onImageDropMock.mock.calls.length).toBe(0);
+                });
+            });
+
+            describe('no images passed', () => {
+                it('does not call onChange or onImageDrop', () => {
+                    const markdownEditor = TestUtils.renderIntoDocument(
+                        <MarkdownEditor
+                            value={value}
+                            onChange={onChangeMock}
+                            onImageDrop={onImageDropMock}
+                        />
+                    );
+
+                    expect(onChangeMock.mock.calls.length).toBe(0);
+                    expect(onImageDropMock.mock.calls.length).toBe(0);
+
+                    TestUtils.Simulate.drop(
+                        TestUtils.findRenderedDOMComponentWithTag(markdownEditor, 'TextArea'),
+                        { dataTransfer: { files: invalidFile } }
+                    );
+
+                    expect(onChangeMock.mock.calls.length).toBe(0);
+                    expect(onImageDropMock.mock.calls.length).toBe(0);
+                });
+            });
+
+            describe('invalid response from onImageDrop', () => {
+                describe('no filename', () => {
+                    it('does not call onChange twice', () => {
+                        const markdownEditor = TestUtils.renderIntoDocument(
+                            <MarkdownEditor
+                                value={value}
+                                onChange={onChangeMock}
+                                onImageDrop={onImageDropMock}
+                            />
+                        );
+
+                        expect(onChangeMock.mock.calls.length).toBe(0);
+                        expect(onImageDropMock.mock.calls.length).toBe(0);
+
+                        onImageDropMock.mockReturnValueOnce({ url: 'url' });
+
+                        TestUtils.Simulate.drop(
+                            TestUtils.findRenderedDOMComponentWithTag(markdownEditor, 'TextArea'),
+                            { dataTransfer: { files: validFile } }
+                        );
+
+                        expect(onChangeMock.mock.calls.length).toBe(1);
+                        expect(onChangeMock).toBeCalledWith({ target: { value: '\n![uploading image...]()' } });
+
+                        expect(onImageDropMock.mock.calls.length).toBe(1);
+                        expect(onImageDropMock).toBeCalledWith(validFile[0]);
+                    });
+                });
+
+                describe('no url', () => {
+                    it('does not call onChange twice', () => {
+                        const markdownEditor = TestUtils.renderIntoDocument(
+                            <MarkdownEditor
+                                value={value}
+                                onChange={onChangeMock}
+                                onImageDrop={onImageDropMock}
+                            />
+                        );
+
+                        expect(onChangeMock.mock.calls.length).toBe(0);
+                        expect(onImageDropMock.mock.calls.length).toBe(0);
+
+                        onImageDropMock.mockReturnValueOnce({ filename: 'filename' });
+
+                        TestUtils.Simulate.drop(
+                            TestUtils.findRenderedDOMComponentWithTag(markdownEditor, 'TextArea'),
+                            { dataTransfer: { files: validFile } }
+                        );
+
+                        expect(onChangeMock.mock.calls.length).toBe(1);
+                        expect(onChangeMock).toBeCalledWith({ target: { value: '\n![uploading image...]()' } });
+
+                        expect(onImageDropMock.mock.calls.length).toBe(1);
+                        expect(onImageDropMock).toBeCalledWith(validFile[0]);
+                    });
+                });
+            });
+
+            describe('one image passed', () => {
+                it('calls onChange and onImageDrop', () => {
+                    const markdownEditor = TestUtils.renderIntoDocument(
+                        <MarkdownEditor
+                            value={value}
+                            onChange={onChangeMock}
+                            onImageDrop={onImageDropMock}
+                        />
+                    );
+
+                    expect(onChangeMock.mock.calls.length).toBe(0);
+                    expect(onImageDropMock.mock.calls.length).toBe(0);
+
+                    onImageDropMock.mockReturnValueOnce(uploadedImage);
+
+                    TestUtils.Simulate.drop(
+                        TestUtils.findRenderedDOMComponentWithTag(markdownEditor, 'TextArea'),
+                        { dataTransfer: { files: validFile } }
+                    );
+
+                    expect(onChangeMock.mock.calls.length).toBe(1);
+                    expect(onChangeMock).toBeCalledWith({ target: { value: '\n![uploading image...]()' } });
+
+                    expect(onImageDropMock.mock.calls.length).toBe(1);
+                    expect(onImageDropMock).toBeCalledWith(validFile[0]);
+                });
+            });
+
+            describe('one image passed with event.target.files', () => {
+                it('calls onChange and onImageDrop', () => {
+                    const markdownEditor = TestUtils.renderIntoDocument(
+                        <MarkdownEditor
+                            value={value}
+                            onChange={onChangeMock}
+                            onImageDrop={onImageDropMock}
+                        />
+                    );
+
+                    expect(onChangeMock.mock.calls.length).toBe(0);
+                    expect(onImageDropMock.mock.calls.length).toBe(0);
+
+                    onImageDropMock.mockReturnValueOnce(uploadedImage);
+
+                    TestUtils.Simulate.drop(
+                        TestUtils.findRenderedDOMComponentWithTag(markdownEditor, 'TextArea'),
+                        { target: { files: validFile } }
+                    );
+
+                    expect(onChangeMock.mock.calls.length).toBe(1);
+                    expect(onChangeMock).toBeCalledWith({ target: { value: '\n![uploading image...]()' } });
+
+                    expect(onImageDropMock.mock.calls.length).toBe(1);
+                    expect(onImageDropMock).toBeCalledWith(validFile[0]);
+                });
+            });
+        });
     });
 });
diff --git a/package.json b/package.json
index 2920166..30c3297 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
   },
   "homepage": "https://github.com/InsidersByte/react-markdown-editor#readme",
   "peerDependencies": {
-    "react": "^15.0.0"
+    "react": "^15.0.1"
   },
   "dependencies": {
     "react-markdown-renderer": "^0.1.3",
@@ -41,7 +41,7 @@
   "devDependencies": {
     "autoprefixer": "^6.3.6",
     "babel-cli": "^6.7.5",
-    "babel-core": "^6.7.5",
+    "babel-core": "^6.7.6",
     "babel-jest": "^10.0.1",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.6.0",
@@ -60,9 +60,9 @@
     "mkdirp": "^0.5.1",
     "postcss-cli": "^2.5.1",
     "postcss-loader": "^0.8.2",
-    "react": "^15.0.0",
-    "react-addons-test-utils": "^15.0.0",
-    "react-dom": "^15.0.0",
+    "react": "^15.0.1",
+    "react-addons-test-utils": "^15.0.1",
+    "react-dom": "^15.0.1",
     "rimraf": "^2.5.2",
     "stats-webpack-plugin": "^0.3.1",
     "style-loader": "^0.13.1",
diff --git a/src/index.js b/src/index.js
index 4b38c67..2f60fb3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -32,13 +32,18 @@ class MarkdownEditor extends React.Component {
 
         this.setState({ draggingOver: false });
 
-        if (!this.props.onImageDrop || !this.props.onChange) {
+        if (!this.props.onImageDrop) {
             return;
         }
 
         const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
         const filesArray = [...files];
         const images = filesArray.filter(o => imageType.test(o.type));
+
+        if (images.length === 0) {
+            return;
+        }
+
         const imageFileNames = images.map(o => placeholderTemplate(o.name));
         const imagePlaceholders = imageFileNames.join('\n');