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

1 files changed, 17 insertions, 2 deletions

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}
                 />