From 61919a1b3e87d5e66957351d11409130ffc6f0cd Mon Sep 17 00:00:00 2001
From: Jade Rowland <jaderowlanddev@gmail.com>
Date: Sun, 3 Dec 2023 23:33:04 -0500
Subject: [PATCH] upload samples

---
 website/src/repl/FileUpload.jsx | 35 +++++++++++++++++++++++++++++++++
 website/src/repl/Footer.jsx     |  2 ++
 2 files changed, 37 insertions(+)
 create mode 100644 website/src/repl/FileUpload.jsx

diff --git a/website/src/repl/FileUpload.jsx b/website/src/repl/FileUpload.jsx
new file mode 100644
index 00000000..ab606657
--- /dev/null
+++ b/website/src/repl/FileUpload.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+export default function FileUpload({ onUpload }) {
+  let fileUploadRef = React.createRef();
+  function mapFiles(soundFiles) {
+    const files = Array.from(soundFiles).map((soundFile) => {
+      const file = { name: soundFile.name, path: URL.createObjectURL(soundFile) };
+      return file;
+    });
+    onUpload(files);
+  }
+  return (
+    <>
+      <input
+        key="uploadREf"
+        ref={fileUploadRef}
+        id="audio_file"
+        type="file"
+        directory=""
+        webkitdirectory=""
+        multiple
+        accept="audio/*"
+        onChange={() => {
+          mapFiles(fileUploadRef.current.files);
+        }}
+      />
+      <input
+        key="uploadUI"
+        className="screen-button-overlay"
+        type="button"
+        onMouseDown={() => fileUploadRef.current.click()}
+      />
+    </>
+  );
+}
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index b03f62d0..833a7a75 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@@ -10,6 +10,7 @@ import { useSettings, settingsMap, setActiveFooter, defaultSettings } from '../s
 import { getAudioContext, soundMap } from '@strudel.cycles/webaudio';
 import { useStore } from '@nanostores/react';
 import { FilesTab } from './FilesTab';
+import FileUpload from './FileUpload';
 
 const TAURI = window.__TAURI__;
 
@@ -424,6 +425,7 @@ function SettingsTab({ scheduler }) {
             onChange={(fontFamily) => settingsMap.setKey('fontFamily', fontFamily)}
           />
         </FormItem>
+        <FileUpload onUpload={(files) => console.log(files)} />
         <FormItem label="Font Size">
           <NumberSlider
             value={fontSize}