From 9ef2c8cc82f3474b2345c1d93f3f1794e71df5fa Mon Sep 17 00:00:00 2001
From: vkovtun <viktor.kovtun@id.ethz.ch>
Date: Fri, 21 Jul 2023 16:41:55 +0200
Subject: [PATCH] SSDM-13579: Made file upload popup appear.

---
 .../database/data-browser/Toolbar.jsx         | 21 +++++--
 .../database/data-browser/UploadButton.jsx    | 59 +++++++++++++++++++
 2 files changed, 74 insertions(+), 6 deletions(-)
 create mode 100644 ui-admin/src/js/components/database/data-browser/UploadButton.jsx

diff --git a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
index b01b934b5fa..ceb7a32bdb4 100644
--- a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
+++ b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
@@ -31,6 +31,7 @@ import Button from '@material-ui/core/Button'
 import IconButton from '@material-ui/core/IconButton'
 import Container from "@src/js/components/common/form/Container.jsx";
 import Popover from "@material-ui/core/Popover";
+import UploadButton from "@src/js/components/database/data-browser/UploadButton.jsx";
 
 const color = 'secondary'
 const buttonSize = 'small'
@@ -98,28 +99,36 @@ class Toolbar extends React.Component {
     })
   }
 
+  handleUploadFiles() {
+
+  }
+
+  handleUploadFolders() {
+
+  }
+
   renderUploadButtons() {
     const { classes } = this.props
     return (
       <div className={classes.uploadButtonsContainer}>
-        <Button
+        <UploadButton
           classes={{ root: [classes.button, classes.marginBottom].join(' ') }}
           color={color}
           size={buttonSize}
           variant='contained'
-          // onClick={this.controller.handleNewFolderClick}
+          onClick={this.handleUploadFiles}
         >
           File upload
-        </Button>
-        <Button
+        </UploadButton>
+        <UploadButton
           classes={{ root: classes.button }}
           color={color}
           size={buttonSize}
           variant='contained'
-          // onClick={this.controller.handleNewFolderClick}
+          onClick={this.handleUploadFolders}
         >
           Folder upload
-        </Button>
+        </UploadButton>
       </div>
     )
   }
diff --git a/ui-admin/src/js/components/database/data-browser/UploadButton.jsx b/ui-admin/src/js/components/database/data-browser/UploadButton.jsx
new file mode 100644
index 00000000000..918a0b69250
--- /dev/null
+++ b/ui-admin/src/js/components/database/data-browser/UploadButton.jsx
@@ -0,0 +1,59 @@
+/*
+ *  Copyright ETH 2023 Zürich, Scientific IT Services
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+import React, { useRef } from "react";
+import { withStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
+
+const styles = () => ({
+  invisible: {
+    display: 'none'
+  }
+})
+
+class UploadButton extends React.Component {
+
+  render () {
+    const { children, classes, size, variant, color, onClick } = this.props;
+    const fileInputRef = React.createRef();
+
+    return (
+      <div>
+        {/* Hidden file input */}
+        <input
+          type="file"
+          ref={fileInputRef}
+          className={classes.invisible}
+          onChange={onClick}
+        />
+
+        {/* Button to trigger the file input */}
+        <Button
+          classes={{ root: classes.button }}
+          color={color}
+          size={size}
+          variant={variant}
+          onClick={() => fileInputRef.current.click()}
+        >
+          {children}
+        </Button>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(UploadButton)
\ No newline at end of file
-- 
GitLab