Fixed pasting images not working (#5971)

3 files changed, 17 insertions, 4 deletions

diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx
index 8aa26882b..3dd1ac924 100644
--- a/webapp/components/create_comment.jsx
+++ b/webapp/components/create_comment.jsx
@@ -51,6 +51,7 @@ export default class CreateComment extends React.Component {
         this.handleUploadError = this.handleUploadError.bind(this);
         this.removePreview = this.removePreview.bind(this);
         this.getFileCount = this.getFileCount.bind(this);
+        this.getFileUploadTarget = this.getFileUploadTarget.bind(this);
         this.onPreferenceChange = this.onPreferenceChange.bind(this);
         this.focusTextbox = this.focusTextbox.bind(this);
         this.showPostDeletedModal = this.showPostDeletedModal.bind(this);
@@ -497,6 +498,10 @@ export default class CreateComment extends React.Component {
         return this.state.fileInfos.length + this.state.uploadsInProgress.length;
     }
 
+    getFileUploadTarget() {
+        return this.refs.textbox;
+    }
+
     focusTextbox(keepFocus = false) {
         if (keepFocus || !Utils.isMobile()) {
             this.refs.textbox.focus();
@@ -612,6 +617,7 @@ export default class CreateComment extends React.Component {
                             <FileUpload
                                 ref='fileUpload'
                                 getFileCount={this.getFileCount}
+                                getTarget={this.getFileUploadTarget}
                                 onFileUploadChange={this.handleFileUploadChange}
                                 onUploadStart={this.handleUploadStart}
                                 onFileUpload={this.handleFileUploadComplete}
diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx
index b33e5ea01..4ce6fc8ab 100644
--- a/webapp/components/create_post.jsx
+++ b/webapp/components/create_post.jsx
@@ -56,6 +56,7 @@ export default class CreatePost extends React.Component {
         this.onChange = this.onChange.bind(this);
         this.onPreferenceChange = this.onPreferenceChange.bind(this);
         this.getFileCount = this.getFileCount.bind(this);
+        this.getFileUploadTarget = this.getFileUploadTarget.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
         this.handleBlur = this.handleBlur.bind(this);
         this.sendMessage = this.sendMessage.bind(this);
@@ -456,6 +457,10 @@ export default class CreatePost extends React.Component {
         return draft.fileInfos.length + draft.uploadsInProgress.length;
     }
 
+    getFileUploadTarget() {
+        return this.refs.textbox;
+    }
+
     handleKeyDown(e) {
         if (this.state.ctrlSend && e.keyCode === KeyCodes.ENTER && e.ctrlKey === true) {
             this.postMsgKeyPress(e);
@@ -652,6 +657,7 @@ export default class CreatePost extends React.Component {
                             <FileUpload
                                 ref='fileUpload'
                                 getFileCount={this.getFileCount}
+                                getTarget={this.getFileUploadTarget}
                                 onFileUploadChange={this.handleFileUploadChange}
                                 onUploadStart={this.handleUploadStart}
                                 onFileUpload={this.handleFileUploadComplete}
diff --git a/webapp/components/file_upload.jsx b/webapp/components/file_upload.jsx
index 297095e0a..d97b1ed3b 100644
--- a/webapp/components/file_upload.jsx
+++ b/webapp/components/file_upload.jsx
@@ -211,20 +211,20 @@ class FileUpload extends React.Component {
         // jquery-dragster doesn't provide a function to unregister itself so do it manually
         target.off('dragenter dragleave dragover drop dragster:enter dragster:leave dragster:over dragster:drop');
     }
+
     emojiClick() {
         this.props.onEmojiClick();
     }
+
     pasteUpload(e) {
-        var inputDiv = ReactDOM.findDOMNode(this.refs.input);
         const {formatMessage} = this.props.intl;
 
         if (!e.clipboardData || !e.clipboardData.items) {
             return;
         }
 
-        var textarea = $(inputDiv.parentNode.parentNode).find('.custom-textarea')[0];
-
-        if (textarea !== e.target && !$.contains(textarea, e.target)) {
+        const textarea = ReactDOM.findDOMNode(this.props.getTarget());
+        if (!textarea || !textarea.contains(e.target)) {
             return;
         }
 
@@ -386,6 +386,7 @@ FileUpload.propTypes = {
     intl: intlShape.isRequired,
     onUploadError: React.PropTypes.func,
     getFileCount: React.PropTypes.func,
+    getTarget: React.PropTypes.func.isRequired,
     onClick: React.PropTypes.func,
     onFileUpload: React.PropTypes.func,
     onUploadStart: React.PropTypes.func,