diff options
author | Mika Andrianarijaona <mikaoelitiana@users.noreply.github.com> | 2017-01-19 00:00:21 +0300 |
---|---|---|
committer | enahum <nahumhbl@gmail.com> | 2017-01-18 18:00:21 -0300 |
commit | 9eb57278413d4a4417e574f2bddb5bc0b2807d14 (patch) | |
tree | 3316c7482c24a7f47e994b42d8e7332002359592 /webapp/components | |
parent | e15ae2253a15c7951c31ce0a2f9eea188ba2b639 (diff) | |
download | chat-9eb57278413d4a4417e574f2bddb5bc0b2807d14.tar.gz chat-9eb57278413d4a4417e574f2bddb5bc0b2807d14.tar.bz2 chat-9eb57278413d4a4417e574f2bddb5bc0b2807d14.zip |
PLT-137: Disable upload button when max uploads reached (#5053)
* Change upload button color opacity when max reached
* Display max upload message
* Remove error when deleting preview
* Clear error message in side-bar
when user reaches max upload and error is displayed in side-bar, removing one file won't remove error message
* Scroll in preview after file upload in sidebar
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/create_comment.jsx | 7 | ||||
-rw-r--r-- | webapp/components/create_post.jsx | 3 | ||||
-rw-r--r-- | webapp/components/file_preview.jsx | 5 | ||||
-rw-r--r-- | webapp/components/file_upload.jsx | 19 |
4 files changed, 31 insertions, 3 deletions
diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx index 0e9d2a41a..d9d66c8fa 100644 --- a/webapp/components/create_comment.jsx +++ b/webapp/components/create_comment.jsx @@ -331,6 +331,9 @@ export default class CreateComment extends React.Component { draft.fileInfos = draft.fileInfos.concat(fileInfos); PostStore.storeCommentDraft(this.props.rootId, draft); + // Focus on preview if needed + this.refs.preview.refs.container.scrollIntoViewIfNeeded(); + this.setState({uploadsInProgress: draft.uploadsInProgress, fileInfos: draft.fileInfos}); } @@ -355,6 +358,9 @@ export default class CreateComment extends React.Component { const fileInfos = this.state.fileInfos; const uploadsInProgress = this.state.uploadsInProgress; + // Clear previous errors + this.handleUploadError(null); + // id can either be the id of an uploaded file or the client id of an in progress upload let index = fileInfos.findIndex((info) => info.id === id); if (index === -1) { @@ -432,6 +438,7 @@ export default class CreateComment extends React.Component { fileInfos={this.state.fileInfos} onRemove={this.removePreview} uploadsInProgress={this.state.uploadsInProgress} + ref='preview' /> ); } diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index e1b2ca059..9269633ff 100644 --- a/webapp/components/create_post.jsx +++ b/webapp/components/create_post.jsx @@ -297,6 +297,9 @@ export default class CreatePost extends React.Component { const fileInfos = Object.assign([], this.state.fileInfos); const uploadsInProgress = this.state.uploadsInProgress; + // Clear previous errors + this.handleUploadError(null); + // id can either be the id of an uploaded file or the client id of an in progress upload let index = fileInfos.findIndex((info) => info.id === id); if (index === -1) { diff --git a/webapp/components/file_preview.jsx b/webapp/components/file_preview.jsx index 53cec7f7b..624bfaf44 100644 --- a/webapp/components/file_preview.jsx +++ b/webapp/components/file_preview.jsx @@ -84,7 +84,10 @@ export default class FilePreview extends React.Component { }); return ( - <div className='file-preview__container'> + <div + className='file-preview__container' + ref='container' + > {previews} </div> ); diff --git a/webapp/components/file_upload.jsx b/webapp/components/file_upload.jsx index 9eff25ab5..36beb8c91 100644 --- a/webapp/components/file_upload.jsx +++ b/webapp/components/file_upload.jsx @@ -47,6 +47,7 @@ class FileUpload extends React.Component { this.cancelUpload = this.cancelUpload.bind(this); this.pasteUpload = this.pasteUpload.bind(this); this.keyUpload = this.keyUpload.bind(this); + this.handleMaxUploadReached = this.handleMaxUploadReached.bind(this); this.state = { requests: {} @@ -309,6 +310,16 @@ class FileUpload extends React.Component { } } + handleMaxUploadReached(e) { + e.preventDefault(); + + const {formatMessage} = this.props.intl; + + this.props.onUploadError(formatMessage(holders.limited, {count: Constants.MAX_UPLOAD_FILES})); + + return false; + } + render() { let multiple = true; if (UserAgent.isMobileApp()) { @@ -322,10 +333,14 @@ class FileUpload extends React.Component { accept = 'image/*'; } + const channelId = this.props.channelId || ChannelStore.getCurrentId(); + + const uploadsRemaining = Constants.MAX_UPLOAD_FILES - this.props.getFileCount(channelId); + return ( <span ref='input' - className='btn btn-file' + className={'btn btn-file' + (uploadsRemaining <= 0 ? ' btn-file__disabled' : '')} > <span className='icon' @@ -335,7 +350,7 @@ class FileUpload extends React.Component { ref='fileInput' type='file' onChange={this.handleChange} - onClick={this.props.onClick} + onClick={uploadsRemaining > 0 ? this.props.onClick : this.handleMaxUploadReached} multiple={multiple} accept={accept} /> |