Add support for pasting files into the text box

src/ContentMessages.js

@@ -276,7 +276,7 @@ class ContentMessages {
 
     sendContentToRoom(file, roomId, matrixClient) {
         const content = {
-            body: file.name,
+            body: file.name || 'Attachment',
             info: {
                 size: file.size,
             }
@@ -316,7 +316,7 @@ class ContentMessages {
         }
 
         const upload = {
-            fileName: file.name,
+            fileName: file.name || 'Attachment',
             roomId: roomId,
             total: 0,
             loaded: 0,

src/components/views/rooms/MessageComposer.js

@@ -91,16 +91,17 @@ export default class MessageComposer extends React.Component {
         this.refs.uploadInput.click();
     }
 
-    onUploadFileSelected(ev) {
-        let files = ev.target.files;
+    onUploadFileSelected(files, isPasted) {
+        if (!isPasted)
+            files = files.target.files;
 
         let QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         let TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         let fileList = [];
         for (let i=0; i<files.length; i++) {
             fileList.push(<li key={i}>
-                <TintableSvg key={i} src="img/files.svg" width="16" height="16" /> {files[i].name}
+                <TintableSvg key={i} src="img/files.svg" width="16" height="16" /> {files[i].name || 'Attachment'}
             </li>);
         }
 
@@ -171,7 +172,7 @@ export default class MessageComposer extends React.Component {
     }
 
     onUpArrow() {
-       return this.refs.autocomplete.onUpArrow();
+        return this.refs.autocomplete.onUpArrow();
     }
 
     onDownArrow() {
@@ -293,6 +294,7 @@ export default class MessageComposer extends React.Component {
                     tryComplete={this._tryComplete}
                     onUpArrow={this.onUpArrow}
                     onDownArrow={this.onDownArrow}
+                    onUploadFileSelected={this.onUploadFileSelected}
                     tabComplete={this.props.tabComplete} // used for old messagecomposerinput/tabcomplete
                     onContentChanged={this.onInputContentChanged}
                     onInputStateChanged={this.onInputStateChanged} />,

src/components/views/rooms/MessageComposerInput.js

@@ -83,6 +83,7 @@ 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);
@@ -473,6 +474,10 @@ 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));
@@ -728,6 +733,7 @@ export default class MessageComposerInput extends React.Component {
                             keyBindingFn={MessageComposerInput.getKeyBinding}
                             handleKeyCommand={this.handleKeyCommand}
                             handleReturn={this.handleReturn}
+                            handlePastedFiles={this.handlePastedFiles}
                             stripPastedStyles={!this.state.isRichtextEnabled}
                             onTab={this.onTab}
                             onUpArrow={this.onUpArrow}
@@ -757,6 +763,8 @@ MessageComposerInput.propTypes = {
 
     onDownArrow: React.PropTypes.func,
 
+    onUploadFileSelected: React.PropTypes.func,
+
     // attempts to confirm currently selected completion, returns whether actually confirmed
     tryComplete: React.PropTypes.func,