Get avatar display and uploads working

src/components/views/settings/ChangeAvatar.js

@@ -23,6 +23,8 @@ module.exports = React.createClass({
     propTypes: {
         initialAvatarUrl: React.PropTypes.string,
         room: React.PropTypes.object,
+        // if false, you need to call changeAvatar.onFileSelected yourself.
+        showUploadSection: React.PropTypes.bool
     },
 
     Phases: {
@@ -31,6 +33,12 @@ module.exports = React.createClass({
         Error: "error",
     },
 
+    getDefaultProps: function() {
+        return {
+            showUploadSection: true
+        };
+    },
+
     getInitialState: function() {
         return {
             avatarUrl: this.props.initialAvatarUrl,
@@ -55,7 +63,7 @@ module.exports = React.createClass({
             phase: this.Phases.Uploading
         });
         var self = this;
-        MatrixClientPeg.get().uploadContent(file).then(function(url) {
+        var httpPromise = MatrixClientPeg.get().uploadContent(file).then(function(url) {
             newUrl = url;
             if (self.props.room) {
                 return MatrixClientPeg.get().sendStateEvent(
@@ -67,7 +75,9 @@ module.exports = React.createClass({
             } else {
                 return MatrixClientPeg.get().setAvatarUrl(url);
             }
-        }).done(function() {
+        });
+
+        httpPromise.done(function() {
             self.setState({
                 phase: self.Phases.Display,
                 avatarUrl: MatrixClientPeg.get().mxcUrlToHttp(newUrl)
@@ -78,11 +88,13 @@ module.exports = React.createClass({
             });
             self.onError(error);
         });
+
+        return httpPromise;
     },
 
     onFileSelected: function(ev) {
         this.avatarSet = true;
-        this.setAvatarFromFile(ev.target.files[0]);
+        return this.setAvatarFromFile(ev.target.files[0]);
     },
 
     onError: function(error) {
@@ -106,6 +118,17 @@ module.exports = React.createClass({
             avatarImg = <img src={this.state.avatarUrl} style={style} />;
         }
 
+        var uploadSection;
+        if (this.props.showUploadSection) {
+            uploadSection = (
+                <div className="mx_Dialog_content">
+                    Upload new:
+                    <input type="file" onChange={this.onFileSelected}/>
+                    {this.state.errorText}
+                </div>  
+            );
+        }
+
         switch (this.state.phase) {
             case this.Phases.Display:
             case this.Phases.Error:
@@ -114,11 +137,7 @@ module.exports = React.createClass({
                         <div className="mx_Dialog_content">
                             {avatarImg}
                         </div>
-                        <div className="mx_Dialog_content">
-                            Upload new:
-                            <input type="file" onChange={this.onFileSelected}/>
-                            {this.state.errorText}
-                        </div>    
+                        {uploadSection}
                     </div>
                 );
             case this.Phases.Uploading: