From 0db85e4a8c14f1845a438f8dfb8733cf479c32b1 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Wed, 13 Dec 2023 16:56:02 -0800
Subject: [PATCH] Add file picker to splash page

---
 auspice_client_customisation/splash.js | 14 ++++++++++++--
 auspice_client_customisation/styles.js | 13 +++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/auspice_client_customisation/splash.js b/auspice_client_customisation/splash.js
index 4d773ef..32558e2 100644
--- a/auspice_client_customisation/splash.js
+++ b/auspice_client_customisation/splash.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { handleDroppedFiles } from "./handleDroppedFiles";
-import { P, Bold, Title, CenterContent, Line, NextstrainTitle, GitHub } from './styles';
+import { P, Bold, Title, UploadBox, UploadButton, CenterContent, Line, NextstrainTitle, GitHub } from './styles';
 import pkg from "../package.json";
 
 
@@ -25,6 +25,11 @@ const SplashContent = (props) => {
     handleDroppedFiles(props.dispatch, event.dataTransfer.files);
   }
 
+  function handlePicked(event) {
+    event.preventDefault();
+    handleDroppedFiles(props.dispatch, event.target.files);
+  }
+
   return (
     <div className="static container">
 
@@ -45,7 +50,12 @@ const SplashContent = (props) => {
 
       <CenterContent>
         <Line/>
-          <h2 style={{color: "#30353f", fontSize: 24}}>{`Drag & Drop a dataset on here to view`}</h2>
+          <UploadBox>
+            <input type="file" multiple onChange={handlePicked} style={{display: "none"}} />
+            <h2 style={{color: "#30353f", fontSize: 24}}>{`Drag & Drop a dataset on here to view`}</h2>
+            <div style={{marginTop: "14px"}}></div>
+            <UploadButton>Select files</UploadButton>
+          </UploadBox>
         <Line/>
       </CenterContent>
 
diff --git a/auspice_client_customisation/styles.js b/auspice_client_customisation/styles.js
index 1dace1b..1112824 100644
--- a/auspice_client_customisation/styles.js
+++ b/auspice_client_customisation/styles.js
@@ -33,6 +33,19 @@ export const Bold = styled.span`
   font-weight: 500;
 `;
 
+export const UploadBox = styled.label`
+  cursor: pointer;
+  text-align: center;
+`;
+
+export const UploadButton = styled.span`
+  display: inline-block;
+  border-radius: 4px;
+  padding: 10px 20px;
+  color: white;
+  background-color: #63AC9A;
+`;
+
 
 export const CenterContent = (props) => (
   <div className="row">