Upload notification

packages/common-components/src/FileInput/FileInput.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState, useEffect, ReactNode } from "react"
 import { useField } from "formik"
-import { useDropzone, DropzoneOptions, FileRejection } from "react-dropzone"
+import { useDropzone, DropzoneOptions, FileRejection, FileWithPath } from "react-dropzone"
 import clsx from "clsx"
 import { ITheme, makeStyles, createStyles } from "@chainsafe/common-theme"
 import { Button } from "../Button"
@@ -101,10 +101,6 @@ const useStyles = makeStyles(({ constants, palette, overrides }: ITheme) =>
   })
 )
 
-interface FileWithPath extends File {
-  path?: string
-}
-
 interface IFileInputProps extends DropzoneOptions {
   className?: string
   variant?: "dropzone" | "filepicker"
@@ -143,14 +139,14 @@ const FileInput = ({
   const classes = useStyles()
   const [previews, setPreviews] = useState<any[]>([])
   const [errors, setErrors] = useState<any[]>([])
-  const [{ value }, meta, helpers] = useField<Array<FileWithPath>>(name)
+  const [{ value }, meta, helpers] = useField<FileWithPath[]>(name)
 
   useEffect(() => {
     onFileNumberChange && onFileNumberChange(value.length)
   }, [onFileNumberChange, value.length])
 
   const onDrop = useCallback(
-    async (acceptedFiles: Array<FileWithPath>, fileRejections: FileRejection[]) => {
+    async (acceptedFiles: FileWithPath[], fileRejections: FileRejection[]) => {
       const filtered = acceptedFiles.filter((file) =>
         maxFileSize ? file.size <= maxFileSize : true
       )
@@ -165,6 +161,7 @@ const FileInput = ({
           )
         )
       }
+
       helpers.setValue([...value, ...filtered])
 
       if (fileRejections.length > 0) {

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

@@ -185,14 +185,7 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
       return
     }
     const flattenedFiles = await getFilesFromDataTransferItems(fileItems)
-    const paths = [...new Set(flattenedFiles.map(f => f.filepath))]
-    paths.reduce(async (prev, p) => {
-      await prev
-
-      return await uploadFiles(bucket, flattenedFiles.filter(f => f.filepath === p), getPathWithFile(path, p))
-    },
-    Promise.resolve()
-    )
+    await uploadFiles(bucket, flattenedFiles, path)
   }, [bucket, accountRestricted, storageSummary, addToast, uploadFiles])
 
   const viewFolder = useCallback((cid: string) => {

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

@@ -225,14 +225,7 @@ const SharedFileBrowser = () => {
       return
     }
     const flattenedFiles = await getFilesFromDataTransferItems(fileItems)
-    const paths = [...new Set(flattenedFiles.map(f => f.filepath))]
-    paths.reduce(async (prev, p) => {
-      await prev
-
-      return await uploadFiles(bucket, flattenedFiles.filter(f => f.filepath === p), getPathWithFile(path, p))
-    },
-    Promise.resolve()
-    )
+    await uploadFiles(bucket, flattenedFiles, path)
   }, [bucket, accountRestricted, storageSummary, addToast, uploadFiles])
 
   const bulkOperations: IBulkOperations = useMemo(() => ({

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

@@ -9,7 +9,6 @@ import { Trans, t } from "@lingui/macro"
 import clsx from "clsx"
 import { CSFTheme } from "../../../Themes/types"
 import { useFileBrowser } from "../../../Contexts/FileBrowserContext"
-import { getPathWithFile } from "../../../Utils/pathUtils"
 
 const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) =>
   createStyles({
@@ -106,19 +105,9 @@ const UploadFileModule = ({ modalOpen, close }: IUploadFileModuleProps) => {
     if (!bucket) return
 
     helpers.setSubmitting(true)
-
     try {
       close()
-      const paths = [...new Set(values.files.map(f => f.path.substring(0, f.path.lastIndexOf("/"))))]
-      paths.reduce(async (prev, p) => {
-        await prev
-
-        const filesToUpload = values.files.filter((f => f.path.substring(0, f.path.lastIndexOf("/")) === p))
-        return await uploadFiles(bucket, filesToUpload, getPathWithFile(currentPath, p))
-      },
-      Promise.resolve()
-      )
-
+      await uploadFiles(bucket, values.files, currentPath)
       refreshContents && refreshContents()
       helpers.resetForm()
     } catch (error: any) {

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

@@ -20,8 +20,9 @@ import { useBeforeunload } from "react-beforeunload"
 import { useThresholdKey } from "./ThresholdKeyContext"
 import { useFilesApi } from "./FilesApiContext"
 import { useUser } from "./UserContext"
-import { getPathWithFile, getRelativePath } from "../Utils/pathUtils"
+import { getParentPathFromFilePath, getPathWithFile, getRelativePath } from "../Utils/pathUtils"
 import { Zippable, zipSync } from "fflate"
+import { FileWithPath } from "../Utils/getFilesFromDataTransferItems"
 
 type FilesContextProps = {
   children: React.ReactNode | React.ReactNode[]
@@ -52,7 +53,7 @@ type FilesContext = {
   storageSummary: BucketSummaryResponse | undefined
   personalEncryptionKey: string | undefined
   getStorageSummary: () => Promise<void>
-  uploadFiles: (bucket: BucketKeyPermission, files: File[], path: string, encryptionKey?: string) => Promise<void>
+  uploadFiles: (bucket: BucketKeyPermission, files: FileWithPath[], rootUploadPath: string) => Promise<void>
   downloadFile: (bucketId: string, itemToDownload: FileSystemItem, path: string) => void
   getFileContent: (bucketId: string, params: GetFileContentParams) => Promise<Blob | undefined>
   refreshBuckets: (showLoading?: boolean) => Promise<void>
@@ -319,7 +320,6 @@ const FilesProvider = ({ children }: FilesContextProps) => {
     onUploadProgress?: (progressEvent: ProgressEvent<EventTarget>) => void,
     cancelToken?: CancelToken
   ) => {
-
     const key = bucket.encryptionKey
 
     if (!key) {
@@ -350,7 +350,7 @@ const FilesProvider = ({ children }: FilesContextProps) => {
     )
   }, [filesApiClient])
 
-  const uploadFiles = useCallback(async (bucket: BucketKeyPermission, files: File[], path: string) => {
+  const uploadFiles = useCallback(async (bucket: BucketKeyPermission, files: FileWithPath[], rootUploadPath: string) => {
     const hasOversizedFile = files.some(file => file.size > MAX_FILE_SIZE)
     if (hasOversizedFile) {
       addToast({
@@ -377,20 +377,31 @@ const FilesProvider = ({ children }: FilesContextProps) => {
     setUploadsInProgress(true)
 
     try {
-      await encryptAndUploadFiles(
-        bucket,
-        files,
-        path,
-        (progressEvent: { loaded: number; total: number }) => {
-          updateToast(toastId, {
-            ...toastParams,
-            progress: Math.ceil(
-              (progressEvent.loaded / progressEvent.total) * 100
-            )
-          })
-        },
-        cancelToken
-      )
+      const paths = [...new Set(files.map(f => getParentPathFromFilePath(f.path)))]
+      const totalUploadSize = files.reduce((sum, f) => sum += f.size, 0)
+
+      let uploadedSize = 0
+      for (const path of paths) {
+        const filesToUpload = files.filter((f => getParentPathFromFilePath(f.path) === path))
+        const batchSize = filesToUpload.reduce((sum, f) => sum += f.size, 0)
+        await encryptAndUploadFiles(
+          bucket,
+          filesToUpload,
+          getPathWithFile(rootUploadPath, path),
+          (progressEvent: { loaded: number; total: number }) => {
+            updateToast(toastId, {
+              ...toastParams,
+              progress: Math.ceil(
+                ((progressEvent.loaded + uploadedSize) / totalUploadSize) * 100
+              )
+            })
+          },
+          cancelToken
+        )
+        uploadedSize += batchSize
+      }
+
+
       setUploadsInProgress(false)
 
       await refreshBuckets()

packages/files-ui/src/Utils/getFilesFromDataTransferItems.ts

@@ -1,12 +1,14 @@
 //Shamelessly borrowed from https://github.com/anatol-grabowski/datatransfer-files-promise with added Types
 
-type FileWithPath = File & {filepath: string}
+export type FileWithPath = File & {
+  path: string
+}
 
 const getFilesFromDataTransferItems = async (dataTransferItems: DataTransferItemList): Promise<Array<FileWithPath>> => {
   const readFile = (entry: FileEntry, path = ""): Promise<FileWithPath> => {
     return new Promise((resolve, reject) => {
       entry.file((file: File) => {
-        Object.defineProperty(file, "filepath", {
+        Object.defineProperty(file, "path", {
           value: path
         })
         resolve(file as FileWithPath)

packages/files-ui/src/locales/fr/messages.po

@@ -1107,7 +1107,7 @@ msgid "We are performing routine maintenance of the system. Service status updat
 msgstr "Nous effectuons une maintenance de routine du système. Les mises à jour de l'état du service seront postées sur le canal <0>Files Support<0> sur Discord"
 
 msgid "We can't encrypt files larger than 2GB. Some items will not be uploaded"
-msgstr "Nous ne pouvons pas chiffrer les fichiers de plus de 2 Go. Certains éléments ne pourront pas être téléversés"
+msgstr "Nous ne pouvons pas chiffrer les fichiers de plus de 2 Go. Certains éléments ne pourront pas être téléversés"
 
 msgid "Web3: {0}"
 msgstr "Web3 : {0}"