Mostly wire up the send file button, except I can't figure out the js magic to make a file input open the prompt.

This commit is contained in:
David Baker 2015-07-19 20:47:50 -04:00
parent b82d932a51
commit a477c8be4c
2 changed files with 21 additions and 1 deletions

View File

@ -76,6 +76,7 @@ limitations under the License.
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
padding-right: 15px; padding-right: 15px;
cursor: pointer;
} }
.mx_MessageComposer_upload img { .mx_MessageComposer_upload img {

View File

@ -20,13 +20,31 @@ var React = require('react');
var MatrixClientPeg = require("../../../../src/MatrixClientPeg"); var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var MessageComposerController = require("../../../../src/controllers/molecules/MessageComposer"); var MessageComposerController = require("../../../../src/controllers/molecules/MessageComposer");
var ContentMessages = require("../../../../src/ContentMessages");
module.exports = React.createClass({ module.exports = React.createClass({
displayName: 'MessageComposer', displayName: 'MessageComposer',
mixins: [MessageComposerController], mixins: [MessageComposerController],
onUploadClick(ev) {
//this.refs.uploadInput.getDOMNode.
},
onUploadFileSelected: function(ev) {
var files = ev.target.files;
ContentMessages.sendContentToRoom(
files[0], this.props.room.roomId, MatrixClientPeg.get()
).progress(function(ev) {
//console.log("Upload: "+ev.loaded+" / "+ev.total);
}).done(undefined, function() {
// display error message
});
},
render: function() { render: function() {
var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId); var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId);
var uploadInputStyle = {display: 'block'};
return ( return (
<div className="mx_MessageComposer"> <div className="mx_MessageComposer">
<div className="mx_MessageComposer_wrapper"> <div className="mx_MessageComposer_wrapper">
@ -37,8 +55,9 @@ module.exports = React.createClass({
<div className="mx_MessageComposer_input"> <div className="mx_MessageComposer_input">
<textarea ref="textarea" onKeyDown={this.onKeyDown} placeholder="Type a message" /> <textarea ref="textarea" onKeyDown={this.onKeyDown} placeholder="Type a message" />
</div> </div>
<div className="mx_MessageComposer_upload"> <div className="mx_MessageComposer_upload" onClick={this.onUploadClick}>
<img src="img/upload.png" width="32" height="32"/> <img src="img/upload.png" width="32" height="32"/>
<input type="file" style={uploadInputStyle} ref="uploadInput" onChange={this.onUploadFileSelected} />
</div> </div>
</div> </div>
</div> </div>