Move inputFile ref to WriteDataForm

ui/src/data_explorer/components/WriteDataBody.js

@@ -10,53 +10,48 @@ const WriteDataBody = ({
   uploadContent,
   fileName,
   isManual,
-}) => {
-  let inputRef
-
-  return (
-    <div className="write-data-form--body">
-      {isManual
-        ? <textarea
-            className="form-control write-data-form--input"
-            autoComplete="off"
-            spellCheck="false"
-            placeholder="<measurement>,<tag_key>=<tag_value> <field_key>=<field_value>"
-            onKeyUp={handleKeyUp}
-            onChange={handleEdit}
-            autoFocus={true}
+  fileInput,
+  handleFileOpen,
+}) => (
+  <div className="write-data-form--body">
+    {isManual
+      ? <textarea
+          className="form-control write-data-form--input"
+          autoComplete="off"
+          spellCheck="false"
+          placeholder="<measurement>,<tag_key>=<tag_value> <field_key>=<field_value>"
+          onKeyUp={handleKeyUp}
+          onChange={handleEdit}
+          autoFocus={true}
+        />
+      : <div className="write-data-form--file">
+          <input
+            type="file"
+            onChange={e => handleFile(e, false)}
+            className="write-data-form--upload"
+            ref={fileInput}
+            accept="text/*, application/gzip"
           />
-        : <div className="write-data-form--file">
-            <input
-              type="file"
-              onChange={e => handleFile(e, false)}
-              className="write-data-form--upload"
-              ref={r => (inputRef = r)}
-              accept="text/*, application/gzip"
-            />
-            <button
-              className="btn btn-sm btn-primary"
-              onClick={() => inputRef.click()}
-            >
-              {uploadContent ? 'Upload a Different File' : 'Upload a File'}
-            </button>
-            {uploadContent
-              ? <span className="write-data-form--filepath_selected">
-                  <span className="icon checkmark" />
-                  {fileName}
-                </span>
-              : <span className="write-data-form--filepath_empty">
-                  No file selected
-                </span>}
-          </div>}
-      <WriteDataFooter
-        isManual={isManual}
-        inputContent={inputContent}
-        handleSubmit={handleSubmit}
-        uploadContent={uploadContent}
-      />
-    </div>
-  )
-}
+          <button className="btn btn-sm btn-primary" onClick={handleFileOpen}>
+            {uploadContent ? 'Upload a Different File' : 'Upload a File'}
+          </button>
+          {uploadContent
+            ? <span className="write-data-form--filepath_selected">
+                <span className="icon checkmark" />
+                {fileName}
+              </span>
+            : <span className="write-data-form--filepath_empty">
+                No file selected
+              </span>}
+        </div>}
+    <WriteDataFooter
+      isManual={isManual}
+      inputContent={inputContent}
+      handleSubmit={handleSubmit}
+      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">