Add file picker to splash page

nextstrain · Dec 26, 2023 · 0db85e4 · 0db85e4
1 parent 47e07a8
commit 0db85e4
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git 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
@@ -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">