fixes mm-1318 only allow 5 files to be uploaded at a time

web/react/components/create_comment.jsx

@@ -112,13 +112,28 @@ module.exports = React.createClass({
         return { messageText: '', uploadsInProgress: 0, previews: [], submitting: false };
     },
     setUploads: function(val) {
-        var num = this.state.uploadsInProgress + val;
+        var oldInProgress = this.state.uploadsInProgress
-        this.setState({uploadsInProgress: num});
+        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;
+
+        this.setState({uploadsInProgress: newInProgress});
+
+        return numToUpload;
     },
     render: function() {
 
         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 preview = <div/>;
         if (this.state.previews.length > 0 || this.state.uploadsInProgress > 0) {
@@ -129,13 +144,6 @@ module.exports = React.createClass({
                     uploadsInProgress={this.state.uploadsInProgress} />
             );
         }
-        var limit_previews = ""
-        if (this.state.previews.length > 5) {
-            limit_previews = <div className='has-error'><label className='control-label'>{ "Note: While all files will be available, only first five will show thumbnails." }</label></div>
-        }
-        if (this.state.previews.length > 20) {
-            limit_previews = <div className='has-error'><label className='control-label'>{ "Note: Uploads limited to 20 files maximum. Please use additional posts for more files." }</label></div>
-        }
 
         return (
             <form onSubmit={this.handleSubmit}>
@@ -159,7 +167,7 @@ module.exports = React.createClass({
                         <input type="button" className="btn btn-primary comment-btn pull-right" value="Add Comment" onClick={this.handleSubmit} />
                         { post_error }
                         { server_error }
-                        { limit_previews }
+                        { limit_error }
                     </div>
                 </div>
                 { preview }

web/react/components/create_post.jsx

@@ -51,7 +51,7 @@ module.exports = React.createClass({
                 false,
                 function(data) {
                     PostStore.storeDraft(data.channel_id, user_id, null);
-                    this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null });
+                    this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null, limit_error: null });
 
                     if (data.goto_location.length > 0) {
                         window.location.href = data.goto_location;
@@ -71,7 +71,7 @@ module.exports = React.createClass({
             client.createPost(post, ChannelStore.getCurrent(),
                 function(data) {
                     PostStore.storeDraft(data.channel_id, data.user_id, null);
-                    this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null });
+                    this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null, limit_error: null });
                     this.resizePostHolder();
                     AsyncClient.getPosts(true);
 
@@ -207,21 +207,36 @@ module.exports = React.createClass({
         return { channel_id: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: 0, previews: previews, submitting: false, initialText: messageText };
     },
     setUploads: function(val) {
-        var num = this.state.uploadsInProgress + 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."});
+        } else {
+            this.setState({limit_error: null});
+        }
+
+        var numToUpload = newInProgress - oldInProgress;
+        if (numToUpload <= 0) return 0;
+
         var draft = PostStore.getCurrentDraft();
         if (!draft) {
             draft = {}
             draft['message'] = '';
             draft['previews'] = [];
         }
-        draft['uploadsInProgress'] = num;
+        draft['uploadsInProgress'] = newInProgress;
         PostStore.storeCurrentDraft(draft);
-        this.setState({uploadsInProgress: num});
+        this.setState({uploadsInProgress: newInProgress});
+
+        return numToUpload;
     },
     render: function() {
 
         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 preview = <div/>;
         if (this.state.previews.length > 0 || this.state.uploadsInProgress > 0) {
@@ -232,13 +247,6 @@ module.exports = React.createClass({
                     uploadsInProgress={this.state.uploadsInProgress} />
             );
         }
-        var limit_previews = ""
-        if (this.state.previews.length > 5) {
-            limit_previews = <div className='has-error'><label className='control-label'>{ "Note: While all files will be available, only first five will show thumbnails." }</label></div>
-        }
-        if (this.state.previews.length > 20) {
-            limit_previews = <div className='has-error'><label className='control-label'>{ "Note: Uploads limited to 20 files maximum. Please use additional posts for more files." }</label></div>
-        }
 
         return (
             <form id="create_post" ref="topDiv" role="form" onSubmit={this.handleSubmit}>
@@ -260,7 +268,7 @@ module.exports = React.createClass({
                     <div className={post_error ? 'post-create-footer has-error' : 'post-create-footer'}>
                         { post_error }
                         { server_error }
-                        { limit_previews }
+                        { limit_error }
                         { preview }
                         <MsgTyping channelId={this.state.channel_id} parentId=""/>
                     </div>

web/react/components/file_upload.jsx

@@ -12,18 +12,18 @@ module.exports = React.createClass({
 
         this.props.onUploadError(null);
 
-        //This looks redundant, but must be done this way due to
+        // This looks redundant, but must be done this way due to
-        //setState being an asynchronous call
+        // setState being an asynchronous call
         var numFiles = 0;
-        for(var i = 0; i < files.length && i <= 20 ; i++) {
+        for(var i = 0; i < files.length && i < Constants.MAX_UPLOAD_FILES; i++) {
             if (files[i].size <= Constants.MAX_FILE_SIZE) {
                 numFiles++;
             }
         }
 
-        this.props.setUploads(numFiles);
+        var numToUpload = this.props.setUploads(numFiles);
 
-        for (var i = 0; i < files.length && i <= 20; i++) {
+        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");
                 continue;
@@ -70,8 +70,8 @@ module.exports = React.createClass({
 
             self.props.onUploadError(null);
 
-            //This looks redundant, but must be done this way due to
+            // This looks redundant, but must be done this way due to
-            //setState being an asynchronous call
+            // setState being an asynchronous call
             var items = e.clipboardData.items;
             var numItems = 0;
             if (items) {
@@ -87,9 +87,9 @@ module.exports = React.createClass({
                     }
                 }
 
-                self.props.setUploads(numItems);
+                var numToUpload = self.props.setUploads(numItems);
 
-                for (var i = 0; i < items.length; i++) {
+                for (var i = 0; i < items.length && i < numToUpload; i++) {
                     if (items[i].type.indexOf("image") !== -1) {
                         var file = items[i].getAsFile();
 

web/react/utils/constants.jsx

@@ -45,6 +45,7 @@ module.exports = {
   PATCH_TYPES: ['patch'],
   ICON_FROM_TYPE: {'audio': 'audio', 'video': 'video', 'spreadsheet': 'ppt', 'pdf': 'pdf', 'code': 'code' , 'word': 'word' , 'excel': 'excel' , 'patch': 'patch', 'other': 'generic'},
   MAX_DISPLAY_FILES: 5,
+  MAX_UPLOAD_FILES: 5,
   MAX_FILE_SIZE: 50000000, // 50 MB
   DEFAULT_CHANNEL: 'town-square',
   POST_CHUNK_SIZE: 60,