add upload openAPI file button

frontend/src/views/Apps.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect} from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { useInterval } from 'react-powerhooks';
 
@@ -134,6 +134,8 @@ const Apps = (props) => {
 	const [cursearch, setCursearch] = React.useState("")
 	const [sharingConfiguration, setSharingConfiguration] = React.useState("you")
 
+	const upload = useRef(null);
+
 	const { start, stop } = useInterval({
 	  	duration: 5000,
 	  	startImmediate: false,
@@ -1198,6 +1200,25 @@ const Apps = (props) => {
 		setLoadAppsModalOpen(false)
 	}
 
+	const uploadFile = (e) => {
+    const file = e.target.files[0];
+    const reader = new FileReader();
+
+    reader.addEventListener('load', (e) => {
+      const content = e.target.result;
+      setOpenApiData(content);
+    });
+
+    reader.readAsText(file);
+  };
+
+  useEffect(() => {
+		if(openApiData.length > 0) {
+    	setOpenApiError('');
+			validateOpenApi(openApiData);
+		}
+  }, [openApiData]);
+
 	const deleteModal = deleteModalOpen ? 
 		<Dialog 
 			open={deleteModalOpen}
@@ -1376,28 +1397,22 @@ const Apps = (props) => {
 					  <div />
 					  https://raw.githubusercontent.com/OAI/OpenAPI-Specification/master/examples/v2.0/json/uber.json
 						*/}
-					  Or paste the YAML or JSON specification 
+					  <p>Or upload a YAML or JSON specification</p>
-					<TextField
+          <input
-						style={{backgroundColor: inputColor}}
+            hidden
-						variant="outlined"
+            type="file"
-						multiline
+            ref={upload}
-						rows={6}
+            accept="application/JSON, text/yaml, text/x-yaml, application/x-yaml, application/vnd.yaml"
-						margin="normal"
+            multiple={false}
-						InputProps={{
+            onChange={uploadFile}
-							style:{
+          />
-								color: "white",
+          <Button
-								fontSize: "1em",
+            variant="contained"
-							},
+            color="primary"
-							endAdornment: <Button style={{marginLeft: 10, borderRadius: "0px", marginTop: "0px"}} variant="contained" disabled={openApiData.length === 0 || appValidation.length > 0} color="primary" onClick={() => {
+            onClick={() => upload.current.click()}
-								setOpenApiError("")
+          >
-								validateOpenApi(openApiData)
+            Upload
-							}}>Validate OpenAPI</Button>
+          </Button>
-						}}
-						onChange={e => setOpenApiData(e.target.value)}
-						helperText={<span style={{color:"white", marginBottom: "2px",}}>Must point to a version 2 or 3 specification.</span>}
-						placeholder="OpenAPI text"
-						fullWidth
-					  />
 					  {errorText}
 				</DialogContent>
 				<DialogActions>