Move inputFile ref to WriteDataForm

ui/src/data_explorer/components/WriteDataBody.js

@@ -10,10 +10,9 @@ const WriteDataBody = ({
   uploadContent,
   fileName,
   isManual,
-}) => {
+  fileInput,
-  let inputRef
+  handleFileOpen,
-
+}) => (
-  return (
   <div className="write-data-form--body">
     {isManual
       ? <textarea
@@ -30,13 +29,10 @@ const WriteDataBody = ({
             type="file"
             onChange={e => handleFile(e, false)}
             className="write-data-form--upload"
-              ref={r => (inputRef = r)}
+            ref={fileInput}
             accept="text/*, application/gzip"
           />
-            <button
+          <button className="btn btn-sm btn-primary" onClick={handleFileOpen}>
-              className="btn btn-sm btn-primary"
-              onClick={() => inputRef.click()}
-            >
             {uploadContent ? 'Upload a Different File' : 'Upload a File'}
           </button>
           {uploadContent
@@ -55,8 +51,7 @@ const WriteDataBody = ({
       uploadContent={uploadContent}
     />
   </div>
-  )
+)
-}
 
 const {func, string, bool} = PropTypes
 
@@ -69,6 +64,8 @@ WriteDataBody.propTypes = {
   uploadContent: string,
   fileName: string,
   isManual: bool,
+  fileInput: func.isRequired,
+  handleFileOpen: func.isRequired,
 }
 
 export default WriteDataBody

ui/src/data_explorer/components/WriteDataForm.js

@@ -27,6 +27,7 @@ class WriteDataForm extends Component {
     this.handleEdit = ::this.handleEdit
     this.handleFile = ::this.handleFile
     this.toggleWriteView = ::this.toggleWriteView
+    this.handleFileOpen = ::this.handleFileOpen
   }
 
   toggleWriteView(isManual) {
@@ -139,10 +140,12 @@ class WriteDataForm extends Component {
           />
           <WriteDataBody
             {...this.state}
+            fileInput={el => this.fileInput = el}
             handleEdit={this.handleEdit}
             handleFile={this.handleFile}
             handleKeyUp={this.handleKeyUp}
             handleSubmit={this.handleSubmit}
+            handleFileOpen={this.handleFileOpen}
           />
         </div>
         <div className="write-data-form--drag-here">