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,