Merge pull request #892 from matrix-org/rav/pastefiles

Support for pasting files into normal composer

Author: richvdh

src/components/views/rooms/MessageComposer.js

@@ -33,6 +33,7 @@ export default class MessageComposer extends React.Component {
         this.onHangupClick = this.onHangupClick.bind(this);
         this.onUploadClick = this.onUploadClick.bind(this);
         this.onUploadFileSelected = this.onUploadFileSelected.bind(this);
+        this.uploadFiles = this.uploadFiles.bind(this);
         this.onVoiceCallClick = this.onVoiceCallClick.bind(this);
         this.onInputContentChanged = this.onInputContentChanged.bind(this);
         this.onUpArrow = this.onUpArrow.bind(this);
@@ -101,10 +102,11 @@ export default class MessageComposer extends React.Component {
         this.refs.uploadInput.click();
     }
 
-    onUploadFileSelected(files, isPasted) {
-        if (!isPasted)
-            files = files.target.files;
+    onUploadFileSelected(files) {
+        this.uploadFiles(files.target.files);
+    }
 
+    uploadFiles(files) {
         let QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         let TintableSvg = sdk.getComponent("elements.TintableSvg");
 
@@ -310,7 +312,7 @@ export default class MessageComposer extends React.Component {
                     tryComplete={this._tryComplete}
                     onUpArrow={this.onUpArrow}
                     onDownArrow={this.onDownArrow}
-                    onUploadFileSelected={this.onUploadFileSelected}
+                    onFilesPasted={this.uploadFiles}
                     tabComplete={this.props.tabComplete} // used for old messagecomposerinput/tabcomplete
                     onContentChanged={this.onInputContentChanged}
                     onInputStateChanged={this.onInputStateChanged} />,

src/components/views/rooms/MessageComposerInput.js

@@ -84,7 +84,6 @@ export default class MessageComposerInput extends React.Component {
         this.onAction = this.onAction.bind(this);
         this.handleReturn = this.handleReturn.bind(this);
         this.handleKeyCommand = this.handleKeyCommand.bind(this);
-        this.handlePastedFiles = this.handlePastedFiles.bind(this);
         this.onEditorContentChanged = this.onEditorContentChanged.bind(this);
         this.setEditorState = this.setEditorState.bind(this);
         this.onUpArrow = this.onUpArrow.bind(this);
@@ -477,10 +476,6 @@ export default class MessageComposerInput extends React.Component {
         return false;
     }
 
-    handlePastedFiles(files) {
-        this.props.onUploadFileSelected(files, true);
-    }
-
     handleReturn(ev) {
         if (ev.shiftKey) {
             this.onEditorContentChanged(RichUtils.insertSoftNewline(this.state.editorState));
@@ -734,7 +729,7 @@ export default class MessageComposerInput extends React.Component {
                             keyBindingFn={MessageComposerInput.getKeyBinding}
                             handleKeyCommand={this.handleKeyCommand}
                             handleReturn={this.handleReturn}
-                            handlePastedFiles={this.handlePastedFiles}
+                            handlePastedFiles={this.props.onFilesPasted}
                             stripPastedStyles={!this.state.isRichtextEnabled}
                             onTab={this.onTab}
                             onUpArrow={this.onUpArrow}
@@ -764,7 +759,7 @@ MessageComposerInput.propTypes = {
 
     onDownArrow: React.PropTypes.func,
 
-    onUploadFileSelected: React.PropTypes.func,
+    onFilesPasted: React.PropTypes.func,
 
     // attempts to confirm currently selected completion, returns whether actually confirmed
     tryComplete: React.PropTypes.func,

src/components/views/rooms/MessageComposerInputOld.js

@@ -69,6 +69,9 @@ export default React.createClass({
 
         // The text to use a placeholder in the input box
         placeholder: React.PropTypes.string.isRequired,
+
+        // callback to handle files pasted into the composer
+        onFilesPasted: React.PropTypes.func,
     },
 
     componentWillMount: function() {
@@ -439,10 +442,27 @@ export default React.createClass({
         this.refs.textarea.focus();
     },
 
+    _onPaste: function(ev) {
+        const items = ev.clipboardData.items;
+        const files = [];
+        for (const item of items) {
+            if (item.kind === 'file') {
+                files.push(item.getAsFile());
+            }
+        }
+        if (files.length && this.props.onFilesPasted) {
+            this.props.onFilesPasted(files);
+            return true;
+        }
+        return false;
+    },
+
     render: function() {
         return (
             <div className="mx_MessageComposer_input" onClick={ this.onInputClick }>
-                <textarea autoFocus ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder={this.props.placeholder} />
+                <textarea autoFocus ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder={this.props.placeholder}
+                    onPaste={this._onPaste}
+                />
             </div>
         );
     }