Add file picker to splash page

nextstrain · Dec 26, 2023 · 2e3c8ff · 2e3c8ff
1 parent 3a16857
commit 2e3c8ff
Show file tree

Hide file tree

Showing 2 changed files with 26 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, NextstrainTitle, CenterContent, Line, GitHub } from './styles';
+import { P, Bold, Title, UploadBox, UploadButton, NextstrainTitle, CenterContent, Line, 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,13 @@ const SplashContent = (props) => {
 
       <CenterContent>
           <Line/>
-            <h2 style={{color: "#30353f", fontSize: 24}}>{`Drag & Drop a dataset on here to view`}</h2>
+            <input type="file" id="file-upload" multiple onChange={handlePicked} style={{display: "none"}} />
+
+            <UploadBox htmlFor="file-upload">
+                <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">