15 files changed, 893 insertions, 705 deletions

diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx
index 88c01c586..78e06c532 100644
--- a/web/react/components/create_comment.jsx
+++ b/web/react/components/create_comment.jsx
@@ -18,20 +18,24 @@ module.exports = React.createClass({
     handleSubmit: function(e) {
         e.preventDefault();
 
-        if (this.state.uploadsInProgress > 0) return;
+        if (this.state.uploadsInProgress.length > 0) {
+            return;
+        }
 
-        if (this.state.submitting) return;
+        if (this.state.submitting) {
+            return;
+        }
 
-        var post = {}
+        var post = {};
         post.filenames = [];
-
         post.message = this.state.messageText;
+
         if (post.message.trim().length === 0 && this.state.previews.length === 0) {
             return;
         }
 
         if (post.message.length > Constants.CHARACTER_LIMIT) {
-            this.setState({ post_error: 'Comment length must be less than '+Constants.CHARACTER_LIMIT+' characters.' });
+            this.setState({postError: 'Comment length must be less than ' + Constants.CHARACTER_LIMIT + ' characters.'});
             return;
         }
 
@@ -40,163 +44,154 @@ module.exports = React.createClass({
         post.parent_id = this.props.parentId;
         post.filenames = this.state.previews;
 
-        this.setState({ submitting: true, limit_error: null });
+        this.setState({submitting: true, serverError: null});
 
         client.createPost(post, ChannelStore.getCurrent(),
             function(data) {
                 PostStore.storeCommentDraft(this.props.rootId, null);
-                this.setState({ messageText: '', submitting: false, post_error: null, server_error: null });
+                this.setState({messageText: '', submitting: false, postError: null, serverError: null});
                 this.clearPreviews();
                 AsyncClient.getPosts(true, this.props.channelId);
 
                 var channel = ChannelStore.get(this.props.channelId);
                 var member = ChannelStore.getMember(this.props.channelId);
                 member.msg_count = channel.total_msg_count;
-                member.last_viewed_at = (new Date).getTime();
+                member.last_viewed_at = Date.now();
                 ChannelStore.setChannelMember(member);
-
             }.bind(this),
             function(err) {
                 var state = {};
-                state.server_error = err.message;
+                state.serverError = err.message;
                 state.submitting = false;
 
-                if (err.message === "Invalid RootId parameter") {
-                    if ($('#post_deleted').length > 0) $('#post_deleted').modal('show');
-                }
-                else {
+                if (err.message === 'Invalid RootId parameter') {
+                    if ($('#post_deleted').length > 0) {
+                        $('#post_deleted').modal('show');
+                    }
+                } else {
                     this.setState(state);
                 }
             }.bind(this)
         );
     },
     commentMsgKeyPress: function(e) {
-        if (e.which == 13 && !e.shiftKey && !e.altKey) {
+        if (e.which === 13 && !e.shiftKey && !e.altKey) {
             e.preventDefault();
             this.refs.textbox.getDOMNode().blur();
             this.handleSubmit(e);
         }
 
-        var t = new Date().getTime();
+        var t = Date.now();
         if ((t - this.lastTime) > 5000) {
-            SocketStore.sendMessage({channel_id: this.props.channelId, action: "typing", props: {"parent_id": this.props.rootId} });
+            SocketStore.sendMessage({channel_id: this.props.channelId, action: 'typing', props: {'parent_id': this.props.rootId}});
             this.lastTime = t;
         }
     },
     handleUserInput: function(messageText) {
         var draft = PostStore.getCommentDraft(this.props.rootId);
-        if (!draft) {
-            draft = { previews: [], uploadsInProgress: 0};
-        }
         draft.message = messageText;
         PostStore.storeCommentDraft(this.props.rootId, draft);
 
-        $(".post-right__scroll").scrollTop($(".post-right__scroll")[0].scrollHeight);
-        $(".post-right__scroll").perfectScrollbar('update');
+        $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight);
+        $('.post-right__scroll').perfectScrollbar('update');
         this.setState({messageText: messageText});
     },
-    handleFileUpload: function(newPreviews) {
+    handleUploadStart: function(clientIds, channelId) {
         var draft = PostStore.getCommentDraft(this.props.rootId);
-        if (!draft) {
-            draft = { message: '', uploadsInProgress: 0, previews: []}
-        }
 
-        $(".post-right__scroll").scrollTop($(".post-right__scroll")[0].scrollHeight);
-        $(".post-right__scroll").perfectScrollbar('update');
-        var previews = this.state.previews.concat(newPreviews);
-        var num = this.state.uploadsInProgress;
+        draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(clientIds);
+        PostStore.storeCommentDraft(this.props.rootId, draft);
 
-        draft.previews = previews;
-        draft.uploadsInProgress = num-1;
+        this.setState({uploadsInProgress: draft['uploadsInProgress']});
+    },
+    handleFileUploadComplete: function(filenames, clientIds, channelId) {
+        var draft = PostStore.getCommentDraft(this.props.rootId);
+
+        // remove each finished file from uploads
+        for (var i = 0; i < clientIds.length; i++) {
+            var index = draft['uploadsInProgress'].indexOf(clientIds[i]);
+
+            if (index !== -1) {
+                draft['uploadsInProgress'].splice(index, 1);
+            }
+        }
+
+        draft['previews'] = draft['previews'].concat(filenames);
         PostStore.storeCommentDraft(this.props.rootId, draft);
 
-        this.setState({previews: previews, uploadsInProgress: num-1});
+        this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']});
     },
-    handleUploadError: function(err) {
-        this.setState({ server_error: err });
+    handleUploadError: function(err, clientId) {
+        var draft = PostStore.getCommentDraft(this.props.rootId);
+
+        var index = draft['uploadsInProgress'].indexOf(clientId);
+        if (index !== -1) {
+            draft['uploadsInProgress'].splice(index, 1);
+        }
+
+        PostStore.storeCommentDraft(this.props.rootId, draft);
+
+        this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err});
     },
     clearPreviews: function() {
         this.setState({previews: []});
     },
-    removePreview: function(filename) {
+    removePreview: function(id) {
         var previews = this.state.previews;
-        for (var i = 0; i < previews.length; i++) {
-            if (previews[i] === filename) {
-                previews.splice(i, 1);
-                break;
+        var uploadsInProgress = this.state.uploadsInProgress;
+
+        // id can either be the path of an uploaded file or the client id of an in progress upload
+        var index = previews.indexOf(id);
+        if (index !== -1) {
+            previews.splice(index, 1);
+        } else {
+            index = uploadsInProgress.indexOf(id);
+
+            if (index !== -1) {
+                uploadsInProgress.splice(index, 1);
+                this.refs.fileUpload.cancelUpload(id);
             }
         }
 
-        var draft = PostStore.getCommentDraft();
-        if (!draft) {
-            draft = { message: '', uploadsInProgress: 0};
-        }
+        var draft = PostStore.getCommentDraft(this.props.rootId);
         draft.previews = previews;
-        PostStore.storeCommentDraft(draft);
+        draft.uploadsInProgress = uploadsInProgress;
+        PostStore.storeCommentDraft(this.props.rootId, draft);
 
-        this.setState({previews: previews});
+        this.setState({previews: previews, uploadsInProgress: uploadsInProgress});
     },
     getInitialState: function() {
         PostStore.clearCommentDraftUploads();
 
         var draft = PostStore.getCommentDraft(this.props.rootId);
-        messageText = '';
-        uploadsInProgress = 0;
-        previews = [];
-        if (draft) {
-            messageText = draft.message;
-            uploadsInProgress = draft.uploadsInProgress;
-            previews = draft.previews
-        }
-        return { messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews, submitting: false };
+        return {messageText: draft['message'], uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews'], submitting: false};
     },
     componentWillReceiveProps: function(newProps) {
-        if(newProps.rootId !== this.props.rootId) {
+        if (newProps.rootId !== this.props.rootId) {
             var draft = PostStore.getCommentDraft(newProps.rootId);
-            messageText = '';
-            uploadsInProgress = 0;
-            previews = [];
-            if (draft) {
-                messageText = draft.message;
-                uploadsInProgress = draft.uploadsInProgress;
-                previews = draft.previews
-            }
-            this.setState({ messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews });
+            this.setState({messageText: draft['message'], uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']});
         }
     },
-    setUploads: function(val) {
-        var oldInProgress = this.state.uploadsInProgress
-        var newInProgress = oldInProgress + val;
-
-        if (newInProgress + this.state.previews.length > Constants.MAX_UPLOAD_FILES) {
-            newInProgress = Constants.MAX_UPLOAD_FILES - this.state.previews.length;
-            this.setState({limit_error: "Uploads limited to " + Constants.MAX_UPLOAD_FILES + " files maximum. Please use additional comments for more files."});
-        } else {
-            this.setState({limit_error: null});
-        }
-
-        var numToUpload = newInProgress - oldInProgress;
-        if (numToUpload <= 0) return 0;
-
-        var draft = PostStore.getCommentDraft(this.props.rootId);
-        if (!draft) {
-            draft = { message: '', previews: []};
-        }
-        draft.uploadsInProgress = newInProgress;
-        PostStore.storeCommentDraft(this.props.rootId, draft);
-
-        this.setState({uploadsInProgress: newInProgress});
-
-        return numToUpload;
+    getFileCount: function(channelId) {
+        return this.state.previews.length + this.state.uploadsInProgress.length;
     },
     render: function() {
+        var serverError = null;
+        if (this.state.serverError) {
+            serverError = (
+                <div className='form-group has-error'>
+                    <label className='control-label'>{this.state.serverError}</label>
+                </div>
+            );
+        }
 
-        var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null;
-        var post_error = this.state.post_error ? <label className='control-label'>{this.state.post_error}</label> : null;
-        var limit_error = this.state.limit_error ? <div className='has-error'><label className='control-label'>{this.state.limit_error}</label></div> : null;
+        var postError = null;
+        if (this.state.postError) {
+            postError = <label className='control-label'>{this.state.postError}</label>;
+        }
 
-        var preview = <div/>;
-        if (this.state.previews.length > 0 || this.state.uploadsInProgress > 0) {
+        var preview = null;
+        if (this.state.previews.length > 0 || this.state.uploadsInProgress.length > 0) {
             preview = (
                 <FilePreview
                     files={this.state.previews}
@@ -205,32 +200,38 @@ module.exports = React.createClass({
             );
         }
 
+        var postFooterClassName = 'post-create-footer';
+        if (postError) {
+            postFooterClassName += ' has-error';
+        }
+
         return (
             <form onSubmit={this.handleSubmit}>
-                <div className="post-create">
-                    <div id={this.props.rootId} className="post-create-body comment-create-body">
+                <div className='post-create'>
+                    <div id={this.props.rootId} className='post-create-body comment-create-body'>
                         <Textbox
                             onUserInput={this.handleUserInput}
                             onKeyPress={this.commentMsgKeyPress}
                             messageText={this.state.messageText}
-                            createMessage="Add a comment..."
-                            initialText=""
-                            id="reply_textbox"
-                            ref="textbox" />
+                            createMessage='Add a comment...'
+                            initialText=''
+                            id='reply_textbox'
+                            ref='textbox' />
                         <FileUpload
-                            setUploads={this.setUploads}
-                            onFileUpload={this.handleFileUpload}
+                            ref='fileUpload'
+                            getFileCount={this.getFileCount}
+                            onUploadStart={this.handleUploadStart}
+                            onFileUpload={this.handleFileUploadComplete}
                             onUploadError={this.handleUploadError} />
                     </div>
                     <MsgTyping channelId={this.props.channelId} parentId={this.props.rootId}  />
-                    <div className={post_error ? 'has-error' : 'post-create-footer'}>
-                        <input type="button" className="btn btn-primary comment-btn pull-right" value="Add Comment" onClick={this.handleSubmit} />
-                        { post_error }
-                        { server_error }
-                        { limit_error }
+                    <div className={postFooterClassName}>
+                        <input type='button' className='btn btn-primary comment-btn pull-right' value='Add Comment' onClick={this.handleSubmit} />
+                        {postError}
+                        {serverError}
                     </div>
                 </div>
-                { preview }
+                {preview}
             </form>
         );
     }
diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx
index 76286eb88..9ca1d5388 100644
--- a/web/react/components/create_post.jsx
+++ b/web/react/components/create_post.jsx
@@ -22,13 +22,12 @@ module.exports = React.createClass({
     handleSubmit: function(e) {
         e.preventDefault();
 
-        if (this.state.uploadsInProgress > 0) return;
-
-        if (this.state.submitting) return;
+        if (this.state.uploadsInProgress.length > 0 || this.state.submitting) {
+            return;
+        }
 
         var post = {};
         post.filenames = [];
-
         post.message = this.state.messageText;
 
         if (post.message.trim().length === 0 && this.state.previews.length === 0) {
@@ -36,55 +35,52 @@ module.exports = React.createClass({
         }
 
         if (post.message.length > Constants.CHARACTER_LIMIT) {
-            this.setState({ post_error: 'Post length must be less than '+Constants.CHARACTER_LIMIT+' characters.' });
+            this.setState({postError: 'Post length must be less than ' + Constants.CHARACTER_LIMIT + ' characters.'});
             return;
         }
 
-        this.setState({ submitting: true, limit_error: null });
-
-        var user_id = UserStore.getCurrentId();
+        this.setState({submitting: true, serverError: null});
 
-        if (post.message.indexOf("/") == 0) {
+        if (post.message.indexOf('/') === 0) {
             client.executeCommand(
-                this.state.channel_id,
+                this.state.channelId,
                 post.message,
                 false,
                 function(data) {
                     PostStore.storeDraft(data.channel_id, null);
-                    this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null, limit_error: null });
+                    this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null});
 
                     if (data.goto_location.length > 0) {
                         window.location.href = data.goto_location;
                     }
                 }.bind(this),
-                function(err){
-                    var state = {}
-                    state.server_error = err.message;
+                function(err) {
+                    var state = {};
+                    state.serverError = err.message;
                     state.submitting = false;
                     this.setState(state);
                 }.bind(this)
             );
         } else {
-            post.channel_id = this.state.channel_id;
+            post.channel_id = this.state.channelId;
             post.filenames = this.state.previews;
 
             client.createPost(post, ChannelStore.getCurrent(),
                 function(data) {
                     PostStore.storeDraft(data.channel_id, null);
-                    this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null, limit_error: null });
+                    this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null});
                     this.resizePostHolder();
                     AsyncClient.getPosts(true);
 
-                    var channel = ChannelStore.get(this.state.channel_id);
-                    var member = ChannelStore.getMember(this.state.channel_id);
+                    var channel = ChannelStore.get(this.state.channelId);
+                    var member = ChannelStore.getMember(this.state.channelId);
                     member.msg_count = channel.total_msg_count;
-                    member.last_viewed_at = (new Date).getTime();
+                    member.last_viewed_at = Date.now();
                     ChannelStore.setChannelMember(member);
-
                 }.bind(this),
                 function(err) {
-                    var state = {}
-                    state.server_error = err.message;
+                    var state = {};
+                    state.serverError = err.message;
 
                     state.submitting = false;
                     this.setState(state);
@@ -92,21 +88,21 @@ module.exports = React.createClass({
             );
         }
 
-        $(".post-list-holder-by-time").perfectScrollbar('update');
+        $('.post-list-holder-by-time').perfectScrollbar('update');
     },
     componentDidUpdate: function() {
         this.resizePostHolder();
     },
     postMsgKeyPress: function(e) {
-        if (e.which == 13 && !e.shiftKey && !e.altKey) {
+        if (e.which === 13 && !e.shiftKey && !e.altKey) {
             e.preventDefault();
             this.refs.textbox.getDOMNode().blur();
             this.handleSubmit(e);
         }
 
-        var t = new Date().getTime();
+        var t = Date.now();
         if ((t - this.lastTime) > 5000) {
-            SocketStore.sendMessage({channel_id: this.state.channel_id, action: "typing", props: {"parent_id": ""}, state: {} });
+            SocketStore.sendMessage({channelId: this.state.channelId, action: 'typing', props: {'parent_id': ''}, state: {}});
             this.lastTime = t;
         }
     },
@@ -115,64 +111,74 @@ module.exports = React.createClass({
         this.setState({messageText: messageText});
 
         var draft = PostStore.getCurrentDraft();
-        if (!draft) {
-            draft = {}
-            draft['previews'] = [];
-            draft['uploadsInProgress'] = 0;
-        }
         draft['message'] = messageText;
         PostStore.storeCurrentDraft(draft);
     },
     resizePostHolder: function() {
         var height = $(window).height() - $(this.refs.topDiv.getDOMNode()).height() - $('#error_bar').outerHeight() - 50;
-        $(".post-list-holder-by-time").css("height", height + "px");
+        $('.post-list-holder-by-time').css('height', height + 'px');
         $(window).trigger('resize');
     },
-    handleFileUpload: function(newPreviews, channel_id) {
-        var draft = PostStore.getDraft(channel_id);
-        if (!draft) {
-            draft = {}
-            draft['message'] = '';
-            draft['uploadsInProgress'] = 0;
-            draft['previews'] = [];
-        }
+    handleUploadStart: function(clientIds, channelId) {
+        var draft = PostStore.getDraft(channelId);
+
+        draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(clientIds);
+        PostStore.storeDraft(channelId, draft);
 
-        if (channel_id === this.state.channel_id) {
-            var num = this.state.uploadsInProgress;
-            var oldPreviews = this.state.previews;
-            var previews = oldPreviews.concat(newPreviews);
+        this.setState({uploadsInProgress: draft['uploadsInProgress']});
+    },
+    handleFileUploadComplete: function(filenames, clientIds, channelId) {
+        var draft = PostStore.getDraft(channelId);
 
-            draft['previews'] = previews;
-            draft['uploadsInProgress'] = num-1;
-            PostStore.storeCurrentDraft(draft);
+        // remove each finished file from uploads
+        for (var i = 0; i < clientIds.length; i++) {
+            var index = draft['uploadsInProgress'].indexOf(clientIds[i]);
 
-            this.setState({previews: previews, uploadsInProgress:num-1});
-        } else {
-            draft['previews'] = draft['previews'].concat(newPreviews);
-            draft['uploadsInProgress'] = draft['uploadsInProgress'] > 0 ? draft['uploadsInProgress'] - 1 : 0;
-            PostStore.storeDraft(channel_id, draft);
+            if (index !== -1) {
+                draft['uploadsInProgress'].splice(index, 1);
+            }
         }
+
+        draft['previews'] = draft['previews'].concat(filenames);
+        PostStore.storeDraft(channelId, draft);
+
+        this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']});
     },
-    handleUploadError: function(err) {
-        this.setState({ server_error: err });
+    handleUploadError: function(err, clientId) {
+        var draft = PostStore.getDraft(this.state.channelId);
+
+        var index = draft['uploadsInProgress'].indexOf(clientId);
+        if (index !== -1) {
+            draft['uploadsInProgress'].splice(index, 1);
+        }
+
+        PostStore.storeDraft(this.state.channelId, draft);
+
+        this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err});
     },
-    removePreview: function(filename) {
+    removePreview: function(id) {
         var previews = this.state.previews;
-        for (var i = 0; i < previews.length; i++) {
-            if (previews[i] === filename) {
-                previews.splice(i, 1);
-                break;
+        var uploadsInProgress = this.state.uploadsInProgress;
+
+        // id can either be the path of an uploaded file or the client id of an in progress upload
+        var index = previews.indexOf(id);
+        if (index !== -1) {
+            previews.splice(index, 1);
+        } else {
+            index = uploadsInProgress.indexOf(id);
+
+            if (index !== -1) {
+                uploadsInProgress.splice(index, 1);
+                this.refs.fileUpload.cancelUpload(id);
             }
         }
+
         var draft = PostStore.getCurrentDraft();
-        if (!draft) {
-            draft = {}
-            draft['message'] = '';
-            draft['uploadsInProgress'] = 0;
-        }
         draft['previews'] = previews;
+        draft['uploadsInProgress'] = uploadsInProgress;
         PostStore.storeCurrentDraft(draft);
-        this.setState({previews: previews});
+
+        this.setState({previews: previews, uploadsInProgress: uploadsInProgress});
     },
     componentDidMount: function() {
         ChannelStore.addChangeListener(this._onChange);
@@ -182,66 +188,50 @@ module.exports = React.createClass({
         ChannelStore.removeChangeListener(this._onChange);
     },
     _onChange: function() {
-        var channel_id = ChannelStore.getCurrentId();
-        if (this.state.channel_id != channel_id) {
+        var channelId = ChannelStore.getCurrentId();
+        if (this.state.channelId !== channelId) {
             var draft = PostStore.getCurrentDraft();
-            var previews = [];
-            var messageText = '';
-            var uploadsInProgress = 0;
-            if (draft) {
-                previews = draft['previews'];
-                messageText = draft['message'];
-                uploadsInProgress = draft['uploadsInProgress'];
-            }
-            this.setState({ channel_id: channel_id, messageText: messageText, initialText: messageText, submitting: false, limit_error: null, server_error: null, post_error: null, previews: previews, uploadsInProgress: uploadsInProgress });
+            this.setState({
+                channelId: channelId, messageText: draft['message'], initialText: draft['message'], submitting: false,
+                serverError: null, postError: null, previews: draft['previews'], uploadsInProgress: draft['uploadsInProgress']
+            });
         }
     },
     getInitialState: function() {
         PostStore.clearDraftUploads();
 
         var draft = PostStore.getCurrentDraft();
-        var previews = [];
-        var messageText = '';
-        if (draft) {
-            previews = draft['previews'];
-            messageText = draft['message'];
-        }
-        return { channel_id: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: 0, previews: previews, submitting: false, initialText: messageText };
+        return {
+            channelId: ChannelStore.getCurrentId(), messageText: draft['message'], uploadsInProgress: draft['uploadsInProgress'],
+            previews: draft['previews'], submitting: false, initialText: draft['message']
+        };
     },
-    setUploads: function(val) {
-        var oldInProgress = this.state.uploadsInProgress
-        var newInProgress = oldInProgress + val;
-
-        if (newInProgress + this.state.previews.length > Constants.MAX_UPLOAD_FILES) {
-            newInProgress = Constants.MAX_UPLOAD_FILES - this.state.previews.length;
-            this.setState({limit_error: "Uploads limited to " + Constants.MAX_UPLOAD_FILES + " files maximum. Please use additional posts for more files."});
+    getFileCount: function(channelId) {
+        if (channelId === this.state.channelId) {
+            return this.state.previews.length + this.state.uploadsInProgress.length;
         } else {
-            this.setState({limit_error: null});
-        }
-
-        var numToUpload = newInProgress - oldInProgress;
-        if (numToUpload <= 0) return 0;
+            var draft = PostStore.getDraft(channelId);
 
-        var draft = PostStore.getCurrentDraft();
-        if (!draft) {
-            draft = {}
-            draft['message'] = '';
-            draft['previews'] = [];
+            return draft['previews'].length + draft['uploadsInProgress'].length;
         }
-        draft['uploadsInProgress'] = newInProgress;
-        PostStore.storeCurrentDraft(draft);
-        this.setState({uploadsInProgress: newInProgress});
-
-        return numToUpload;
     },
     render: function() {
+        var serverError = null;
+        if (this.state.serverError) {
+            serverError = (
+                <div className='has-error'>
+                    <label className='control-label'>{this.state.serverError}</label>
+                </div>
+            );
+        }
 
-        var server_error = this.state.server_error ? <div className='has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null;
-        var post_error = this.state.post_error ? <label className='control-label'>{this.state.post_error}</label> : null;
-        var limit_error = this.state.limit_error ? <div className='has-error'><label className='control-label'>{this.state.limit_error}</label></div> : null;
+        var postError = null;
+        if (this.state.postError) {
+            postError = <label className='control-label'>{this.state.postError}</label>;
+        }
 
-        var preview = <div/>;
-        if (this.state.previews.length > 0 || this.state.uploadsInProgress > 0) {
+        var preview = null;
+        if (this.state.previews.length > 0 || this.state.uploadsInProgress.length > 0) {
             preview = (
                 <FilePreview
                     files={this.state.previews}
@@ -250,29 +240,35 @@ module.exports = React.createClass({
             );
         }
 
+        var postFooterClassName = 'post-create-footer';
+        if (postError) {
+            postFooterClassName += ' has-error';
+        }
+
         return (
-            <form id="create_post" ref="topDiv" role="form" onSubmit={this.handleSubmit}>
-                <div className="post-create">
-                    <div className="post-create-body">
+            <form id='create_post' ref='topDiv' role='form' onSubmit={this.handleSubmit}>
+                <div className='post-create'>
+                    <div className='post-create-body'>
                         <Textbox
                             onUserInput={this.handleUserInput}
                             onKeyPress={this.postMsgKeyPress}
                             messageText={this.state.messageText}
-                            createMessage="Write a message..."
-                            channelId={this.state.channel_id}
-                            id="post_textbox"
-                            ref="textbox" />
+                            createMessage='Write a message...'
+                            channelId={this.state.channelId}
+                            id='post_textbox'
+                            ref='textbox' />
                         <FileUpload
-                            setUploads={this.setUploads}
-                            onFileUpload={this.handleFileUpload}
+                            ref='fileUpload'
+                            getFileCount={this.getFileCount}
+                            onUploadStart={this.handleUploadStart}
+                            onFileUpload={this.handleFileUploadComplete}
                             onUploadError={this.handleUploadError} />
                     </div>
-                    <div className={post_error ? 'post-create-footer has-error' : 'post-create-footer'}>
-                        { post_error }
-                        { server_error }
-                        { limit_error }
-                        { preview }
-                        <MsgTyping channelId={this.state.channel_id} parentId=""/>
+                    <div className={postFooterClassName}>
+                        {postError}
+                        {serverError}
+                        {preview}
+                        <MsgTyping channelId={this.state.channelId} parentId=''/>
                     </div>
                 </div>
             </form>
diff --git a/web/react/components/file_preview.jsx b/web/react/components/file_preview.jsx
index 7c1db3e10..d1b2f734a 100644
--- a/web/react/components/file_preview.jsx
+++ b/web/react/components/file_preview.jsx
@@ -10,7 +10,12 @@ var Constants = require('../utils/constants.jsx');
 module.exports = React.createClass({
     handleRemove: function(e) {
         var previewDiv = e.target.parentNode.parentNode;
-        this.props.onRemove(previewDiv.getAttribute('data-filename'));
+
+        if (previewDiv.hasAttribute('data-filename')) {
+            this.props.onRemove(previewDiv.getAttribute('data-filename'));
+        } else if (previewDiv.hasAttribute('data-client-id')) {
+            this.props.onRemove(previewDiv.getAttribute('data-client-id'));
+        }
     },
     render: function() {
         var previews = [];
@@ -43,13 +48,14 @@ module.exports = React.createClass({
             }
         }.bind(this));
 
-        for (var i = 0; i < this.props.uploadsInProgress; i++) {
+        this.props.uploadsInProgress.forEach(function(clientId) {
             previews.push(
-                <div className="preview-div">
+                <div className="preview-div" data-client-id={clientId}>
                     <img className="spinner" src="/static/images/load.gif"/>
+                    <a className="remove-preview" onClick={this.handleRemove}><i className="glyphicon glyphicon-remove"/></a>
                 </div>
             );
-        }
+        }.bind(this));
 
         return (
             <div className="preview-container">
diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx
index aee089dbc..b90fa4fd3 100644
--- a/web/react/components/file_upload.jsx
+++ b/web/react/components/file_upload.jsx
@@ -4,12 +4,18 @@
 var client = require('../utils/client.jsx');
 var Constants = require('../utils/constants.jsx');
 var ChannelStore = require('../stores/channel_store.jsx');
+var utils = require('../utils/utils.jsx');
 
 module.exports = React.createClass({
+    getInitialState: function() {
+        return {requests: {}};
+    },
     handleChange: function() {
         var element = $(this.refs.fileInput.getDOMNode());
         var files = element.prop('files');
 
+        var channelId = ChannelStore.getCurrentId();
+
         this.props.onUploadError(null);
 
         // This looks redundant, but must be done this way due to
@@ -21,50 +27,67 @@ module.exports = React.createClass({
             }
         }
 
-        var numToUpload = this.props.setUploads(numFiles);
+        var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - this.props.getFileCount(channelId), numFiles);
+
+        if (numFiles > numToUpload) {
+            this.props.onUploadError('Uploads limited to ' + Constants.MAX_UPLOAD_FILES + ' files maximum. Please use additional posts for more files.');
+        }
 
         for (var i = 0; i < files.length && i < numToUpload; i++) {
             if (files[i].size > Constants.MAX_FILE_SIZE) {
-                this.props.onUploadError("Files must be no more than " + Constants.MAX_FILE_SIZE/1000000 + " MB");
+                this.props.onUploadError('Files must be no more than ' + Constants.MAX_FILE_SIZE / 1000000 + ' MB');
                 continue;
             }
 
-            var channel_id = ChannelStore.getCurrentId();
+            // generate a unique id that can be used by other components to refer back to this file upload
+            var clientId = utils.generateId();
 
             // Prepare data to be uploaded.
-            formData = new FormData();
-            formData.append('channel_id', channel_id);
+            var formData = new FormData();
+            formData.append('channel_id', channelId);
             formData.append('files', files[i], files[i].name);
+            formData.append('client_ids', clientId);
 
-            client.uploadFile(formData,
+            var request = client.uploadFile(formData,
                 function(data) {
-                    parsedData = $.parseJSON(data);
-                    this.props.onFileUpload(parsedData['filenames'], channel_id);
+                    var parsedData = $.parseJSON(data);
+                    this.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channelId);
+
+                    var requests = this.state.requests;
+                    for (var i = 0; i < parsedData['client_ids'].length; i++) {
+                        delete requests[parsedData['client_ids'][i]];
+                    }
+                    this.setState({requests: requests});
                 }.bind(this),
                 function(err) {
-                    this.props.setUploads(-1);
-                    this.props.onUploadError(err);
+                    this.props.onUploadError(err, clientId);
                 }.bind(this)
             );
+
+            var requests = this.state.requests;
+            requests[clientId] = request;
+            this.setState({requests: requests});
+
+            this.props.onUploadStart([clientId], channelId);
         }
 
         // clear file input for all modern browsers
-        try{
+        try {
             element[0].value = '';
-            if(element.value){
-                element[0].type = "text";
-                element[0].type = "file";
+            if (element.value) {
+                element[0].type = 'text';
+                element[0].type = 'file';
             }
-        }catch(e){}
+        } catch(e) {}
     },
     componentDidMount: function() {
         var inputDiv = this.refs.input.getDOMNode();
         var self = this;
 
-        document.addEventListener("paste", function(e) {
+        document.addEventListener('paste', function(e) {
             var textarea = $(inputDiv.parentNode.parentNode).find('.custom-textarea')[0];
 
-            if (textarea != e.target && !$.contains(textarea,e.target)) {
+            if (textarea !== e.target && !$.contains(textarea, e.target)) {
                 return;
             }
 
@@ -76,54 +99,110 @@ module.exports = React.createClass({
             var numItems = 0;
             if (items) {
                 for (var i = 0; i < items.length; i++) {
-                    if (items[i].type.indexOf("image") !== -1) {
+                    if (items[i].type.indexOf('image') !== -1) {
+                        var ext = items[i].type.split('/')[1].toLowerCase();
+                        if (ext === 'jpeg') {
+                            ext = 'jpg';
+                        }
 
-                        ext = items[i].type.split("/")[1].toLowerCase();
-                        ext = ext == 'jpeg' ? 'jpg' : ext;
+                        if (Constants.IMAGE_TYPES.indexOf(ext) < 0) {
+                            continue;
+                        }
 
-                        if (Constants.IMAGE_TYPES.indexOf(ext) < 0) return;
-
-                        numItems++
+                        numItems++;
                     }
                 }
 
-                var numToUpload = self.props.setUploads(numItems);
+                var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - self.props.getFileCount(channelId), numItems);
+
+                if (numItems > numToUpload) {
+                    self.props.onUploadError('Uploads limited to ' + Constants.MAX_UPLOAD_FILES + ' files maximum. Please use additional posts for more files.');
+                }
 
                 for (var i = 0; i < items.length && i < numToUpload; i++) {
-                    if (items[i].type.indexOf("image") !== -1) {
+                    if (items[i].type.indexOf('image') !== -1) {
                         var file = items[i].getAsFile();
 
-                        ext = items[i].type.split("/")[1].toLowerCase();
-                        ext = ext == 'jpeg' ? 'jpg' : ext;
+                        var ext = items[i].type.split('/')[1].toLowerCase();
+                        if (ext === 'jpeg') {
+                            ext = 'jpg';
+                        }
 
-                        if (Constants.IMAGE_TYPES.indexOf(ext) < 0) return;
+                        if (Constants.IMAGE_TYPES.indexOf(ext) < 0) {
+                            continue;
+                        }
 
-                        var channel_id = ChannelStore.getCurrentId();
+                        var channelId = ChannelStore.getCurrentId();
 
-                        formData = new FormData();
-                        formData.append('channel_id', channel_id);
-                        var d = new Date();
-                        var hour = d.getHours() < 10 ? "0" + d.getHours() : String(d.getHours());
-                        var min = d.getMinutes() < 10 ? "0" + d.getMinutes() : String(d.getMinutes());
-                        formData.append('files', file, "Image Pasted at "+d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate()+" "+hour+"-"+min+"." + ext);
+                        // generate a unique id that can be used by other components to refer back to this file upload
+                        var clientId = utils.generateId();
+
+                        var formData = new FormData();
+                        formData.append('channel_id', channelId);
 
-                        client.uploadFile(formData,
+                        var d = new Date();
+                        var hour;
+                        if (d.getHours() < 10) {
+                            hour = '0' + d.getHours();
+                        } else {
+                            hour = String(d.getHours());
+                        }
+                        var min;
+                        if (d.getMinutes() < 10) {
+                            min = '0' + d.getMinutes();
+                        } else {
+                            min = String(d.getMinutes());
+                        }
+
+                        var name = 'Image Pasted at ' + d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate() + ' ' + hour + '-' + min + '.' + ext;
+                        formData.append('files', file, name);
+                        formData.append('client_ids', clientId);
+
+                        var request = client.uploadFile(formData,
                             function(data) {
-                                parsedData = $.parseJSON(data);
-                                self.props.onFileUpload(parsedData['filenames'], channel_id);
-                            }.bind(this),
+                                var parsedData = $.parseJSON(data);
+                                self.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channelId);
+
+                                var requests = self.state.requests;
+                                for (var i = 0; i < parsedData['client_ids'].length; i++) {
+                                    delete requests[parsedData['client_ids'][i]];
+                                }
+                                self.setState({requests: requests});
+                            },
                             function(err) {
-                                self.props.onUploadError(err);
-                            }.bind(this)
+                                self.props.onUploadError(err, clientId);
+                            }
                         );
+
+                        var requests = self.state.requests;
+                        requests[clientId] = request;
+                        self.setState({requests: requests});
+
+                        self.props.onUploadStart([clientId], channelId);
                     }
                 }
             }
         });
     },
+    cancelUpload: function(clientId) {
+        var requests = this.state.requests;
+        var request = requests[clientId];
+
+        if (request) {
+            request.abort();
+
+            delete requests[clientId];
+            this.setState({requests: requests});
+        }
+    },
     render: function() {
         return (
-            <span ref="input" className="btn btn-file"><span><i className="glyphicon glyphicon-paperclip"></i></span><input ref="fileInput" type="file" onChange={this.handleChange} multiple/></span>
+            <span ref='input' className='btn btn-file'>
+                <span>
+                    <i className='glyphicon glyphicon-paperclip' />
+                </span>
+                <input ref='fileInput' type='file' onChange={this.handleChange} multiple/>
+            </span>
         );
     }
 });
diff --git a/web/react/components/invite_member_modal.jsx b/web/react/components/invite_member_modal.jsx
index 3eca79bae..75538c8fe 100644
--- a/web/react/components/invite_member_modal.jsx
+++ b/web/react/components/invite_member_modal.jsx
@@ -256,7 +256,7 @@ module.exports = React.createClass({
                         parent_id='invite_member'
                         title='Discard Invitations?'
                         message='You have unsent invitations, are you sure you want to discard them?'
-                        confirm_button='Yes, Discard/'
+                        confirm_button='Yes, Discard'
                     />
                 </div>
             );
diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index bb1b1704c..83f806b79 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -439,7 +439,7 @@ module.exports = React.createClass({
                 currentPostDay = utils.getDateForUnixTicks(post.create_at);
                 if (currentPostDay.toDateString() != previousPostDay.toDateString()) {
                     postCtls.push(
-                        <div className="date-separator">
+                        <div key={currentPostDay.toDateString()} className="date-separator">
                             <hr className="separator__hr" />
                             <div className="separator__text">{currentPostDay.toDateString()}</div>
                         </div>
@@ -449,7 +449,7 @@ module.exports = React.createClass({
                 if (post.create_at > last_viewed && !rendered_last_viewed) {
                     rendered_last_viewed = true;
                     postCtls.push(
-                        <div className="new-separator">
+                        <div key="unviewed" className="new-separator">
                             <hr id="new_message" className="separator__hr" />
                             <div className="separator__text">New Messages</div>
                         </div>
diff --git a/web/react/components/settings_sidebar.jsx b/web/react/components/settings_sidebar.jsx
index ae8510cf2..b4d291622 100644
--- a/web/react/components/settings_sidebar.jsx
+++ b/web/react/components/settings_sidebar.jsx
@@ -4,6 +4,7 @@
 var utils = require('../utils/utils.jsx');
 
 module.exports = React.createClass({
+    displayName:'SettingsSidebar',
     updateTab: function(tab) {
         this.props.updateTab(tab);
         $('.settings-modal').addClass('display--content');
@@ -14,7 +15,7 @@ module.exports = React.createClass({
             <div className="">
                 <ul className="nav nav-pills nav-stacked">
                     {this.props.tabs.map(function(tab) {
-                        return <li className={self.props.activeTab == tab.name ? 'active' : ''}><a href="#" onClick={function(){self.updateTab(tab.name);}}><i className={tab.icon}></i>{tab.ui_name}</a></li>
+                        return <li key={tab.name+'_li'} className={self.props.activeTab == tab.name ? 'active' : ''}><a key={tab.name + '_a'} href="#" onClick={function(){self.updateTab(tab.name);}}><i key={tab.name+'_i'} className={tab.icon}></i>{tab.ui_name}</a></li>
                     })}
                 </ul>
             </div>
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index 1d39f5f67..fe73cbcf7 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -56,7 +56,6 @@ function getStateFromStores() {
             var channelMember = members[channel.id];
             var msgCount = channel.total_msg_count - channelMember.msg_count;
             if (msgCount > 0) {
-                channel.unread = msgCount;
                 showDirectChannels.push(channel);
             } else if (currentId === channel.id) {
                 showDirectChannels.push(channel);
@@ -70,6 +69,7 @@ function getStateFromStores() {
             tempChannel.display_name = utils.getDisplayName(teammate);
             tempChannel.status = UserStore.getStatus(teammate.id);
             tempChannel.last_post_at = 0;
+            tempChannel.total_msg_count = 0;
             readDirectChannels.push(tempChannel);
         }
     }
@@ -132,11 +132,17 @@ module.exports = React.createClass({
         $('.nav-pills__container').perfectScrollbar();
 
         this.updateTitle();
+        this.updateUnreadIndicators();
+
+        $(window).on('resize', this.onResize);
     },
     componentDidUpdate: function() {
         this.updateTitle();
+        this.updateUnreadIndicators();
     },
     componentWillUnmount: function() {
+        $(window).off('resize', this.onResize);
+
         ChannelStore.removeChangeListener(this.onChange);
         UserStore.removeChangeListener(this.onChange);
         UserStore.removeStatusesChangeListener(this.onChange);
@@ -157,7 +163,10 @@ module.exports = React.createClass({
             }
 
             if (UserStore.getCurrentId() !== msg.user_id) {
-                var mentions = msg.props.mentions ? JSON.parse(msg.props.mentions) : [];
+                var mentions = [];
+                if (msg.props.mentions) {
+                    mentions = JSON.parse(msg.props.mentions);
+                }
                 var channel = ChannelStore.get(msg.channel_id);
 
                 var user = UserStore.getCurrentUser();
@@ -175,7 +184,10 @@ module.exports = React.createClass({
                     username = UserStore.getProfile(msg.user_id).username;
                 }
 
-                var title = channel ? channel.display_name : 'Posted';
+                var title = 'Posted';
+                if (channel) {
+                    title = channel.display_name;
+                }
 
                 var repRegex = new RegExp('<br>', 'g');
                 var post = JSON.parse(msg.props.post);
@@ -235,103 +247,143 @@ module.exports = React.createClass({
             }
         }
     },
+    onScroll: function(e) {
+        this.updateUnreadIndicators();
+    },
+    onResize: function(e) {
+        this.updateUnreadIndicators();
+    },
+    updateUnreadIndicators: function() {
+        var container = $(this.refs.container.getDOMNode());
+
+        if (this.firstUnreadChannel) {
+            var firstUnreadElement = $(this.refs[this.firstUnreadChannel].getDOMNode());
+
+            if (firstUnreadElement.position().top + firstUnreadElement.height() < 0) {
+                $(this.refs.topUnreadIndicator.getDOMNode()).css('display', 'initial');
+            } else {
+                $(this.refs.topUnreadIndicator.getDOMNode()).css('display', 'none');
+            }
+        }
+
+        if (this.lastUnreadChannel) {
+            var lastUnreadElement = $(this.refs[this.lastUnreadChannel].getDOMNode());
+
+            if (lastUnreadElement.position().top > container.height()) {
+                $(this.refs.bottomUnreadIndicator.getDOMNode()).css('bottom', '0');
+                $(this.refs.bottomUnreadIndicator.getDOMNode()).css('display', 'initial');
+            } else {
+                $(this.refs.bottomUnreadIndicator.getDOMNode()).css('display', 'none');
+            }
+        }
+    },
     getInitialState: function() {
         return getStateFromStores();
     },
     render: function() {
         var members = this.state.members;
-        var newsActive = window.location.pathname === '/' ? 'active' : '';
+        var activeId = this.state.active_id;
         var badgesActive = false;
+
+        // keep track of the first and last unread channels so we can use them to set the unread indicators
         var self = this;
-        var channelItems = this.state.channels.map(function(channel) {
-            if (channel.type != 'O') {
-                return '';
-            }
+        this.firstUnreadChannel = null;
+        this.lastUnreadChannel = null;
 
+        function createChannelElement(channel) {
             var channelMember = members[channel.id];
-            var active = channel.id === self.state.active_id ? 'active' : '';
 
-            var msgCount = channel.total_msg_count - channelMember.msg_count;
-            var titleClass = '';
-            if (msgCount > 0 && channelMember.notify_level !== 'quiet') {
-                titleClass = 'unread-title';
+            var linkClass = '';
+            if (channel.id === self.state.active_id) {
+                linkClass = 'active';
             }
 
-            var badge = '';
-            if (channelMember.mention_count > 0) {
-                badge = <span className='badge pull-right small'>{channelMember.mention_count}</span>;
-                badgesActive = true;
-                titleClass = 'unread-title';
+            var unread = false;
+            if (channelMember) {
+                var msgCount = channel.total_msg_count - channelMember.msg_count;
+                unread = (msgCount > 0 && channelMember.notify_level !== 'quiet') || channelMember.mention_count > 0;
             }
 
-            return (
-                <li key={channel.id} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={function(e){e.preventDefault(); utils.switchChannel(channel);}}>{badge}{channel.display_name}</a></li>
-            );
-        });
+            var titleClass = '';
+            if (unread) {
+                titleClass = 'unread-title';
 
-        var privateChannelItems = this.state.channels.map(function(channel) {
-            if (channel.type !== 'P') {
-                return '';
+                if (!self.firstUnreadChannel) {
+                    self.firstUnreadChannel = channel.name;
+                }
+                self.lastUnreadChannel = channel.name;
             }
 
-            var channelMember = members[channel.id];
-            var active = channel.id === self.state.active_id ? 'active' : '';
+            var badge = null;
+            if (channelMember) {
+                if (channel.type === 'D') {
+                    // direct message channels show badges for any number of unread posts
+                    var msgCount = channel.total_msg_count - channelMember.msg_count;
+                    if (msgCount > 0) {
+                        badge = <span className='badge pull-right small'>{msgCount}</span>;
+                        badgesActive = true;
+                    }
+                } else if (channelMember.mention_count > 0) {
+                    // public and private channels only show badges for mentions
+                    badge = <span className='badge pull-right small'>{channelMember.mention_count}</span>;
+                    badgesActive = true;
+                }
+            }
 
-            var msgCount = channel.total_msg_count - channelMember.msg_count;
-            var titleClass = ''
-            if (msgCount > 0 && channelMember.notify_level !== 'quiet') {
-                titleClass = 'unread-title'
+            // set up status icon for direct message channels
+            var status = null;
+            if (channel.type === 'D') {
+                var statusIcon = '';
+                if (channel.status === 'online') {
+                    statusIcon = Constants.ONLINE_ICON_SVG;
+                } else if (channel.status === 'away') {
+                    statusIcon = Constants.ONLINE_ICON_SVG;
+                } else {
+                    statusIcon = Constants.OFFLINE_ICON_SVG;
+                }
+                status = <span className='status' dangerouslySetInnerHTML={{__html: statusIcon}} />;
             }
 
-            var badge = '';
-            if (channelMember.mention_count > 0) {
-                badge = <span className='badge pull-right small'>{channelMember.mention_count}</span>;
-                badgesActive = true;
-                titleClass = 'unread-title';
+            // set up click handler to switch channels (or create a new channel for non-existant ones)
+            var clickHandler = null;
+            var href;
+            if (!channel.fake) {
+                clickHandler = function(e) {
+                    e.preventDefault();
+                    utils.switchChannel(channel);
+                };
+                href = '#';
+            } else {
+                href = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name;
             }
 
             return (
-                <li key={channel.id} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={function(e){e.preventDefault(); utils.switchChannel(channel);}}>{badge}{channel.display_name}</a></li>
+                <li key={channel.name} ref={channel.name} className={linkClass}>
+                    <a className={'sidebar-channel ' + titleClass} href={href} onClick={clickHandler}>
+                        {status}
+                        {badge}
+                        {channel.display_name}
+                    </a>
+                </li>
             );
-        });
-
-        var directMessageItems = this.state.showDirectChannels.map(function(channel) {
-            var badge = '';
-            var titleClass = '';
+        };
 
-            var statusIcon = '';
-            if (channel.status === 'online') {
-                statusIcon = Constants.ONLINE_ICON_SVG;
-            } else if (channel.status === 'away') {
-                statusIcon = Constants.ONLINE_ICON_SVG;
-            } else {
-                statusIcon = Constants.OFFLINE_ICON_SVG;
+        // create elements for all 3 types of channels
+        var channelItems = this.state.channels.filter(
+            function(channel) {
+                return channel.type === 'O';
             }
+        ).map(createChannelElement);
 
-            if (!channel.fake) {
-                var active = channel.id === self.state.active_id ? 'active' : '';
-
-                if (channel.unread) {
-                    badge = <span className='badge pull-right small'>{channel.unread}</span>;
-                    badgesActive = true;
-                    titleClass = 'unread-title';
-                }
-
-                function handleClick(e) {
-                    e.preventDefault();
-                    utils.switchChannel(channel, channel.teammate_username);
-                }
-
-                return (
-                    <li key={channel.name} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={handleClick}><span className='status' dangerouslySetInnerHTML={{__html: statusIcon}} /> {badge}{channel.display_name}</a></li>
-                );
-            } else {
-                return (
-                    <li key={channel.name} className={active}><a className={'sidebar-channel ' + titleClass} href={TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name}><span className='status' dangerouslySetInnerHTML={{__html: statusIcon}} /> {badge}{channel.display_name}</a></li>
-                );
+        var privateChannelItems = this.state.channels.filter(
+            function(channel) {
+                return channel.type === 'P';
             }
-        });
+        ).map(createChannelElement);
+
+        var directMessageItems = this.state.showDirectChannels.map(createChannelElement);
 
+        // update the favicon to show if there are any notifications
         var link = document.createElement('link');
         link.type = 'image/x-icon';
         link.rel = 'shortcut icon';
@@ -348,19 +400,26 @@ module.exports = React.createClass({
         }
         head.appendChild(link);
 
-        if (channelItems.length == 0) {
-            <li><small>Loading...</small></li>
+        var directMessageMore = null;
+        if (this.state.hideDirectChannels.length > 0) {
+            directMessageMore = (
+                <li>
+                    <a href='#' data-toggle='modal' className='nav-more' data-target='#more_direct_channels' data-channels={JSON.stringify(this.state.hideDirectChannels)}>
+                        {'More ('+this.state.hideDirectChannels.length+')'}
+                    </a>
+                </li>
+            );
         }
 
-        if (privateChannelItems.length == 0) {
-            <li><small>Loading...</small></li>
-        }
         return (
             <div>
                 <SidebarHeader teamDisplayName={this.props.teamDisplayName} teamType={this.props.teamType} />
                 <SearchBox />
 
-                <div className='nav-pills__container'>
+                <div ref='topUnreadIndicator' className='nav-pills__unread-indicator nav-pills__unread-indicator-top' style={{display: 'none'}}>Unread post(s) above</div>
+                <div ref='bottomUnreadIndicator' className='nav-pills__unread-indicator nav-pills__unread-indicator-bottom' style={{display: 'none'}}>Unread post(s) below</div>
+
+                <div ref='container' className='nav-pills__container' onScroll={this.onScroll}>
                     <ul className='nav nav-pills nav-stacked'>
                         <li><h4>Channels<a className='add-channel-btn' href='#' data-toggle='modal' data-target='#new_channel' data-channeltype='O'>+</a></h4></li>
                         {channelItems}
@@ -374,9 +433,7 @@ module.exports = React.createClass({
                     <ul className='nav nav-pills nav-stacked'>
                         <li><h4>Private Messages</h4></li>
                         {directMessageItems}
-                        { this.state.hideDirectChannels.length > 0 ?
-                            <li><a href='#' data-toggle='modal' className='nav-more' data-target='#more_direct_channels' data-channels={JSON.stringify(this.state.hideDirectChannels)}>{'More ('+this.state.hideDirectChannels.length+')'}</a></li>
-                        : '' }
+                        {directMessageMore}
                     </ul>
                 </div>
             </div>
diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx
index 72b8547e5..cc3f255ee 100644
--- a/web/react/components/sidebar_header.jsx
+++ b/web/react/components/sidebar_header.jsx
@@ -87,7 +87,7 @@ var NavbarDropdown = React.createClass({
                 }
             });
         }
-        teams.push(<li><a href={utils.getWindowLocationOrigin() + '/signup_team'}>Create a New Team</a></li>);
+        teams.push(<li key='newTeam_li'><a key='newTeam_a' href={utils.getWindowLocationOrigin() + '/signup_team' }>Create a New Team</a></li>);
 
         return (
             <ul className='nav navbar-nav navbar-right'>
diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx
index 4b2f8f650..dc85b53e5 100644
--- a/web/react/components/view_image.jsx
+++ b/web/react/components/view_image.jsx
@@ -5,113 +5,143 @@ var Client = require('../utils/client.jsx');
 var utils = require('../utils/utils.jsx');
 
 module.exports = React.createClass({
-    displayName: "ViewImageModal",
+    displayName: 'ViewImageModal',
     canSetState: false,
     handleNext: function() {
         var id = this.state.imgId + 1;
-        if (id > this.props.filenames.length-1) {
+        if (id > this.props.filenames.length - 1) {
             id = 0;
         }
-        this.setState({ imgId: id });
+        this.setState({imgId: id});
         this.loadImage(id);
     },
     handlePrev: function() {
         var id = this.state.imgId - 1;
         if (id < 0) {
-            id = this.props.filenames.length-1;
+            id = this.props.filenames.length - 1;
         }
-        this.setState({ imgId: id });
+        this.setState({imgId: id});
         this.loadImage(id);
     },
+    handleKeyPress: function handleKeyPress(e) {
+        if (!e) {
+            return;
+        } else if (e.keyCode === 39) {
+            this.handleNext();
+        } else if (e.keyCode === 37) {
+            this.handlePrev();
+        }
+    },
     componentWillReceiveProps: function(nextProps) {
-        this.setState({ imgId: nextProps.startId });
+        this.setState({imgId: nextProps.startId});
     },
     loadImage: function(id) {
-        var imgHeight = $(window).height()-100;
-        if (this.state.loaded[id] || this.state.images[id]){
-            $('.modal .modal-image .image-wrapper img').css("max-height",imgHeight);
+        var imgHeight = $(window).height() - 100;
+        if (this.state.loaded[id] || this.state.images[id]) {
+            $('.modal .modal-image .image-wrapper img').css('max-height', imgHeight);
             return;
-        };
+        }
 
         var filename = this.props.filenames[id];
 
         var fileInfo = utils.splitFileLocation(filename);
         var fileType = utils.getFileType(fileInfo.ext);
 
-        if (fileType === "image") {
+        if (fileType === 'image') {
             var self = this;
             var img = new Image();
             img.load(this.getPreviewImagePath(filename),
-                function(){
+                function() {
                     var progress = self.state.progress;
                     progress[id] = img.completedPercentage;
-                    self.setState({ progress: progress });
-            });
+                    self.setState({progress: progress});
+                });
             img.onload = function(imgid) {
                 return function() {
                     var loaded = self.state.loaded;
                     loaded[imgid] = true;
-                    self.setState({ loaded: loaded });
-                    $(self.refs.image.getDOMNode()).css("max-height",imgHeight);
+                    self.setState({loaded: loaded});
+                    $(self.refs.image.getDOMNode()).css('max-height', imgHeight);
                 };
             }(id);
             var images = this.state.images;
             images[id] = img;
-            this.setState({ images: images });
+            this.setState({images: images});
         } else {
             // there's nothing to load for non-image files
             var loaded = this.state.loaded;
             loaded[id] = true;
-            this.setState({ loaded: loaded });
+            this.setState({loaded: loaded});
         }
     },
     componentDidUpdate: function() {
         if (this.state.loaded[this.state.imgId]) {
             if (this.refs.imageWrap) {
-                $(this.refs.imageWrap.getDOMNode()).removeClass("default");
+                $(this.refs.imageWrap.getDOMNode()).removeClass('default');
             }
         }
     },
     componentDidMount: function() {
         var self = this;
-        $("#"+this.props.modalId).on('shown.bs.modal', function() {
-            self.setState({ viewed: true });
+        $('#' + this.props.modalId).on('shown.bs.modal', function() {
+            self.setState({viewed: true});
             self.loadImage(self.state.imgId);
-        })
+        });
 
-        $(this.refs.modal.getDOMNode()).click(function(e){
-            if (e.target == this || e.target == self.refs.imageBody.getDOMNode()) {
+        $(this.refs.modal.getDOMNode()).click(function(e) {
+            if (e.target === this || e.target === self.refs.imageBody.getDOMNode()) {
                 $('.image_modal').modal('hide');
             }
         });
 
         $(this.refs.imageWrap.getDOMNode()).hover(
             function() {
-                $(self.refs.imageFooter.getDOMNode()).addClass("footer--show");
+                $(self.refs.imageFooter.getDOMNode()).addClass('footer--show');
             }, function() {
-                $(self.refs.imageFooter.getDOMNode()).removeClass("footer--show");
+                $(self.refs.imageFooter.getDOMNode()).removeClass('footer--show');
             }
         );
 
+        $(window).on('keyup', this.handleKeyPress);
+
         // keep track of whether or not this component is mounted so we can safely set the state asynchronously
         this.canSetState = true;
     },
     componentWillUnmount: function() {
         this.canSetState = false;
+        $(window).off('keyup', this.handleKeyPress);
     },
-    getPublicLink: function(e) {
-        data = {};
-        data["channel_id"] = this.props.channelId;
-        data["user_id"] = this.props.userId;
-        data["filename"] = this.props.filenames[this.state.imgId];
+    getPublicLink: function() {
+        var data = {};
+        data.channel_id = this.props.channelId;
+        data.user_id = this.props.userId;
+        data.filename = this.props.filenames[this.state.imgId];
         Client.getPublicLink(data,
-            function(data) {
-                window.open(data["public_link"]);
-            }.bind(this),
-            function(err) {
-            }.bind(this)
+            function(serverData) {
+                window.open(serverData.public_link);
+            },
+            function() {
+            }
         );
     },
+    getPreviewImagePath: function(filename) {
+        // Returns the path to a preview image that can be used to represent a file.
+        var fileInfo = utils.splitFileLocation(filename);
+        var fileType = utils.getFileType(fileInfo.ext);
+
+        if (fileType === 'image') {
+            // This is a temporary patch to fix issue with old files using absolute paths
+            if (fileInfo.path.indexOf('/api/v1/files/get') !== -1) {
+                fileInfo.path = fileInfo.path.split('/api/v1/files/get')[1];
+            }
+            fileInfo.path = utils.getWindowLocationOrigin() + '/api/v1/files/get' + fileInfo.path;
+
+            return fileInfo.path + '_preview.jpg';
+        }
+
+        // only images have proper previews, so just use a placeholder icon for non-images
+        return utils.getPreviewImagePathForFileType(fileType);
+    },
     getInitialState: function() {
         var loaded = [];
         var progress = [];
@@ -119,10 +149,10 @@ module.exports = React.createClass({
             loaded.push(false);
             progress.push(0);
         }
-        return { imgId: this.props.startId, viewed: false, loaded: loaded, progress: progress, images: {}, fileSizes: {} };
+        return {imgId: this.props.startId, viewed: false, loaded: loaded, progress: progress, images: {}, fileSizes: {}};
     },
     render: function() {
-        if (this.props.filenames.length < 1 || this.props.filenames.length-1 < this.state.imgId) {
+        if (this.props.filenames.length < 1 || this.props.filenames.length - 1 < this.state.imgId) {
             return <div/>;
         }
 
@@ -132,34 +162,34 @@ module.exports = React.createClass({
         var name = decodeURIComponent(utils.getFileName(filename));
 
         var content;
-        var bgClass = "";
+        var bgClass = '';
         if (this.state.loaded[this.state.imgId]) {
             var fileInfo = utils.splitFileLocation(filename);
             var fileType = utils.getFileType(fileInfo.ext);
 
-            if (fileType === "image") {
+            if (fileType === 'image') {
                 // image files just show a preview of the file
                 content = (
-                    <a href={fileUrl} target="_blank">
-                        <img ref="image" src={this.getPreviewImagePath(filename)}/>
+                    <a href={fileUrl} target='_blank'>
+                        <img ref='image' src={this.getPreviewImagePath(filename)}/>
                     </a>
                 );
             } else {
                 // non-image files include a section providing details about the file
-                var infoString = "File type " + fileInfo.ext.toUpperCase();
+                var infoString = 'File type ' + fileInfo.ext.toUpperCase();
                 if (this.state.fileSizes[filename] && this.state.fileSizes[filename] >= 0) {
-                    infoString += ", Size " + utils.fileSizeToString(this.state.fileSizes[filename]);
+                    infoString += ', Size ' + utils.fileSizeToString(this.state.fileSizes[filename]);
                 }
 
                 content = (
-                    <div className="file-details__container">
-                        <a className={"file-details__preview"} href={fileUrl} target="_blank">
-                            <span className="file-details__preview-helper" />
-                            <img ref="image" src={this.getPreviewImagePath(filename)} />
+                    <div className='file-details__container'>
+                        <a className={'file-details__preview'} href={fileUrl} target='_blank'>
+                            <span className='file-details__preview-helper' />
+                            <img ref='image' src={this.getPreviewImagePath(filename)} />
                         </a>
-                        <div className="file-details">
-                            <div className="file-details__name">{name}</div>
-                            <div className="file-details__info">{infoString}</div>
+                        <div className='file-details'>
+                            <div className='file-details__name'>{name}</div>
+                            <div className='file-details__info'>{infoString}</div>
                         </div>
                     </div>
                 );
@@ -182,68 +212,63 @@ module.exports = React.createClass({
             var percentage = Math.floor(this.state.progress[this.state.imgId]);
             content = (
                 <div>
-                    <img className="loader-image" src="/static/images/load.gif" />
+                    <img className='loader-image' src='/static/images/load.gif' />
                     { percentage > 0 ?
-                    <span className="loader-percent" >{"Previewing " + percentage + "%"}</span>
-                    : ""}
+                    <span className='loader-percent' >{'Previewing ' + percentage + '%'}</span>
+                    : ''}
+                </div>
+            );
+            bgClass = 'black-bg';
+        }
+
+        var publicLink = '';
+        if (config.AllowPublicLink) {
+            publicLink = (
+                <div>
+                    <a href='#' className='public-link text' data-title='Public Image' onClick={this.getPublicLink}>Get Public Link</a>
+                    <span className='text'> | </span>
                 </div>
             );
-            bgClass = "black-bg";
+        }
+
+        var leftArrow = '';
+        var rightArrow = '';
+        if (this.props.filenames.length > 1) {
+            leftArrow = (
+                <a className='modal-prev-bar' href='#' onClick={this.handlePrev}>
+                    <i className='image-control image-prev'/>
+                </a>
+            );
+
+            rightArrow = (
+                <a className='modal-next-bar' href='#' onClick={this.handleNext}>
+                    <i className='image-control image-next'/>
+                </a>
+            );
         }
 
         return (
-            <div className="modal fade image_modal" ref="modal" id={this.props.modalId} tabIndex="-1" role="dialog" aria-hidden="true">
-                <div className="modal-dialog modal-image">
-                    <div className="modal-content image-content">
-                        <div ref="imageBody" className="modal-body image-body">
-                            <div ref="imageWrap" className={"image-wrapper default " + bgClass}>
-                                <div className="modal-close" data-dismiss="modal"></div>
+            <div className='modal fade image_modal' ref='modal' id={this.props.modalId} tabIndex='-1' role='dialog' aria-hidden='true'>
+                <div className='modal-dialog modal-image'>
+                    <div className='modal-content image-content'>
+                        <div ref='imageBody' className='modal-body image-body'>
+                            <div ref='imageWrap' className={'image-wrapper default ' + bgClass}>
+                                <div className='modal-close' data-dismiss='modal'></div>
                                 {content}
-                                <div ref="imageFooter" className="modal-button-bar">
-                                    <span className="pull-left text">{"Image "+(this.state.imgId+1)+" of "+this.props.filenames.length}</span>
-                                    <div className="image-links">
-                                        { config.AllowPublicLink ?
-                                            <div>
-                                                <a href="#" className="public-link text" data-title="Public Image" onClick={this.getPublicLink}>Get Public Link</a>
-                                                <span className="text"> | </span>
-                                            </div>
-                                        : "" }
-                                        <a href={fileUrl} download={name} className="text">Download</a>
+                                <div ref='imageFooter' className='modal-button-bar'>
+                                    <span className='pull-left text'>{'Image ' + (this.state.imgId + 1) + ' of ' + this.props.filenames.length}</span>
+                                    <div className='image-links'>
+                                        {publicLink}
+                                        <a href={fileUrl} download={name} className='text'>Download</a>
                                     </div>
                                 </div>
                             </div>
-                            { this.props.filenames.length > 1 ?
-                            <a className="modal-prev-bar" href="#" onClick={this.handlePrev}>
-                                <i className="image-control image-prev"/>
-                            </a>
-                            : "" }
-                            { this.props.filenames.length > 1 ?
-                            <a className="modal-next-bar" href="#" onClick={this.handleNext}>
-                                <i className="image-control image-next"/>
-                            </a>
-                            : "" }
+                            {leftArrow}
+                            {rightArrow}
                         </div>
                     </div>
                 </div>
             </div>
         );
-    },
-    // Returns the path to a preview image that can be used to represent a file.
-    getPreviewImagePath: function(filename) {
-        var fileInfo = utils.splitFileLocation(filename);
-        var fileType = utils.getFileType(fileInfo.ext);
-
-        if (fileType === "image") {
-            // This is a temporary patch to fix issue with old files using absolute paths
-            if (fileInfo.path.indexOf("/api/v1/files/get") !== -1) {
-                fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1];
-            }
-            fileInfo.path = utils.getWindowLocationOrigin() + "/api/v1/files/get" + fileInfo.path;
-
-            return fileInfo.path + '_preview.jpg';
-        } else {
-            // only images have proper previews, so just use a placeholder icon for non-images
-            return utils.getPreviewImagePathForFileType(fileType);
-        }
     }
 });
diff --git a/web/react/stores/post_store.jsx b/web/react/stores/post_store.jsx
index ea1e75ecb..9ebdf734c 100644
--- a/web/react/stores/post_store.jsx
+++ b/web/react/stores/post_store.jsx
@@ -132,30 +132,33 @@ var PostStore = assign({}, EventEmitter.prototype, {
     getSearchTerm: function getSearchTerm() {
         return BrowserStore.getItem('search_term');
     },
+    getEmptyDraft: function getEmptyDraft(draft) {
+        return {message: '', uploadsInProgress: [], previews: []};
+    },
     storeCurrentDraft: function storeCurrentDraft(draft) {
         var channelId = ChannelStore.getCurrentId();
         BrowserStore.setItem('draft_' + channelId, draft);
     },
     getCurrentDraft: function getCurrentDraft() {
         var channelId = ChannelStore.getCurrentId();
-        return BrowserStore.getItem('draft_' + channelId);
+        return PostStore.getDraft(channelId);
     },
     storeDraft: function storeDraft(channelId, draft) {
         BrowserStore.setItem('draft_' + channelId, draft);
     },
     getDraft: function getDraft(channelId) {
-        return BrowserStore.getItem('draft_' + channelId);
+        return BrowserStore.getItem('draft_' + channelId, PostStore.getEmptyDraft());
     },
     storeCommentDraft: function storeCommentDraft(parentPostId, draft) {
         BrowserStore.setItem('comment_draft_' + parentPostId, draft);
     },
     getCommentDraft: function getCommentDraft(parentPostId) {
-        return BrowserStore.getItem('comment_draft_' + parentPostId);
+        return BrowserStore.getItem('comment_draft_' + parentPostId, PostStore.getEmptyDraft());
     },
     clearDraftUploads: function clearDraftUploads() {
         BrowserStore.actionOnItemsWithPrefix('draft_', function clearUploads(key, value) {
             if (value) {
-                value.uploadsInProgress = 0;
+                value.uploadsInProgress = [];
                 BrowserStore.setItem(key, value);
             }
         });
@@ -163,7 +166,7 @@ var PostStore = assign({}, EventEmitter.prototype, {
     clearCommentDraftUploads: function clearCommentDraftUploads() {
         BrowserStore.actionOnItemsWithPrefix('comment_draft_', function clearUploads(key, value) {
             if (value) {
-                value.uploadsInProgress = 0;
+                value.uploadsInProgress = [];
                 BrowserStore.setItem(key, value);
             }
         });
diff --git a/web/react/stores/user_store.jsx b/web/react/stores/user_store.jsx
index aff5a0bed..f8616c6ab 100644
--- a/web/react/stores/user_store.jsx
+++ b/web/react/stores/user_store.jsx
@@ -4,7 +4,6 @@
 var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var EventEmitter = require('events').EventEmitter;
 var assign = require('object-assign');
-var client = require('../utils/client.jsx');
 
 var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
@@ -18,244 +17,248 @@ var CHANGE_EVENT_STATUSES = 'change_statuses';
 
 var UserStore = assign({}, EventEmitter.prototype, {
 
-    _current_id: null,
+    gCurrentId: null,
 
-  emitChange: function(userId) {
-    this.emit(CHANGE_EVENT, userId);
-  },
-  addChangeListener: function(callback) {
-    this.on(CHANGE_EVENT, callback);
-  },
-  removeChangeListener: function(callback) {
-    this.removeListener(CHANGE_EVENT, callback);
-  },
-  emitSessionsChange: function() {
-    this.emit(CHANGE_EVENT_SESSIONS);
-  },
-  addSessionsChangeListener: function(callback) {
-    this.on(CHANGE_EVENT_SESSIONS, callback);
-  },
-  removeSessionsChangeListener: function(callback) {
-    this.removeListener(CHANGE_EVENT_SESSIONS, callback);
-  },
-  emitAuditsChange: function() {
-    this.emit(CHANGE_EVENT_AUDITS);
-  },
-  addAuditsChangeListener: function(callback) {
-    this.on(CHANGE_EVENT_AUDITS, callback);
-  },
-  removeAuditsChangeListener: function(callback) {
-    this.removeListener(CHANGE_EVENT_AUDITS, callback);
-  },
-  emitTeamsChange: function() {
-    this.emit(CHANGE_EVENT_TEAMS);
-  },
-  addTeamsChangeListener: function(callback) {
-    this.on(CHANGE_EVENT_TEAMS, callback);
-  },
-  removeTeamsChangeListener: function(callback) {
-    this.removeListener(CHANGE_EVENT_TEAMS, callback);
-  },
-  emitStatusesChange: function() {
-    this.emit(CHANGE_EVENT_STATUSES);
-  },
-  addStatusesChangeListener: function(callback) {
-    this.on(CHANGE_EVENT_STATUSES, callback);
-  },
-  removeStatusesChangeListener: function(callback) {
-    this.removeListener(CHANGE_EVENT_STATUSES, callback);
-  },
-  setCurrentId: function(id) {
-     this._current_id = id;
-     if (id == null) {
-         BrowserStore.removeGlobalItem("current_user_id");
-     } else {
-         BrowserStore.setGlobalItem("current_user_id", id);
-     }
-  },
-  getCurrentId: function(skipFetch) {
-    var current_id = this._current_id;
+    emitChange: function(userId) {
+        this.emit(CHANGE_EVENT, userId);
+    },
+    addChangeListener: function(callback) {
+        this.on(CHANGE_EVENT, callback);
+    },
+    removeChangeListener: function(callback) {
+        this.removeListener(CHANGE_EVENT, callback);
+    },
+    emitSessionsChange: function() {
+        this.emit(CHANGE_EVENT_SESSIONS);
+    },
+    addSessionsChangeListener: function(callback) {
+        this.on(CHANGE_EVENT_SESSIONS, callback);
+    },
+    removeSessionsChangeListener: function(callback) {
+        this.removeListener(CHANGE_EVENT_SESSIONS, callback);
+    },
+    emitAuditsChange: function() {
+        this.emit(CHANGE_EVENT_AUDITS);
+    },
+    addAuditsChangeListener: function(callback) {
+        this.on(CHANGE_EVENT_AUDITS, callback);
+    },
+    removeAuditsChangeListener: function(callback) {
+        this.removeListener(CHANGE_EVENT_AUDITS, callback);
+    },
+    emitTeamsChange: function() {
+        this.emit(CHANGE_EVENT_TEAMS);
+    },
+    addTeamsChangeListener: function(callback) {
+        this.on(CHANGE_EVENT_TEAMS, callback);
+    },
+    removeTeamsChangeListener: function(callback) {
+        this.removeListener(CHANGE_EVENT_TEAMS, callback);
+    },
+    emitStatusesChange: function() {
+        this.emit(CHANGE_EVENT_STATUSES);
+    },
+    addStatusesChangeListener: function(callback) {
+        this.on(CHANGE_EVENT_STATUSES, callback);
+    },
+    removeStatusesChangeListener: function(callback) {
+        this.removeListener(CHANGE_EVENT_STATUSES, callback);
+    },
+    setCurrentId: function(id) {
+        this.gCurrentId = id;
+        if (id == null) {
+            BrowserStore.removeGlobalItem('current_user_id');
+        } else {
+            BrowserStore.setGlobalItem('current_user_id', id);
+        }
+    },
+    getCurrentId: function() {
+        var currentId = this.gCurrentId;
 
-    if (current_id == null) {
-        current_id = BrowserStore.getGlobalItem("current_user_id");
-    }
+        if (currentId == null) {
+            currentId = BrowserStore.getGlobalItem('current_user_id');
+            this.gCurrentId = currentId;
+        }
 
-    // this is a speical case to force fetch the
-    // current user if it's missing
-    // it's synchronous to block rendering
-    if (current_id == null && !skipFetch) {
-      var me = client.getMeSynchronous();
-      if (me != null) {
-        this.setCurrentUser(me);
-        current_id = me.id;
-      }
-    }
+        return currentId;
+    },
+    getCurrentUser: function() {
+        if (this.getCurrentId() == null) {
+            return null;
+        }
 
-    return current_id;
-  },
-  getCurrentUser: function(skipFetch) {
-    if (this.getCurrentId(skipFetch) == null) {
-      return null;
-    }
+        return this._getProfiles()[this.getCurrentId()];
+    },
+    setCurrentUser: function(user) {
+        this.setCurrentId(user.id);
+        this.saveProfile(user);
+    },
+    getLastEmail: function() {
+        return BrowserStore.getItem('last_email', '');
+    },
+    setLastEmail: function(email) {
+        BrowserStore.setItem('last_email', email);
+    },
+    removeCurrentUser: function() {
+        this.setCurrentId(null);
+    },
+    hasProfile: function(userId) {
+        return this._getProfiles()[userId] != null;
+    },
+    getProfile: function(userId) {
+        return this._getProfiles()[userId];
+    },
+    getProfileByUsername: function(username) {
+        return this._getProfilesUsernameMap()[username];
+    },
+    getProfilesUsernameMap: function() {
+        return this._getProfilesUsernameMap();
+    },
+    getProfiles: function() {
 
-    return this._getProfiles()[this.getCurrentId()];
-  },
-  setCurrentUser: function(user) {
-    this.setCurrentId(user.id);
-    this.saveProfile(user);
-  },
-  getLastEmail: function() {
-      return BrowserStore.getItem("last_email", '');
-  },
-  setLastEmail: function(email) {
-    BrowserStore.setItem("last_email", email);
-  },
-  removeCurrentUser: function() {
-    this.setCurrentId(null);
-  },
-  hasProfile: function(userId) {
-    return this._getProfiles()[userId] != null;
-  },
-  getProfile: function(userId) {
-    return this._getProfiles()[userId];
-  },
-  getProfileByUsername: function(username) {
-    return this._getProfilesUsernameMap()[username];
-  },
-  getProfilesUsernameMap: function() {
-    return this._getProfilesUsernameMap();
-  },
-  getProfiles: function() {
+        return this._getProfiles();
+    },
+    getActiveOnlyProfiles: function() {
+        var active = {};
+        var current = this._getProfiles();
 
-    return this._getProfiles();
-  },
-  getActiveOnlyProfiles: function() {
-    active = {};
-    current = this._getProfiles();
+        for (var key in current) {
+            if (current[key].delete_at === 0) {
+                active[key] = current[key];
+            }
+        }
 
-    for (var key in current) {
-      if (current[key].delete_at == 0) {
-        active[key] = current[key];
-      }
-    }
+        return active;
+    },
+    saveProfile: function(profile) {
+        var ps = this._getProfiles();
+        ps[profile.id] = profile;
+        this._storeProfiles(ps);
+    },
+    _storeProfiles: function(profiles) {
+        BrowserStore.setItem('profiles', profiles);
+        var profileUsernameMap = {};
+        for (var id in profiles) {
+            profileUsernameMap[profiles[id].username] = profiles[id];
+        }
+        BrowserStore.setItem('profileUsernameMap', profileUsernameMap);
+    },
+    _getProfiles: function() {
+        return BrowserStore.getItem('profiles', {});
+    },
+    _getProfilesUsernameMap: function() {
+        return BrowserStore.getItem('profileUsernameMap', {});
+    },
+    setSessions: function(sessions) {
+        BrowserStore.setItem('sessions', sessions);
+    },
+    getSessions: function() {
+        return BrowserStore.getItem('sessions', {loading: true});
+    },
+    setAudits: function(audits) {
+        BrowserStore.setItem('audits', audits);
+    },
+    getAudits: function() {
+        return BrowserStore.getItem('audits', {loading: true});
+    },
+    setTeams: function(teams) {
+        BrowserStore.setItem('teams', teams);
+    },
+    getTeams: function() {
+        return BrowserStore.getItem('teams', []);
+    },
+    getCurrentMentionKeys: function() {
+        var user = this.getCurrentUser();
 
-    return active;
-  },
-  saveProfile: function(profile) {
-    var ps = this._getProfiles();
-    ps[profile.id] = profile;
-    this._storeProfiles(ps);
-  },
-  _storeProfiles: function(profiles) {
-    BrowserStore.setItem("profiles", profiles);
-    var profileUsernameMap = {};
-    for (var id in profiles) {
-        profileUsernameMap[profiles[id].username] = profiles[id];
-    }
-    BrowserStore.setItem("profileUsernameMap", profileUsernameMap);
-  },
-  _getProfiles: function() {
-    return BrowserStore.getItem("profiles", {});
-  },
-  _getProfilesUsernameMap: function() {
-    return BrowserStore.getItem("profileUsernameMap", {});
-  },
-  setSessions: function(sessions) {
-    BrowserStore.setItem("sessions", sessions);
-  },
-  getSessions: function() {
-    return BrowserStore.getItem("sessions", {loading: true});
-  },
-  setAudits: function(audits) {
-    BrowserStore.setItem("audits", audits);
-  },
-  getAudits: function() {
-    return BrowserStore.getItem("audits", {loading: true});
-  },
-  setTeams: function(teams) {
-    BrowserStore.setItem("teams", teams);
-  },
-  getTeams: function() {
-    return BrowserStore.getItem("teams", []);
-  },
-  getCurrentMentionKeys: function() {
-    var user = this.getCurrentUser();
+        var keys = [];
 
-    var keys = [];
+        if (!user || !user.notify_props) {
+            return keys;
+        }
 
-    if (!user)
-        return keys;
+        if (user.notify_props.mention_keys) {
+            keys = keys.concat(user.notify_props.mention_keys.split(','));
+        }
 
-    if (user.notify_props && user.notify_props.mention_keys) keys = keys.concat(user.notify_props.mention_keys.split(','));
-    if (user.first_name && user.notify_props.first_name === "true") keys.push(user.first_name);
-    if (user.notify_props.all === "true") keys.push('@all');
-    if (user.notify_props.channel === "true") keys.push('@channel');
+        if (user.notify_props.first_name === 'true' && user.first_name) {
+            keys.push(user.first_name);
+        }
 
-    return keys;
-  },
-  getLastVersion: function() {
-    return BrowserStore.getItem("last_version", '');
-  },
-  setLastVersion: function(version) {
-    BrowserStore.setItem("last_version", version);
-  },
-  setStatuses: function(statuses) {
-    this._setStatuses(statuses);
-    this.emitStatusesChange();
-  },
-  _setStatuses: function(statuses) {
-    BrowserStore.setItem("statuses", statuses);
-  },
-  setStatus: function(user_id, status) {
-    var statuses = this.getStatuses();
-    statuses[user_id] = status;
-    this._setStatuses(statuses);
-    this.emitStatusesChange();
-  },
-  getStatuses: function() {
-    return BrowserStore.getItem("statuses", {});
-  },
-  getStatus: function(id) {
-    return this.getStatuses()[id];
-  }
+        if (user.notify_props.all === 'true') {
+            keys.push('@all');
+        }
+
+        if (user.notify_props.channel === 'true') {
+            keys.push('@channel');
+        }
+
+        return keys;
+    },
+    getLastVersion: function() {
+        return BrowserStore.getItem('last_version', '');
+    },
+    setLastVersion: function(version) {
+        BrowserStore.setItem('last_version', version);
+    },
+    setStatuses: function(statuses) {
+        this._setStatuses(statuses);
+        this.emitStatusesChange();
+    },
+    _setStatuses: function(statuses) {
+        BrowserStore.setItem('statuses', statuses);
+    },
+    setStatus: function(userId, status) {
+        var statuses = this.getStatuses();
+        statuses[userId] = status;
+        this._setStatuses(statuses);
+        this.emitStatusesChange();
+    },
+    getStatuses: function() {
+        return BrowserStore.getItem('statuses', {});
+    },
+    getStatus: function(id) {
+        return this.getStatuses()[id];
+    }
 });
 
 UserStore.dispatchToken = AppDispatcher.register(function(payload) {
-  var action = payload.action;
+    var action = payload.action;
 
-  switch(action.type) {
-    case ActionTypes.RECIEVED_PROFILES:
-      for(var id in action.profiles) {
-        // profiles can have incomplete data, so don't overwrite current user
-        if (id === UserStore.getCurrentId()) continue;
-        var profile = action.profiles[id];
-        UserStore.saveProfile(profile);
-        UserStore.emitChange(profile.id);
-      }
-      break;
-    case ActionTypes.RECIEVED_ME:
-      UserStore.setCurrentUser(action.me);
-      UserStore.emitChange(action.me.id);
-      break;
-    case ActionTypes.RECIEVED_SESSIONS:
-      UserStore.setSessions(action.sessions);
-      UserStore.emitSessionsChange();
-      break;
-    case ActionTypes.RECIEVED_AUDITS:
-      UserStore.setAudits(action.audits);
-      UserStore.emitAuditsChange();
-      break;
-    case ActionTypes.RECIEVED_TEAMS:
-      UserStore.setTeams(action.teams);
-      UserStore.emitTeamsChange();
-      break;
-    case ActionTypes.RECIEVED_STATUSES:
-      UserStore._setStatuses(action.statuses);
-      UserStore.emitStatusesChange();
-      break;
+    switch (action.type) {
+        case ActionTypes.RECIEVED_PROFILES:
+            for (var id in action.profiles) {
+                // profiles can have incomplete data, so don't overwrite current user
+                if (id === UserStore.getCurrentId()) {
+                    continue;
+                }
+                var profile = action.profiles[id];
+                UserStore.saveProfile(profile);
+                UserStore.emitChange(profile.id);
+            }
+            break;
+        case ActionTypes.RECIEVED_ME:
+            UserStore.setCurrentUser(action.me);
+            UserStore.emitChange(action.me.id);
+            break;
+        case ActionTypes.RECIEVED_SESSIONS:
+            UserStore.setSessions(action.sessions);
+            UserStore.emitSessionsChange();
+            break;
+        case ActionTypes.RECIEVED_AUDITS:
+            UserStore.setAudits(action.audits);
+            UserStore.emitAuditsChange();
+            break;
+        case ActionTypes.RECIEVED_TEAMS:
+            UserStore.setTeams(action.teams);
+            UserStore.emitTeamsChange();
+            break;
+        case ActionTypes.RECIEVED_STATUSES:
+            UserStore._setStatuses(action.statuses);
+            UserStore.emitStatusesChange();
+            break;
 
-    default:
-  }
+        default:
+    }
 });
 
 UserStore.setMaxListeners(0);
diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx
index dc4fc1096..f35b0f6cc 100644
--- a/web/react/utils/async_client.jsx
+++ b/web/react/utils/async_client.jsx
@@ -322,7 +322,7 @@ module.exports.getMe = function() {
     if (isCallInProgress("getMe")) return;
 
     callTracker["getMe"] = utils.getTimestamp();
-    client.getMeSynchronous(
+    client.getMe(
         function(data, textStatus, xhr) {
             callTracker["getMe"] = 0;
 
diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx
index b8eda0075..6a1f7c820 100644
--- a/web/react/utils/client.jsx
+++ b/web/react/utils/client.jsx
@@ -279,32 +279,24 @@ module.exports.getAudits = function(userId, success, error) {
     });
 };
 
-module.exports.getMeSynchronous = function(success, error) {
-
-    var current_user = null;
+module.exports.getMe = function(success, error) {
 
     $.ajax({
-        async: false,
         url: "/api/v1/users/me",
         dataType: 'json',
         contentType: 'application/json',
         type: 'GET',
-        success: function(data, textStatus, xhr) {
-            current_user = data;
-            if (success) success(data, textStatus, xhr);
-        },
+        success: success,
         error: function(xhr, status, err) {
             var ieChecker = window.navigator.userAgent; // This and the condition below is used to check specifically for browsers IE10 & 11 to suppress a 200 'OK' error from appearing on login
             if (xhr.status != 200 || !(ieChecker.indexOf("Trident/7.0") > 0 || ieChecker.indexOf("Trident/6.0") > 0)) {
                 if (error) {
-                    e = handleError("getMeSynchronous", xhr, status, err);
+                    e = handleError("getMe", xhr, status, err);
                     error(e);
                 };
             };
         }
     });
-
-    return current_user;
 };
 
 module.exports.inviteMembers = function(data, success, error) {
@@ -762,7 +754,7 @@ module.exports.getProfiles = function(success, error) {
 };
 
 module.exports.uploadFile = function(formData, success, error) {
-    $.ajax({
+    var request = $.ajax({
         url: "/api/v1/files/upload",
         type: 'POST',
         data: formData,
@@ -771,12 +763,16 @@ module.exports.uploadFile = function(formData, success, error) {
         processData: false,
         success: success,
         error: function(xhr, status, err) {
-            e = handleError("uploadFile", xhr, status, err);
-            error(e);
+            if (err !== 'abort') {
+                e = handleError("uploadFile", xhr, status, err);
+                error(e);
+            }
         }
     });
 
     module.exports.track('api', 'api_files_upload');
+
+    return request;
 };
 
 module.exports.getPublicLink = function(data, success, error) {
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index a759cc579..2214b6239 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -913,3 +913,24 @@ module.exports.getFileName = function(path) {
     var split = path.split('/');
     return split[split.length - 1];
 };
+
+// Generates a RFC-4122 version 4 compliant globally unique identifier.
+module.exports.generateId = function() {
+    // implementation taken from http://stackoverflow.com/a/2117523
+    var id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';
+
+    id = id.replace(/[xy]/g, function(c) {
+        var r = Math.floor(Math.random() * 16);
+
+        var v;
+        if (c === 'x') {
+            v = r;
+        } else {
+            v = r & 0x3 | 0x8;
+        }
+
+        return v.toString(16);
+    });
+
+    return id;
+};