1 files changed, 37 insertions, 16 deletions

diff --git a/web/react/components/admin_console/license_settings.jsx b/web/react/components/admin_console/license_settings.jsx
index d4dfa13f2..9d2ec8030 100644
--- a/web/react/components/admin_console/license_settings.jsx
+++ b/web/react/components/admin_console/license_settings.jsx
@@ -27,6 +27,7 @@ class LicenseSettings extends React.Component {
 
         this.state = {
             fileSelected: false,
+            fileName: null,
             serverError: null
         };
     }
@@ -34,7 +35,7 @@ class LicenseSettings extends React.Component {
     handleChange() {
         const element = $(ReactDOM.findDOMNode(this.refs.fileInput));
         if (element.prop('files').length > 0) {
-            this.setState({fileSelected: true});
+            this.setState({fileSelected: true, fileName: element.prop('files')[0].name});
         }
     }
 
@@ -56,13 +57,13 @@ class LicenseSettings extends React.Component {
             () => {
                 Utils.clearFileInput(element[0]);
                 $('#upload-button').button('reset');
-                this.setState({serverError: null});
+                this.setState({fileSelected: false, fileName: null, serverError: null});
                 window.location.reload(true);
             },
             (error) => {
                 Utils.clearFileInput(element[0]);
                 $('#upload-button').button('reset');
-                this.setState({serverError: error.message});
+                this.setState({fileSelected: false, fileName: null, serverError: error.message});
             }
         );
     }
@@ -75,12 +76,12 @@ class LicenseSettings extends React.Component {
         Client.removeLicenseFile(
             () => {
                 $('#remove-button').button('reset');
-                this.setState({serverError: null});
+                this.setState({fileSelected: false, fileName: null, serverError: null});
                 window.location.reload(true);
             },
             (error) => {
                 $('#remove-button').button('reset');
-                this.setState({serverError: error.message});
+                this.setState({fileSelected: false, fileName: null, serverError: error.message});
             }
         );
     }
@@ -172,17 +173,36 @@ class LicenseSettings extends React.Component {
                 />
             );
 
+            let fileName;
+            if (this.state.fileName) {
+                fileName = this.state.fileName;
+            } else {
+                fileName = (
+                    <FormattedMessage
+                        id='admin.license.noFile'
+                        defaultMessage='No file uploaded'
+                    />
+                );
+            }
+
             licenseKey = (
                 <div className='col-sm-8'>
-                    <input
-                        className='pull-left'
-                        ref='fileInput'
-                        type='file'
-                        accept='.mattermost-license'
-                        onChange={this.handleChange}
-                    />
+                    <div className='file__upload'>
+                        <button className='btn btn-default'>
+                            <FormattedMessage
+                                id='admin.license.choose'
+                                defaultMessage='Choose File'
+                            />
+                        </button>
+                        <input
+                            ref='fileInput'
+                            type='file'
+                            accept='.mattermost-license'
+                            onChange={this.handleChange}
+                        />
+                    </div>
                     <button
-                        className={btnClass + ' pull-left'}
+                        className={btnClass}
                         disabled={!this.state.fileSelected}
                         onClick={this.handleSubmit}
                         id='upload-button'
@@ -193,11 +213,12 @@ class LicenseSettings extends React.Component {
                             defaultMessage='Upload'
                         />
                     </button>
-                    <br/>
-                    <br/>
+                    <div className='help-text no-margin'>
+                        {fileName}
+                    </div>
                     <br/>
                     {serverError}
-                    <p className='help-text'>
+                    <p className='help-text no-margin'>
                         <FormattedHTMLMessage
                             id='admin.license.uploadDesc'
                             defaultMessage='Upload a license key for Mattermost Enterprise Edition to upgrade this server. <a href="http://mattermost.com" target="_blank">Visit us online</a> to learn more about the benefits of Enterprise Edition or to purchase a key.'