upload file button

packages/web/src/impexp/ImportExportConfigurator.js

@@ -28,6 +28,7 @@ import useTheme from '../theme/useTheme';
 import { findFileFormat, getFileFormatDirections } from '../utility/fileformats';
 import FormArgumentList from '../utility/FormArgumentList';
 import useExtensions from '../utility/useExtensions';
+import UploadButton from '../utility/UploadButton';
 
 const Container = styled.div`
   // max-height: 50vh;
@@ -170,10 +171,12 @@ function ElectronFilesInput() {
 function FilesInput() {
   const theme = useTheme();
   const electron = getElectron();
-  if (electron) {
+  return (
-    return <ElectronFilesInput />;
+    <>
-  }
+      {electron ? <ElectronFilesInput /> : <UploadButton />}
-  return <DragWrapper theme={theme}>Drag &amp; drop imported files here</DragWrapper>;
+      <DragWrapper theme={theme}>Drag &amp; drop imported files here</DragWrapper>
+    </>
+  );
 }
 
 function SourceTargetConfig({

packages/web/src/utility/UploadButton.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import useTheme from '../theme/useTheme';
+import { FormStyledLabel } from '../widgets/FormStyledButton';
+import styled from 'styled-components';
+import { useUploadFiles } from './UploadsProvider';
+
+const Wrapper = styled.div`
+  margin: 10px;
+`;
+
+export default function UploadButton() {
+  const theme = useTheme();
+  const uploadFiles = useUploadFiles();
+  const handleChange = (e) => {
+    const files = [...e.target.files];
+    uploadFiles(files);
+  };
+  return (
+    <Wrapper>
+      <FormStyledLabel htmlFor="uploadFileButton" theme={theme}>
+        Upload file
+      </FormStyledLabel>
+      <input type="file" id="uploadFileButton" hidden onChange={handleChange} />
+    </Wrapper>
+  );
+}

packages/web/src/utility/UploadsProvider.js

@@ -17,12 +17,12 @@ export function useUploadsProvider() {
   return React.useContext(UploadsContext);
 }
 
-export function useUploadsZone() {
+export function useUploadFiles() {
   const { uploadListener } = useUploadsProvider();
   const showModal = useShowModal();
   const extensions = useExtensions();
 
-  const onDrop = React.useCallback(
+  const handleUploadFiles = React.useCallback(
     (files) => {
       files.forEach(async (file) => {
         if (parseInt(file.size, 10) >= 4 * 1024 * 1024) {
@@ -87,6 +87,12 @@ export function useUploadsZone() {
     },
     [uploadListener, extensions]
   );
+
+  return handleUploadFiles;
+}
+
+export function useUploadsZone() {
+  const onDrop = useUploadFiles();
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
 
   return { getRootProps, getInputProps, isDragActive };

packages/web/src/widgets/FormStyledButton.js

@@ -4,7 +4,10 @@ import styled from 'styled-components';
 import dimensions from '../theme/dimensions';
 import useTheme from '../theme/useTheme';
 
-const ButtonInput = styled.input`
+// const StyledInputBase=styled.input``;
+// const StyledLabelBase=styled.label``;
+
+const makeStyle = (base) => styled(base)`
   // height: ${dimensions.toolBar.height - 5}px;
   border: 1px solid ${(props) => props.theme.button_background2};
   padding: 5px;
@@ -34,7 +37,10 @@ const ButtonInput = styled.input`
   `}
 `;
 
-// ${props.theme.button_background_gray[1]};
+const ButtonInput = makeStyle(styled.input``);
+const FormStyledLabelBase = makeStyle(styled.label``);
+export const FormStyledLabel = styled(FormStyledLabelBase)`
+`;
 
 export default function FormStyledButton({
   onClick = undefined,