Fix upload

packages/files-ui/src/Components/Modules/FileBrowsers/BinFileBrowser.tsx

@@ -12,13 +12,8 @@ import { extractDrivePath, getPathWithFile } from "../../../Utils/pathUtils"
 import { ROUTE_LINKS } from "../../FilesRoutes"
 
 const BinFileBrowser: React.FC<IFilesBrowserModuleProps> = ({ controls = false }: IFilesBrowserModuleProps) => {
-  const {
-    removeCSFObjects,
-    moveCSFObject,
-    list
-  } = useDrive()
+  const { removeCSFObjects, moveCSFObject, list } = useDrive()
   const { addToastMessage } = useToaster()
-
   const [loadingCurrentPath, setLoadingCurrentPath] = useState(false)
   const [pathContents, setPathContents] = useState<FileSystemItem[]>([])
   const [bucketType] = useState<BucketType>("trash")

packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx

@@ -941,6 +941,7 @@ const FilesTableView = ({
       <UploadFileModule
         modalOpen={isUploadModalOpen}
         close={() => setIsUploadModalOpen(false)}
+        currentPath={currentPath}
       />
       <MoveFileModule
         currentPath={currentPath}

packages/files-ui/src/Components/Modules/UploadFileModule.tsx

@@ -1,9 +1,6 @@
-import { Button, FileInput, useParams } from "@chainsafe/common-components"
+import { Button, FileInput } from "@chainsafe/common-components"
 import { useDrive } from "../../Contexts/DriveContext"
-import {
-  createStyles,
-  makeStyles
-} from "@chainsafe/common-theme"
+import { createStyles, makeStyles } from "@chainsafe/common-theme"
 import React, { useCallback, useState } from "react"
 import { Formik, Form } from "formik"
 import { array, object } from "yup"
@@ -74,26 +71,34 @@ const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) =>
 interface IUploadFileModuleProps {
   modalOpen: boolean
   close: () => void
+  currentPath: string
 }
 
-const UploadFileModule: React.FC<IUploadFileModuleProps> = ({
-  modalOpen,
-  close
-}: IUploadFileModuleProps) => {
+const UploadFileModule = ({ modalOpen, close, currentPath }: IUploadFileModuleProps) => {
   const classes = useStyles()
-
   const [isDoneDisabled, setIsDoneDisabled] = useState(true)
   const { uploadFiles } = useDrive()
-
-  const UploadSchema = object().shape({
-    files: array().required("Please select a file to upload")
-  })
+  const UploadSchema = object().shape({ files: array().required(t`Please select a file to upload`) })
 
   const onFileNumberChange = useCallback((filesNumber: number) => {
     setIsDoneDisabled(filesNumber === 0)
   }, [])
 
-  const { currentPath } = useParams<{ currentPath: string }>()
+  const onSubmit = useCallback((values, helpers) => {
+    helpers.setSubmitting(true)
+    try {
+      uploadFiles(values.files, currentPath)
+      helpers.resetForm()
+      close()
+    } catch (errors) {
+      if (errors[0].message.includes("conflict with existing")) {
+        helpers.setFieldError("files", "File/Folder exists")
+      } else {
+        helpers.setFieldError("files", errors[0].message)
+      }
+    }
+    helpers.setSubmitting(false)
+  }, [close, currentPath, uploadFiles])
 
   return (
     <CustomModal
@@ -105,25 +110,9 @@ const UploadFileModule: React.FC<IUploadFileModuleProps> = ({
       }}
     >
       <Formik
-        initialValues={{
-          files: []
-        }}
+        initialValues={{ files: [] }}
         validationSchema={UploadSchema}
-        onSubmit={async (values, helpers) => {
-          helpers.setSubmitting(true)
-          try {
-            uploadFiles(values.files, currentPath)
-            helpers.resetForm()
-            close()
-          } catch (errors) {
-            if (errors[0].message.includes("conflict with existing")) {
-              helpers.setFieldError("files", "File/Folder exists")
-            } else {
-              helpers.setFieldError("files", errors[0].message)
-            }
-          }
-          helpers.setSubmitting(false)
-        }}
+        onSubmit={onSubmit}
       >
         <Form className={classes.root}>
           <FileInput

packages/files-ui/src/Contexts/DriveContext.tsx

@@ -14,10 +14,7 @@ import { useState } from "react"
 import { decryptFile, encryptFile, useImployApi } from "@chainsafe/common-contexts"
 import { v4 as uuidv4 } from "uuid"
 import { useToaster } from "@chainsafe/common-components"
-import {
-  downloadsInProgressReducer,
-  uploadsInProgressReducer
-} from "./DriveReducer"
+import { downloadsInProgressReducer, uploadsInProgressReducer } from "./DriveReducer"
 import { CancelToken } from "axios"
 import { t } from "@lingui/macro"
 import { readFileAsync } from "../Utils/Helpers"
@@ -217,7 +214,10 @@ const DriveProvider = ({ children }: DriveContextProps) => {
 
   const uploadFiles = useCallback(async (files: File[], path: string) => {
     const startUploadFile = async () => {
-      if (!encryptionKey) return // TODO: Add better error handling here.
+      if (!encryptionKey) {
+        console.error("No encryption key")
+        return
+      }
 
       const id = uuidv4()
       const uploadProgress: UploadProgress = {
@@ -278,6 +278,7 @@ const DriveProvider = ({ children }: DriveContextProps) => {
 
         return result
       } catch (error) {
+        console.error(error)
         // setting error
         let errorMessage = t`Something went wrong. We couldn't upload your file`