diff --git a/packages/web/src/impexp/ImportExportConfigurator.js b/packages/web/src/impexp/ImportExportConfigurator.js
index 82c5d21e1..9d735f068 100644
--- a/packages/web/src/impexp/ImportExportConfigurator.js
+++ b/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 Drag & drop imported files here;
+ return (
+ <>
+ {electron ? : }
+ Drag & drop imported files here
+ >
+ );
}
function SourceTargetConfig({
diff --git a/packages/web/src/utility/UploadButton.js b/packages/web/src/utility/UploadButton.js
new file mode 100644
index 000000000..4320967f6
--- /dev/null
+++ b/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 (
+
+
+ Upload file
+
+
+
+ );
+}
diff --git a/packages/web/src/utility/UploadsProvider.js b/packages/web/src/utility/UploadsProvider.js
index 065b442d0..b132b3f24 100644
--- a/packages/web/src/utility/UploadsProvider.js
+++ b/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 };
diff --git a/packages/web/src/widgets/FormStyledButton.js b/packages/web/src/widgets/FormStyledButton.js
index 07856844d..2b4f7ce5a 100644
--- a/packages/web/src/widgets/FormStyledButton.js
+++ b/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,