1 files changed, 52 insertions, 21 deletions

diff --git a/web/react/components/setting_upload.jsx b/web/react/components/setting_upload.jsx
index fad27b355..85e452d4e 100644
--- a/web/react/components/setting_upload.jsx
+++ b/web/react/components/setting_upload.jsx
@@ -11,14 +11,16 @@ export default class SettingsUpload extends React.Component {
 
         this.state = {
             clientError: this.props.clientError,
-            serverError: this.props.serverError
+            serverError: this.props.serverError,
+            fileSelected: ''
         };
     }
 
     componentWillReceiveProps() {
         this.setState({
             clientError: this.props.clientError,
-            serverError: this.props.serverError
+            serverError: this.props.serverError,
+            fileSelected: ''
         });
     }
 
@@ -26,7 +28,8 @@ export default class SettingsUpload extends React.Component {
         e.preventDefault();
         this.setState({
             clientError: '',
-            serverError: ''
+            serverError: '',
+            fileSelected: ''
         });
     }
 
@@ -45,8 +48,9 @@ export default class SettingsUpload extends React.Component {
         if (filename.substring(3, 11) === 'fakepath') {
             filename = filename.substring(12);
         }
-        $(e.target).closest('li').find('.file-status').addClass('hide');
-        $(e.target).closest('li').find('.file-name').removeClass('hide').html(filename);
+        this.setState({
+            fileSelected: filename
+        });
     }
 
     render() {
@@ -62,6 +66,48 @@ export default class SettingsUpload extends React.Component {
                 <div className='file-status'>{this.state.serverError}</div>
             );
         }
+        var fileSelected = (
+            <div>
+                <span className='btn btn-sm btn-primary btn-file sel-btn'>
+                    {'Select file'}
+                    <input
+                        ref='uploadinput'
+                        accept={this.props.fileTypesAccepted}
+                        type='file'
+                        onChange={this.onFileSelect}
+                    />
+                </span>
+                <a
+                    className={'btn btn-sm btn-primary disabled'}
+                    onClick={this.doSubmit}
+                >
+                    {'Import'}
+                </a>
+                <div className='file-status file-name hidden'></div>
+            </div>
+        );
+        if (this.state.fileSelected) {
+            fileSelected = (
+                <div>
+                    <span className='btn btn-sm btn-primary btn-file sel-btn'>
+                        {'Select file'}
+                        <input
+                            ref='uploadinput'
+                            accept={this.props.fileTypesAccepted}
+                            type='file'
+                            onChange={this.onFileSelect}
+                        />
+                    </span>
+                    <a
+                        className={'btn btn-sm btn-primary'}
+                        onClick={this.doSubmit}
+                    >
+                        {'Import'}
+                    </a>
+                    <div className='file-status file-name'>{this.state.fileSelected}</div>
+                </div>
+            );
+        }
         return (
             <ul className='section-max'>
                 <li className='col-sm-12 section-title'>{this.props.title}</li>
@@ -69,22 +115,7 @@ export default class SettingsUpload extends React.Component {
                 <li className='col-sm-offset-3 col-sm-9'>
                     <ul className='setting-list'>
                         <li className='setting-list-item'>
-                            <span className='btn btn-sm btn-primary btn-file sel-btn'>
-                                Select file
-                                <input
-                                    ref='uploadinput'
-                                    accept={this.props.fileTypesAccepted}
-                                    type='file'
-                                    onChange={this.onFileSelect}
-                                />
-                            </span>
-                            <a
-                                className={'btn btn-sm btn-primary'}
-                                onClick={this.doSubmit}
-                            >
-                                Import
-                            </a>
-                            <div className='file-status file-name hide'></div>
+                            {fileSelected}
                             {serverError}
                             {clientError}
                         </li>