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

5 files changed, 40 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}
                 />
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index a04865bd8..9448ad767 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -437,6 +437,15 @@
                 @include opacity(.9);
                 box-shadow: none;
             }
+
+            &.btn-file__disabled {
+                @include opacity(.1);
+                
+                &:hover,
+                &:active {
+                    @include opacity(.1);
+                }
+            }
         }
 
         textarea {