Merge pull request #1464 from hmhealey/plt733

PLT-733 Changed file uploads to scroll currently uploading files into view

1 files changed, 14 insertions, 7 deletions

diff --git a/web/react/components/file_preview.jsx b/web/react/components/file_preview.jsx
index df5deb8bc..b8c86ed67 100644
--- a/web/react/components/file_preview.jsx
+++ b/web/react/components/file_preview.jsx
@@ -8,9 +8,14 @@ export default class FilePreview extends React.Component {
         super(props);
 
         this.handleRemove = this.handleRemove.bind(this);
+    }
 
-        this.state = {};
+    componentDidUpdate() {
+        if (this.props.uploadsInProgress.length > 0) {
+            ReactDOM.findDOMNode(this.refs[this.props.uploadsInProgress[0]]).scrollIntoView();
+        }
     }
+
     handleRemove(e) {
         var previewDiv = e.target.parentNode.parentNode;
 
@@ -20,9 +25,10 @@ export default class FilePreview extends React.Component {
             this.props.onRemove(previewDiv.getAttribute('data-client-id'));
         }
     }
+
     render() {
         var previews = [];
-        this.props.files.forEach(function setupPreview(fullFilename) {
+        this.props.files.forEach((fullFilename) => {
             var filename = fullFilename;
             var originalFilename = filename;
             var filenameSplit = filename.split('.');
@@ -72,11 +78,12 @@ export default class FilePreview extends React.Component {
                     </div>
                 );
             }
-        }.bind(this));
+        });
 
-        this.props.uploadsInProgress.forEach(function addUploadsInProgress(clientId) {
+        this.props.uploadsInProgress.forEach((clientId) => {
             previews.push(
                 <div
+                    ref={clientId}
                     key={clientId}
                     className='preview-div'
                     data-client-id={clientId}
@@ -93,7 +100,7 @@ export default class FilePreview extends React.Component {
                     </a>
                 </div>
             );
-        }.bind(this));
+        });
 
         return (
             <div className='preview-container'>
@@ -104,8 +111,8 @@ export default class FilePreview extends React.Component {
 }
 
 FilePreview.defaultProps = {
-    files: null,
-    uploadsInProgress: null
+    files: [],
+    uploadsInProgress: []
 };
 FilePreview.propTypes = {
     onRemove: React.PropTypes.func.isRequired,