summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--api/file.go8
-rw-r--r--model/file.go1
-rw-r--r--web/react/components/create_comment.jsx217
-rw-r--r--web/react/components/create_post.jsx246
-rw-r--r--web/react/components/file_preview.jsx14
-rw-r--r--web/react/components/file_upload.jsx163
-rw-r--r--web/react/stores/post_store.jsx13
-rw-r--r--web/react/utils/client.jsx10
-rw-r--r--web/react/utils/utils.jsx21
9 files changed, 405 insertions, 288 deletions
diff --git a/api/file.go b/api/file.go
index bf1c59422..558f9357e 100644
--- a/api/file.go
+++ b/api/file.go
@@ -71,7 +71,9 @@ func uploadFile(c *Context, w http.ResponseWriter, r *http.Request) {
files := m.File["files"]
resStruct := &model.FileUploadResponse{
- Filenames: []string{}}
+ Filenames: []string{},
+ ClientIds: []string{},
+ }
imageNameList := []string{}
imageDataList := [][]byte{}
@@ -113,6 +115,10 @@ func uploadFile(c *Context, w http.ResponseWriter, r *http.Request) {
resStruct.Filenames = append(resStruct.Filenames, fileUrl)
}
+ for _, clientId := range props["client_ids"] {
+ resStruct.ClientIds = append(resStruct.ClientIds, clientId)
+ }
+
fireAndForgetHandleImages(imageNameList, imageDataList, c.Session.TeamId, channelId, c.Session.UserId)
w.Write([]byte(resStruct.ToJson()))
diff --git a/model/file.go b/model/file.go
index 7f5a3f916..3d38ddbd1 100644
--- a/model/file.go
+++ b/model/file.go
@@ -19,6 +19,7 @@ var (
type FileUploadResponse struct {
Filenames []string `json:"filenames"`
+ ClientIds []string `json:"client_ids"`
}
func FileUploadResponseFromJson(data io.Reader) *FileUploadResponse {
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/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/utils/client.jsx b/web/react/utils/client.jsx
index 3375da7cf..6a1f7c820 100644
--- a/web/react/utils/client.jsx
+++ b/web/react/utils/client.jsx
@@ -754,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,
@@ -763,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;
+};
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-06-26 00:56:30 +0000