Don't render fileDragAndDropDialog if it's not needed

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js

@@ -1,9 +1,11 @@
 'use strict';
 
 import React from 'react';
+import classNames from 'classnames';
 import ProgressBar from 'react-bootstrap/lib/ProgressBar';
 
 import FileDragAndDropDialog from './file_drag_and_drop_dialog';
+import FileDragAndDropErrorDialog from './file_drag_and_drop_error_dialog';
 import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator';
 
 import { FileStatus } from '../react_s3_fine_uploader_utils';
@@ -22,11 +24,11 @@ let FileDragAndDrop = React.createClass({
         onDrop: React.PropTypes.func.isRequired,
         onDragOver: React.PropTypes.func,
         onInactive: React.PropTypes.func,
-        filesToUpload: React.PropTypes.array,
         handleDeleteFile: React.PropTypes.func,
         handleCancelFile: React.PropTypes.func,
         handlePauseFile: React.PropTypes.func,
         handleResumeFile: React.PropTypes.func,
+        handleRetryFiles: React.PropTypes.func,
 
         enableLocalHashing: React.PropTypes.bool,
         uploadMethod: React.PropTypes.string,
@@ -142,23 +144,46 @@ let FileDragAndDrop = React.createClass({
         this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
     },
 
+    getPreviewIterator() {
+        const { areAssetsDownloadable, areAssetsEditable, filesToUpload } = this.props;
+
+        return (
+            <FileDragAndDropPreviewIterator
+                files={filesToUpload}
+                handleDeleteFile={this.handleDeleteFile}
+                handleCancelFile={this.handleCancelFile}
+                handlePauseFile={this.handlePauseFile}
+                handleResumeFile={this.handleResumeFile}
+                areAssetsDownloadable={areAssetsDownloadable}
+                areAssetsEditable={areAssetsEditable}/>
+        );
+    },
+
+    getUploadDialog() {
+        const { enableLocalHashing, fileClassToUpload, multiple, uploadMethod } = this.props;
+
+        return (
+            <FileDragAndDropDialog
+                multipleFiles={multiple}
+                onClick={this.handleOnClick}
+                enableLocalHashing={enableLocalHashing}
+                uploadMethod={uploadMethod}
+                fileClassToUpload={fileClassToUpload} />
+        );
+    },
+
     render: function () {
         const {
             filesToUpload,
             dropzoneInactive,
-            className,
             hashingProgress,
             handleCancelHashing,
             multiple,
-            enableLocalHashing,
-            uploadMethod,
             fileClassToUpload,
-            areAssetsDownloadable,
-            areAssetsEditable,
             allowedExtensions } = this.props;
 
         // has files only is true if there are files that do not have the status deleted, canceled, or failed
-        let hasFiles = filesToUpload
+        const hasFiles = filesToUpload
                             .filter((file) => {
                                 return file.status !== FileStatus.DELETED &&
                                     file.status !== FileStatus.CANCELED &&
@@ -167,14 +192,12 @@ let FileDragAndDrop = React.createClass({
                             })
                             .length > 0;
 
-        let updatedClassName = hasFiles ? 'has-files ' : '';
+        const failedFiles = filesToUpload.filter((file) => file.status === FileStatus.UPLOAD_FAILED);
-        updatedClassName += dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone';
+        let hasError = showError && errorClass && failedFiles.length > 0;
-        updatedClassName += ' file-drag-and-drop';
 
         // if !== -2: triggers a FileDragAndDrop-global spinner
         if(hashingProgress !== -2) {
             return (
-                <div className={className}>
                 <div className="file-drag-and-drop-hashing-dialog">
                     <p>{getLangText('Computing hash(es)... This may take a few minutes.')}</p>
                     <p>
@@ -185,30 +208,15 @@ let FileDragAndDrop = React.createClass({
                         label="%(percent)s%"
                         className="ascribe-progress-bar"/>
                 </div>
-                </div>
             );
         } else {
             return (
                 <div
-                    className={updatedClassName}
+                    className={classNames('file-drag-and-drop', dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone', { 'has-files': hasFiles })}
                     onDrag={this.handleDrop}
                     onDragOver={this.handleDragOver}
                     onDrop={this.handleDrop}>
-                        <FileDragAndDropDialog
+                        {!hasFiles && !hasError ? this.getUploadDialog() : null}
-                            multipleFiles={multiple}
-                            hasFiles={hasFiles}
-                            onClick={this.handleOnClick}
-                            enableLocalHashing={enableLocalHashing}
-                            uploadMethod={uploadMethod}
-                            fileClassToUpload={fileClassToUpload} />
-                        <FileDragAndDropPreviewIterator
-                            files={filesToUpload}
-                            handleDeleteFile={this.handleDeleteFile}
-                            handleCancelFile={this.handleCancelFile}
-                            handlePauseFile={this.handlePauseFile}
-                            handleResumeFile={this.handleResumeFile}
-                            areAssetsDownloadable={areAssetsDownloadable}
-                            areAssetsEditable={areAssetsEditable}/>
                         {/*
                             Opera doesn't trigger simulated click events
                             if the targeted input has `display:none` set.

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js

@@ -9,7 +9,6 @@ import { getCurrentQueryParams } from '../../../utils/url_utils';
 
 let FileDragAndDropDialog = React.createClass({
     propTypes: {
-        hasFiles: React.PropTypes.bool,
         multipleFiles: React.PropTypes.bool,
         enableLocalHashing: React.PropTypes.bool,
         uploadMethod: React.PropTypes.string,
@@ -36,16 +35,12 @@ let FileDragAndDropDialog = React.createClass({
 
     render() {
         const {
-            hasFiles,
             multipleFiles,
             enableLocalHashing,
             uploadMethod,
             fileClassToUpload,
             onClick } = this.props;
 
-        if (hasFiles) {
-            return null;
-        } else {
         if (enableLocalHashing && !uploadMethod) {
             const currentQueryParams = getCurrentQueryParams();
 
@@ -112,7 +107,6 @@ let FileDragAndDropDialog = React.createClass({
             }
         }
     }
-    }
 });
 
 export default FileDragAndDropDialog;