[MM-29408] -migrate-file-upload-refs (#6677)

Automatic Merge

components/admin_console/file_upload_setting.jsx

@@ -1,6 +1,5 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-/* eslint-disable react/no-string-refs */
 
 import $ from 'jquery';
 import PropTypes from 'prop-types';
@@ -32,10 +31,12 @@ export default class FileUploadSetting extends Setting {
  fileName: null,
  serverError: props.error,
  };
+ this.fileInputRef = React.createRef();
+ this.uploadButtonRef = React.createRef();
  }
 
  handleChange = () => {
- const files = this.refs.fileInput.files;
+ const files = this.fileInputRef.current.files;
  if (files && files.length > 0) {
  this.setState({fileSelected: true, fileName: files[0].name});
  }
@@ -44,11 +45,11 @@ export default class FileUploadSetting extends Setting {
  handleSubmit = (e) => {
  e.preventDefault();
 
- $(this.refs.upload_button).button('loading');
- this.props.onSubmit(this.props.id, this.refs.fileInput.files[0], (error) => {
- $(this.refs.upload_button).button('reset');
+ $(this.uploadButtonRef.current).button('loading');
+ this.props.onSubmit(this.props.id, this.fileInputRef.current.files[0], (error) => {
+ $(this.uploadButtonRef.current).button('reset');
  if (error) {
- Utils.clearFileInput(this.refs.fileInput);
+ Utils.clearFileInput(this.fileInputRef.current);
  }
  });
  }
@@ -94,7 +95,7 @@ export default class FileUploadSetting extends Setting {
  />
  </button>
  <input
- ref='fileInput'
+ ref={this.fileInputRef}
  type='file'
  disabled={this.props.disabled}
  accept={this.props.fileType}
@@ -105,7 +106,7 @@ export default class FileUploadSetting extends Setting {
  className={btnClass}
  disabled={!this.state.fileSelected}
  onClick={this.handleSubmit}
- ref='upload_button'
+ ref={this.uploadButtonRef}
  data-loading-text={`<span class='glyphicon glyphicon-refresh glyphicon-refresh-animate'></span> ${this.props.uploadingText}`}
  >
  <FormattedMessage