upload file button

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 };