From 14f983828bb7cfa93919af2ebfb4764413fc90fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ma=C3=ABlann=20Barciet?= <maelann.barciet@gmail.com>
Date: Thu, 22 Oct 2020 20:17:02 +0200
Subject: [PATCH] add upload openAPI file button

---
 frontend/src/views/Apps.jsx | 61 +++++++++++++++++++++++--------------
 1 file changed, 38 insertions(+), 23 deletions(-)

diff --git a/frontend/src/views/Apps.jsx b/frontend/src/views/Apps.jsx
index 1245d15f..d5f0cddc 100644
--- a/frontend/src/views/Apps.jsx
+++ b/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 
-					<TextField
-						style={{backgroundColor: inputColor}}
-						variant="outlined"
-						multiline
-						rows={6}
-						margin="normal"
-						InputProps={{
-							style:{
-								color: "white",
-								fontSize: "1em",
-							},
-							endAdornment: <Button style={{marginLeft: 10, borderRadius: "0px", marginTop: "0px"}} variant="contained" disabled={openApiData.length === 0 || appValidation.length > 0} color="primary" onClick={() => {
-								setOpenApiError("")
-								validateOpenApi(openApiData)
-							}}>Validate OpenAPI</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
-					  />
+					  <p>Or upload a YAML or JSON specification</p>
+          <input
+            hidden
+            type="file"
+            ref={upload}
+            accept="application/JSON, text/yaml, text/x-yaml, application/x-yaml, application/vnd.yaml"
+            multiple={false}
+            onChange={uploadFile}
+          />
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => upload.current.click()}
+          >
+            Upload
+          </Button>
 					  {errorText}
 				</DialogContent>
 				<DialogActions>