From e20baad4bcf15cac996e5da835bca3b2f690a193 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Thu, 2 Jun 2022 17:43:23 +0200
Subject: [PATCH 1/9] allow empty folder on Files

---
 .../src/FileInput/FileInput.tsx               |  17 ++-
 ...etFilesAndEmptyDirFromDataTransferItems.ts | 100 ++++++++++++++++++
 packages/common-components/src/utils/index.ts |   1 +
 .../Modules/FileBrowsers/CSFFileBrowser.tsx   |  15 ++-
 .../FileBrowsers/SharedFileBrowser.tsx        |  24 ++++-
 .../Modules/FileBrowsers/UploadFileModal.tsx  |  13 ++-
 .../files-ui/src/Contexts/FilesContext.tsx    |   3 +-
 .../Utils/getFilesFromDataTransferItems.ts    |  80 --------------
 8 files changed, 157 insertions(+), 96 deletions(-)
 create mode 100644 packages/common-components/src/utils/getFilesAndEmptyDirFromDataTransferItems.ts
 delete mode 100644 packages/files-ui/src/Utils/getFilesFromDataTransferItems.ts

diff --git a/packages/common-components/src/FileInput/FileInput.tsx b/packages/common-components/src/FileInput/FileInput.tsx
index 39ebe5b79c..384544fa82 100644
--- a/packages/common-components/src/FileInput/FileInput.tsx
+++ b/packages/common-components/src/FileInput/FileInput.tsx
@@ -7,6 +7,7 @@ import { Button } from "../Button"
 import { Typography } from "../Typography"
 import { PlusIcon, CrossIcon } from "../Icons"
 import { ScrollbarWrapper } from "../ScrollbarWrapper"
+import { getFilesAndEmptyDirFromDataTransferItems } from "../utils"
 
 const useStyles = makeStyles(({ constants, palette, overrides }: ITheme) =>
   createStyles({
@@ -118,6 +119,7 @@ interface IFileInputProps extends DropzoneOptions {
     error?: string
   }
   onFileNumberChange: (filesNumber: number) => void
+  onEmptyFolderChange?: (emptyFolderPaths: string[]) => void
   moreFilesLabel: string
   testId?: string
 }
@@ -132,6 +134,7 @@ const FileInput = ({
   maxFileSize,
   classNames,
   onFileNumberChange,
+  onEmptyFolderChange,
   moreFilesLabel,
   testId,
   ...props
@@ -188,9 +191,17 @@ const FileInput = ({
 
   const { getRootProps, getInputProps, open } = useDropzone({
     onDrop,
-    ...dropZoneProps
+    ...dropZoneProps,
+    getFilesFromEvent
   })
 
+  async function getFilesFromEvent(event: any) {
+    const res = await getFilesAndEmptyDirFromDataTransferItems(event.dataTransfer.items)
+    onEmptyFolderChange && res.emptyDirPaths?.length && onEmptyFolderChange(res.emptyDirPaths)
+
+    return res.files as File[] || []
+  }
+
   const removeItem = (i: number) => {
     const items = value
     items.splice(i, 1)
@@ -224,12 +235,12 @@ const FileInput = ({
           >
             <ScrollbarWrapper className={clsx("scrollbar")}>
               <ul>
-                {value.map((file: any, i: number) => (
+                {value.map((file, i) => (
                   <li
                     className={clsx(classes.item, classNames?.item)}
                     key={i}
                   >
-                    <span className={classes.itemText}>{file.path}</span>
+                    <span className={classes.itemText}>{`${file.path}${file.name}`}</span>
                     <Button
                       testId="remove-from-file-list"
                       className={clsx(classes.crossIcon, classNames?.closeIcon)}
diff --git a/packages/common-components/src/utils/getFilesAndEmptyDirFromDataTransferItems.ts b/packages/common-components/src/utils/getFilesAndEmptyDirFromDataTransferItems.ts
new file mode 100644
index 0000000000..431f535fd1
--- /dev/null
+++ b/packages/common-components/src/utils/getFilesAndEmptyDirFromDataTransferItems.ts
@@ -0,0 +1,100 @@
+export type FileWithPath = File & {
+  path: string
+}
+
+interface FilesAndDirFromDataTransferItems {
+  files?: FileWithPath[]
+  emptyDirPaths?: string[]
+}
+
+const mergeResults = (prevRes: FilesAndDirFromDataTransferItems, newRes: FilesAndDirFromDataTransferItems) => {
+  return {
+    files: [...(prevRes.files || []), ...(newRes.files || [])],
+    emptyDirPaths: [...(prevRes.emptyDirPaths || []), ...(newRes.emptyDirPaths || [])]
+  } as FilesAndDirFromDataTransferItems
+}
+
+const readFile = (entry: FileEntry, path = ""): Promise<FileWithPath> => {
+  return new Promise((resolve, reject) => {
+    entry.file((file: File) => {
+      Object.defineProperty(file, "path", {
+        value: path
+      })
+      resolve(file as FileWithPath)
+    }, (err: Error) => {
+      reject(err)
+    })
+  })
+}
+
+
+const dirReadEntries = (dirReader: DirectoryReader, path: string): Promise<FilesAndDirFromDataTransferItems> => {
+  return new Promise((resolve, reject) => {
+    dirReader.readEntries(async (entries: FileSystemEntry[]) => {
+      let res: FilesAndDirFromDataTransferItems = {}
+      for (const entry of entries) {
+        const newRes = await getFilesAndEmptyDirFromEntry(entry, path)
+        res = mergeResults(res, newRes)
+      }
+      resolve(res)
+    }, (err: Error) => {
+      reject(err)
+    })
+  })
+}
+
+const readDir = async (entry: DirectoryEntry, path: string) => {
+  const dirReader = entry.createReader()
+  const newPath = path + entry.name + "/"
+  let newFilesOrFolders: FilesAndDirFromDataTransferItems = {}
+  let res: FilesAndDirFromDataTransferItems = {}
+  do {
+    newFilesOrFolders = await dirReadEntries(dirReader, newPath)
+
+    res = mergeResults(res, newFilesOrFolders)
+  } while (newFilesOrFolders?.files && newFilesOrFolders.files.length > 0)
+
+  return res
+}
+
+const getFilesAndEmptyDirFromEntry = async (entry: FileSystemEntry, path = ""): Promise<FilesAndDirFromDataTransferItems> => {
+  if (entry.isFile) {
+    const file = await readFile(entry as FileEntry, path)
+    return { files: [file] }
+  }
+
+  if (entry.isDirectory) {
+    // read files inside this dir
+    const res = await readDir(entry as DirectoryEntry, path)
+
+    if(!res?.files || res.files.length === 0){
+      // this is an empty dir
+      return { emptyDirPaths: [`${path}${entry.name}`] }
+    }
+
+    return res
+  }
+
+  return {}
+}
+
+export const getFilesAndEmptyDirFromDataTransferItems =
+    async (dataTransferItems: DataTransferItemList): Promise<FilesAndDirFromDataTransferItems> => {
+      let result: FilesAndDirFromDataTransferItems = { files: [], emptyDirPaths: [] }
+      const entries: (FileSystemEntry | null)[] = []
+
+      // Pull out all entries before reading them
+      for (let i = 0, ii = dataTransferItems.length; i < ii; i++) {
+        entries.push(dataTransferItems[i].webkitGetAsEntry())
+      }
+
+      // Recursively read through all entries
+      for (const entry of entries) {
+        if (entry) {
+          const newRes = await getFilesAndEmptyDirFromEntry(entry)
+          result = mergeResults(result, newRes)
+        }
+      }
+
+      return result
+    }
\ No newline at end of file
diff --git a/packages/common-components/src/utils/index.ts b/packages/common-components/src/utils/index.ts
index bed4def2fd..2464bedc64 100644
--- a/packages/common-components/src/utils/index.ts
+++ b/packages/common-components/src/utils/index.ts
@@ -1,2 +1,3 @@
 export * from "./formDataHelper"
 export * from "./stringUtils"
+export * from "./getFilesAndEmptyDirFromDataTransferItems"
\ No newline at end of file
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx
index f3deba3df7..ac4970c1e9 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react"
-import { Crumb, useToasts, useHistory, useLocation } from "@chainsafe/common-components"
+import { Crumb, useToasts, useHistory, useLocation, getFilesAndEmptyDirFromDataTransferItems } from "@chainsafe/common-components"
 import { useFiles, FileSystemItem } from "../../../Contexts/FilesContext"
 import {
   getArrayOfPaths,
@@ -23,7 +23,6 @@ import { useUser } from "../../../Contexts/UserContext"
 import { DISMISSED_SURVEY_KEY } from "../../SurveyBanner"
 import { FileBrowserContext } from "../../../Contexts/FileBrowserContext"
 import { parseFileContentResponse } from "../../../Utils/Helpers"
-import getFilesFromDataTransferItems from "../../../Utils/getFilesFromDataTransferItems"
 import { Helmet } from "react-helmet-async"
 
 const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
@@ -184,9 +183,15 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
       })
       return
     }
-    const flattenedFiles = await getFilesFromDataTransferItems(fileItems)
-    await uploadFiles(bucket, flattenedFiles, path)
-  }, [bucket, accountRestricted, storageSummary, addToast, uploadFiles])
+    const flattenedFiles = await getFilesAndEmptyDirFromDataTransferItems(fileItems)
+    await uploadFiles(bucket, flattenedFiles?.files || [], path)
+
+    //create empty dir
+    flattenedFiles?.emptyDirPaths?.forEach(async (folderPath) => {
+      await filesApiClient.addBucketDirectory(bucket.id, { path: getPathWithFile(currentPath, folderPath) })
+
+    })
+  }, [bucket, accountRestricted, storageSummary, uploadFiles, addToast, filesApiClient, currentPath])
 
   const viewFolder = useCallback((cid: string) => {
     const fileSystemItem = pathContents.find(f => f.cid === cid)
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx
index 6b4896e966..4be4633a17 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx
@@ -1,5 +1,14 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react"
-import { useToasts, useHistory, useLocation, Crumb, Typography, ExclamationCircleIcon, Loading } from "@chainsafe/common-components"
+import {
+  useToasts,
+  useHistory,
+  useLocation,
+  Crumb,
+  Typography,
+  ExclamationCircleIcon,
+  Loading,
+  getFilesAndEmptyDirFromDataTransferItems
+} from "@chainsafe/common-components"
 import {
   getArrayOfPaths,
   getURISafePathFromArray,
@@ -22,7 +31,6 @@ import DragAndDrop from "../../../Contexts/DnDContext"
 import FilesList from "./views/FilesList"
 import { createStyles, makeStyles } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../Themes/types"
-import getFilesFromDataTransferItems from "../../../Utils/getFilesFromDataTransferItems"
 import { Helmet } from "react-helmet-async"
 
 const useStyles = makeStyles(({ constants, palette }: CSFTheme) =>
@@ -224,9 +232,15 @@ const SharedFileBrowser = () => {
       })
       return
     }
-    const flattenedFiles = await getFilesFromDataTransferItems(fileItems)
-    await uploadFiles(bucket, flattenedFiles, path)
-  }, [bucket, accountRestricted, storageSummary, addToast, uploadFiles])
+    const flattenedFiles = await getFilesAndEmptyDirFromDataTransferItems(fileItems)
+    await uploadFiles(bucket, flattenedFiles?.files || [], path)
+
+    // create any empty dir
+    flattenedFiles?.emptyDirPaths?.forEach(async (folderPath) => {
+      await filesApiClient.addBucketDirectory(bucket.id, { path: getPathWithFile(currentPath, folderPath) })
+
+    })
+  }, [bucket, accountRestricted, storageSummary, uploadFiles, addToast, filesApiClient, currentPath])
 
   const bulkOperations: IBulkOperations = useMemo(() => ({
     [CONTENT_TYPES.Directory]: ["download", "move", "delete", "share"],
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
index bd91739b78..1494ccfa10 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
@@ -9,6 +9,8 @@ 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"
+import { useFilesApi } from "../../../Contexts/FilesApiContext"
 
 const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) =>
   createStyles({
@@ -82,6 +84,8 @@ const UploadFileModule = ({ modalOpen, close }: IUploadFileModuleProps) => {
   const [isDoneDisabled, setIsDoneDisabled] = useState(true)
   const { currentPath, refreshContents, bucket } = useFileBrowser()
   const { storageSummary, uploadFiles } = useFiles()
+  const { filesApiClient } = useFilesApi()
+  const [emptyFolderToCreate, setEmptyFolderToCreate] = useState<string[]>([])
 
   const UploadSchema = useMemo(() => object().shape({
     files: array().required(t`Please select a file to upload`)
@@ -108,13 +112,19 @@ const UploadFileModule = ({ modalOpen, close }: IUploadFileModuleProps) => {
     try {
       close()
       await uploadFiles(bucket, values.files, currentPath)
+
+      //create empty folders
+      emptyFolderToCreate.forEach(async (folderPath) => {
+        await filesApiClient.addBucketDirectory(bucket.id, { path: getPathWithFile(currentPath, folderPath) })
+
+      })
       refreshContents && refreshContents()
       helpers.resetForm()
     } catch (error: any) {
       console.error(error)
     }
     helpers.setSubmitting(false)
-  }, [bucket, close, refreshContents, uploadFiles, currentPath])
+  }, [bucket, close, uploadFiles, currentPath, emptyFolderToCreate, refreshContents, filesApiClient])
 
   const formik = useFormik({
     initialValues: { files: [] },
@@ -148,6 +158,7 @@ const UploadFileModule = ({ modalOpen, close }: IUploadFileModuleProps) => {
             maxSize={2 * 1024 ** 3}
             name="files"
             onFileNumberChange={onFileNumberChange}
+            onEmptyFolderChange={setEmptyFolderToCreate}
             testId="fileUpload"
           />
           <footer className={classes.footer}>
diff --git a/packages/files-ui/src/Contexts/FilesContext.tsx b/packages/files-ui/src/Contexts/FilesContext.tsx
index 4c79035394..7a08ee59e7 100644
--- a/packages/files-ui/src/Contexts/FilesContext.tsx
+++ b/packages/files-ui/src/Contexts/FilesContext.tsx
@@ -12,7 +12,7 @@ import {
 import React, { useCallback, useEffect } from "react"
 import { useState } from "react"
 import { decryptFile, encryptFile } from "../Utils/encryption"
-import { ToastParams, useToasts } from "@chainsafe/common-components"
+import { FileWithPath, ToastParams, useToasts } from "@chainsafe/common-components"
 import axios, { CancelToken } from "axios"
 import { plural, t } from "@lingui/macro"
 import { parseFileContentResponse, readFileAsync } from "../Utils/Helpers"
@@ -22,7 +22,6 @@ import { useFilesApi } from "./FilesApiContext"
 import { useUser } from "./UserContext"
 import { getParentPathFromFilePath, getPathWithFile, getRelativePath } from "../Utils/pathUtils"
 import { Zippable, zipSync } from "fflate"
-import { FileWithPath } from "../Utils/getFilesFromDataTransferItems"
 
 type FilesContextProps = {
   children: React.ReactNode | React.ReactNode[]
diff --git a/packages/files-ui/src/Utils/getFilesFromDataTransferItems.ts b/packages/files-ui/src/Utils/getFilesFromDataTransferItems.ts
deleted file mode 100644
index 4fc5b0d153..0000000000
--- a/packages/files-ui/src/Utils/getFilesFromDataTransferItems.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-//Shamelessly borrowed from https://github.com/anatol-grabowski/datatransfer-files-promise with added Types
-
-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, "path", {
-          value: path
-        })
-        resolve(file as FileWithPath)
-      }, (err: Error) => {
-        reject(err)
-      })
-    })
-  }
-
-  const dirReadEntries = (dirReader: DirectoryReader, path: string): Promise<FileWithPath[]> => {
-    return new Promise((resolve, reject) => {
-      dirReader.readEntries(async (entries: FileSystemEntry[]) => {
-        let files = [] as Array<FileWithPath>
-        for (const entry of entries) {
-          const itemFiles = await getFilesFromEntry(entry, path) as Array<FileWithPath>
-          files = files.concat(itemFiles)
-        }
-        resolve(files)
-      }, (err: Error) => {
-        reject(err)
-      })
-    })
-  }
-
-  const readDir = async (entry: DirectoryEntry, path: string) => {
-    const dirReader = entry.createReader()
-    const newPath = path + entry.name + "/"
-    let files = [] as Array<FileWithPath>
-    let newFiles
-    do {
-      newFiles = await dirReadEntries(dirReader, newPath)
-      files = files.concat(newFiles)
-    } while (newFiles.length > 0)
-    return files
-  }
-
-  const getFilesFromEntry = async (entry: FileSystemEntry, path = "") => {
-    if (entry.isFile) {
-      const file = await readFile(entry as FileEntry, path)
-      return [file]
-    }
-    if (entry.isDirectory) {
-      const files = await readDir(entry as DirectoryEntry, path)
-      return files
-    }
-  }
-
-  let files = [] as Array<FileWithPath>
-  const entries = []
-
-  // Pull out all entries before reading them
-  for (let i = 0, ii = dataTransferItems.length; i < ii; i++) {
-    entries.push(dataTransferItems[i].webkitGetAsEntry())
-  }
-
-  // Recursively read through all entries
-  for (const entry of entries) {
-    if (entry) {
-      const newFiles = await getFilesFromEntry(entry)
-      if (newFiles) {
-        files = files.concat(newFiles)
-      }
-    }
-  }
-
-  return files
-}
-
-export default getFilesFromDataTransferItems
\ No newline at end of file

From bec60863eae2aa9a9a379c5d93c190fb323a51e7 Mon Sep 17 00:00:00 2001
From: GitHub Actions <actions@github.com>
Date: Thu, 2 Jun 2022 15:50:02 +0000
Subject: [PATCH 2/9] lingui extract

---
 packages/files-ui/src/locales/es/messages.po | 6 ++----
 packages/files-ui/src/locales/fr/messages.po | 3 +--
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po
index 9e058d2c04..be89feee7e 100644
--- a/packages/files-ui/src/locales/es/messages.po
+++ b/packages/files-ui/src/locales/es/messages.po
@@ -5,8 +5,7 @@ msgstr ""
 "POT-Creation-Date: 2021-05-06 20:51+0200\n"
 "PO-Revision-Date: 2022-06-01 12:17+0000\n"
 "Last-Translator: Juan Manuel Spoleti <juan@chainsafe.io>\n"
-"Language-Team: Spanish <https://hosted.weblate.org/projects/chainsafe-files/"
-"chainsafe-files-user-interface/es/>\n"
+"Language-Team: Spanish <https://hosted.weblate.org/projects/chainsafe-files/chainsafe-files-user-interface/es/>\n"
 "Language: es\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -913,8 +912,7 @@ msgid "Sort By:"
 msgstr "Ordenar por:"
 
 msgid "Space running low. Join the beta to upgrade."
-msgstr ""
-"El espacio se está agotando. Únete a la beta para ascender de categoría."
+msgstr "El espacio se está agotando. Únete a la beta para ascender de categoría."
 
 msgid "Space running low. Upgrade here."
 msgstr "El espacio se está agotando. Sube de categoría aquí."
diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po
index 9dfaf1646b..567fc0a02b 100644
--- a/packages/files-ui/src/locales/fr/messages.po
+++ b/packages/files-ui/src/locales/fr/messages.po
@@ -5,8 +5,7 @@ msgstr ""
 "POT-Creation-Date: 2021-04-23 11:05+0200\n"
 "PO-Revision-Date: 2022-06-01 12:17+0000\n"
 "Last-Translator: J. Lavoie <j.lavoie@net-c.ca>\n"
-"Language-Team: French <https://hosted.weblate.org/projects/chainsafe-files/"
-"chainsafe-files-user-interface/fr/>\n"
+"Language-Team: French <https://hosted.weblate.org/projects/chainsafe-files/chainsafe-files-user-interface/fr/>\n"
 "Language: fr\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"

From df85dce6e69ebff9cec334bb3fea9948347b7980 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Fri, 3 Jun 2022 11:30:24 +0200
Subject: [PATCH 3/9] fix upload on input

---
 .../src/FileInput/FileInput.tsx               | 21 ++++++++++++++-----
 .../Modules/FileBrowsers/UploadFileModal.tsx  |  1 +
 packages/files-ui/src/Utils/pathUtils.ts      |  2 +-
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/common-components/src/FileInput/FileInput.tsx b/packages/common-components/src/FileInput/FileInput.tsx
index 384544fa82..38d5da0ac1 100644
--- a/packages/common-components/src/FileInput/FileInput.tsx
+++ b/packages/common-components/src/FileInput/FileInput.tsx
@@ -148,6 +148,11 @@ const FileInput = ({
     onFileNumberChange && onFileNumberChange(value.length)
   }, [onFileNumberChange, value.length])
 
+  useEffect(() => {
+    // reset the field on load
+    helpers.setValue([])
+  }, [])
+
   const onDrop = useCallback(
     async (acceptedFiles: FileWithPath[], fileRejections: FileRejection[]) => {
       const filtered = acceptedFiles.filter((file) =>
@@ -196,10 +201,16 @@ const FileInput = ({
   })
 
   async function getFilesFromEvent(event: any) {
-    const res = await getFilesAndEmptyDirFromDataTransferItems(event.dataTransfer.items)
-    onEmptyFolderChange && res.emptyDirPaths?.length && onEmptyFolderChange(res.emptyDirPaths)
-
-    return res.files as File[] || []
+    // this is a drag n drop
+    // we support folder upload and empty folders
+    if(event.dataTransfer){
+      const res = await getFilesAndEmptyDirFromDataTransferItems(event.dataTransfer.items)
+      onEmptyFolderChange && res.emptyDirPaths?.length && onEmptyFolderChange(res.emptyDirPaths)
+      return res.files as File[] || []
+    } else {
+      // this is a file list using the input
+      return event.target.files as File[]
+    }
   }
 
   const removeItem = (i: number) => {
@@ -240,7 +251,7 @@ const FileInput = ({
                     className={clsx(classes.item, classNames?.item)}
                     key={i}
                   >
-                    <span className={classes.itemText}>{`${file.path}${file.name}`}</span>
+                    <span className={classes.itemText}>{`${file.path || ""}${file.name}`}</span>
                     <Button
                       testId="remove-from-file-list"
                       className={clsx(classes.crossIcon, classNames?.closeIcon)}
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
index 1494ccfa10..10e46cf7c9 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
@@ -129,6 +129,7 @@ const UploadFileModule = ({ modalOpen, close }: IUploadFileModuleProps) => {
   const formik = useFormik({
     initialValues: { files: [] },
     validationSchema: UploadSchema,
+    enableReinitialize: true,
     onSubmit
   })
 
diff --git a/packages/files-ui/src/Utils/pathUtils.ts b/packages/files-ui/src/Utils/pathUtils.ts
index 175c0ba479..2105083bc5 100644
--- a/packages/files-ui/src/Utils/pathUtils.ts
+++ b/packages/files-ui/src/Utils/pathUtils.ts
@@ -69,7 +69,7 @@ export function getRelativePath(path: string, parentPath: string) {
 }
 
 // /path/to/somewhere/1.txt -> /path/to/somewhere
-export function getParentPathFromFilePath(filePath: string) {
+export function getParentPathFromFilePath(filePath = "") {
   const parentPath = filePath.substring(0, filePath.lastIndexOf("/"))
   if (!parentPath) return "/"
   return parentPath

From 20f24ba8cc9a2b79d26fbdc6a43c747ef633b2f7 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Fri, 3 Jun 2022 11:31:06 +0200
Subject: [PATCH 4/9] comment

---
 packages/common-components/src/FileInput/FileInput.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/common-components/src/FileInput/FileInput.tsx b/packages/common-components/src/FileInput/FileInput.tsx
index 38d5da0ac1..474f7957f8 100644
--- a/packages/common-components/src/FileInput/FileInput.tsx
+++ b/packages/common-components/src/FileInput/FileInput.tsx
@@ -151,6 +151,8 @@ const FileInput = ({
   useEffect(() => {
     // reset the field on load
     helpers.setValue([])
+  // needed to avoid an infinite loop
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const onDrop = useCallback(

From ff8365a2ed4ed8e2e13a797274f67470c2cd66b8 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Fri, 3 Jun 2022 16:13:07 +0200
Subject: [PATCH 5/9] address comments

---
 .../src/FileInput/FileInput.tsx               |  6 ++---
 .../Modules/FileBrowsers/CSFFileBrowser.tsx   | 15 ++++++++----
 .../FileBrowsers/SharedFileBrowser.tsx        | 17 ++++++++-----
 .../Modules/FileBrowsers/UploadFileModal.tsx  | 24 ++++++++++++-------
 4 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/packages/common-components/src/FileInput/FileInput.tsx b/packages/common-components/src/FileInput/FileInput.tsx
index 474f7957f8..ad98b6d20b 100644
--- a/packages/common-components/src/FileInput/FileInput.tsx
+++ b/packages/common-components/src/FileInput/FileInput.tsx
@@ -119,7 +119,7 @@ interface IFileInputProps extends DropzoneOptions {
     error?: string
   }
   onFileNumberChange: (filesNumber: number) => void
-  onEmptyFolderChange?: (emptyFolderPaths: string[]) => void
+  onEmptyFolderPathsChange?: (emptyFolderPaths: string[]) => void
   moreFilesLabel: string
   testId?: string
 }
@@ -134,7 +134,7 @@ const FileInput = ({
   maxFileSize,
   classNames,
   onFileNumberChange,
-  onEmptyFolderChange,
+  onEmptyFolderPathsChange,
   moreFilesLabel,
   testId,
   ...props
@@ -207,7 +207,7 @@ const FileInput = ({
     // we support folder upload and empty folders
     if(event.dataTransfer){
       const res = await getFilesAndEmptyDirFromDataTransferItems(event.dataTransfer.items)
-      onEmptyFolderChange && res.emptyDirPaths?.length && onEmptyFolderChange(res.emptyDirPaths)
+      onEmptyFolderPathsChange && res.emptyDirPaths?.length && onEmptyFolderPathsChange(res.emptyDirPaths)
       return res.files as File[] || []
     } else {
       // this is a file list using the input
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx
index ac4970c1e9..16d67fe9e3 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx
@@ -184,14 +184,19 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
       return
     }
     const flattenedFiles = await getFilesAndEmptyDirFromDataTransferItems(fileItems)
-    await uploadFiles(bucket, flattenedFiles?.files || [], path)
+    flattenedFiles.files?.length && await uploadFiles(bucket, flattenedFiles.files, path)
 
     //create empty dir
-    flattenedFiles?.emptyDirPaths?.forEach(async (folderPath) => {
-      await filesApiClient.addBucketDirectory(bucket.id, { path: getPathWithFile(currentPath, folderPath) })
+    if(flattenedFiles?.emptyDirPaths?.length){
+      const allDirs = flattenedFiles.emptyDirPaths.map((folderPath) =>
+        filesApiClient.addBucketDirectory(bucket.id, { path: getPathWithFile(currentPath, folderPath) })
+      )
 
-    })
-  }, [bucket, accountRestricted, storageSummary, uploadFiles, addToast, filesApiClient, currentPath])
+      Promise.all(allDirs)
+        .then(() => refreshContents(true))
+        .catch(console.error)
+    }
+  }, [bucket, accountRestricted, storageSummary, uploadFiles, refreshContents, addToast, filesApiClient, currentPath])
 
   const viewFolder = useCallback((cid: string) => {
     const fileSystemItem = pathContents.find(f => f.cid === cid)
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx
index 4be4633a17..4f81a90403 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx
@@ -233,14 +233,19 @@ const SharedFileBrowser = () => {
       return
     }
     const flattenedFiles = await getFilesAndEmptyDirFromDataTransferItems(fileItems)
-    await uploadFiles(bucket, flattenedFiles?.files || [], path)
+    flattenedFiles.files?.length && await uploadFiles(bucket, flattenedFiles.files, path)
 
-    // create any empty dir
-    flattenedFiles?.emptyDirPaths?.forEach(async (folderPath) => {
-      await filesApiClient.addBucketDirectory(bucket.id, { path: getPathWithFile(currentPath, folderPath) })
+    //create empty dir
+    if(flattenedFiles?.emptyDirPaths?.length){
+      const allDirs = flattenedFiles.emptyDirPaths.map((folderPath) =>
+        filesApiClient.addBucketDirectory(bucket.id, { path: getPathWithFile(currentPath, folderPath) })
+      )
 
-    })
-  }, [bucket, accountRestricted, storageSummary, uploadFiles, addToast, filesApiClient, currentPath])
+      Promise.all(allDirs)
+        .then(() => refreshContents(true))
+        .catch(console.error)
+    }
+  }, [bucket, accountRestricted, storageSummary, uploadFiles, addToast, filesApiClient, currentPath, refreshContents])
 
   const bulkOperations: IBulkOperations = useMemo(() => ({
     [CONTENT_TYPES.Directory]: ["download", "move", "delete", "share"],
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
index 10e46cf7c9..dd74b8fbcd 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
@@ -85,7 +85,7 @@ const UploadFileModule = ({ modalOpen, close }: IUploadFileModuleProps) => {
   const { currentPath, refreshContents, bucket } = useFileBrowser()
   const { storageSummary, uploadFiles } = useFiles()
   const { filesApiClient } = useFilesApi()
-  const [emptyFolderToCreate, setEmptyFolderToCreate] = useState<string[]>([])
+  const [emptyFolders, setEmptyFolders] = useState<string[]>([])
 
   const UploadSchema = useMemo(() => object().shape({
     files: array().required(t`Please select a file to upload`)
@@ -111,20 +111,28 @@ const UploadFileModule = ({ modalOpen, close }: IUploadFileModuleProps) => {
     helpers.setSubmitting(true)
     try {
       close()
-      await uploadFiles(bucket, values.files, currentPath)
+      await values.files.length && uploadFiles(bucket, values.files, currentPath)
 
-      //create empty folders
-      emptyFolderToCreate.forEach(async (folderPath) => {
-        await filesApiClient.addBucketDirectory(bucket.id, { path: getPathWithFile(currentPath, folderPath) })
+      // //create empty folders
+      // emptyFolders.forEach(async (folderPath) => {
+      //   await filesApiClient.addBucketDirectory(bucket.id, { path: getPathWithFile(currentPath, folderPath) })
+      // })
+      //create empty dir
+      if(emptyFolders.length){
+        const allDirs = emptyFolders.map((folderPath) =>
+          filesApiClient.addBucketDirectory(bucket.id, { path: getPathWithFile(currentPath, folderPath) })
+        )
 
-      })
+        await Promise.all(allDirs)
+          .catch(console.error)
+      }
       refreshContents && refreshContents()
       helpers.resetForm()
     } catch (error: any) {
       console.error(error)
     }
     helpers.setSubmitting(false)
-  }, [bucket, close, uploadFiles, currentPath, emptyFolderToCreate, refreshContents, filesApiClient])
+  }, [bucket, close, uploadFiles, currentPath, emptyFolders, refreshContents, filesApiClient])
 
   const formik = useFormik({
     initialValues: { files: [] },
@@ -159,7 +167,7 @@ const UploadFileModule = ({ modalOpen, close }: IUploadFileModuleProps) => {
             maxSize={2 * 1024 ** 3}
             name="files"
             onFileNumberChange={onFileNumberChange}
-            onEmptyFolderChange={setEmptyFolderToCreate}
+            onEmptyFolderPathsChange={setEmptyFolders}
             testId="fileUpload"
           />
           <footer className={classes.footer}>

From ea3e3f28e13d1cc37e6346f60db6cf777b4251d0 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Fri, 3 Jun 2022 16:13:29 +0200
Subject: [PATCH 6/9] stray comments

---
 .../src/Components/Modules/FileBrowsers/UploadFileModal.tsx   | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
index dd74b8fbcd..b8dbeae37a 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
@@ -113,10 +113,6 @@ const UploadFileModule = ({ modalOpen, close }: IUploadFileModuleProps) => {
       close()
       await values.files.length && uploadFiles(bucket, values.files, currentPath)
 
-      // //create empty folders
-      // emptyFolders.forEach(async (folderPath) => {
-      //   await filesApiClient.addBucketDirectory(bucket.id, { path: getPathWithFile(currentPath, folderPath) })
-      // })
       //create empty dir
       if(emptyFolders.length){
         const allDirs = emptyFolders.map((folderPath) =>

From b2b8d33eb5a9541a34d71684ea66f40654847932 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Fri, 3 Jun 2022 16:41:42 +0200
Subject: [PATCH 7/9] same on storage

---
 .../Modules/FileBrowsers/CSFFileBrowser.tsx   |  1 +
 .../FileBrowsers/SharedFileBrowser.tsx        |  1 +
 .../Modules/FileBrowsers/UploadFileModal.tsx  |  6 +-
 .../UploadFileModal/UploadFileModal.tsx       | 25 +++++-
 .../src/Components/Pages/BucketPage.tsx       | 23 ++++--
 .../src/Contexts/StorageContext.tsx           |  3 +-
 .../Utils/getFilesFromDataTransferItems.ts    | 80 -------------------
 packages/storage-ui/src/Utils/pathUtils.ts    |  2 +-
 8 files changed, 47 insertions(+), 94 deletions(-)
 delete mode 100644 packages/storage-ui/src/Utils/getFilesFromDataTransferItems.ts

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx
index 16d67fe9e3..60266267f1 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx
@@ -183,6 +183,7 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
       })
       return
     }
+
     const flattenedFiles = await getFilesAndEmptyDirFromDataTransferItems(fileItems)
     flattenedFiles.files?.length && await uploadFiles(bucket, flattenedFiles.files, path)
 
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx
index 4f81a90403..6291ba1053 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx
@@ -232,6 +232,7 @@ const SharedFileBrowser = () => {
       })
       return
     }
+
     const flattenedFiles = await getFilesAndEmptyDirFromDataTransferItems(fileItems)
     flattenedFiles.files?.length && await uploadFiles(bucket, flattenedFiles.files, path)
 
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
index b8dbeae37a..d5de3b27a6 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
@@ -1,7 +1,7 @@
 import { Button, FileInput } from "@chainsafe/common-components"
 import { useFiles } from "../../../Contexts/FilesContext"
 import { createStyles, makeStyles } from "@chainsafe/common-theme"
-import React, { useCallback, useMemo, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useState } from "react"
 import { Form, useFormik, FormikProvider } from "formik"
 import { array, object } from "yup"
 import CustomModal from "../../Elements/CustomModal"
@@ -101,6 +101,10 @@ const UploadFileModule = ({ modalOpen, close }: IUploadFileModuleProps) => {
         })
   }), [bucket, storageSummary])
 
+  useEffect(() => {
+    setEmptyFolders([])
+  }, [])
+
   const onFileNumberChange = useCallback((filesNumber: number) => {
     setIsDoneDisabled(filesNumber === 0)
   }, [])
diff --git a/packages/storage-ui/src/Components/Modules/UploadFileModal/UploadFileModal.tsx b/packages/storage-ui/src/Components/Modules/UploadFileModal/UploadFileModal.tsx
index 11f7a166e6..e97fb4acbf 100644
--- a/packages/storage-ui/src/Components/Modules/UploadFileModal/UploadFileModal.tsx
+++ b/packages/storage-ui/src/Components/Modules/UploadFileModal/UploadFileModal.tsx
@@ -1,7 +1,7 @@
 import { Button, FileInput } from "@chainsafe/common-components"
 import { useStorage } from "../../../Contexts/StorageContext"
 import { createStyles, makeStyles } from "@chainsafe/common-theme"
-import React, { useCallback, useState } from "react"
+import React, { useCallback, useEffect, useState } from "react"
 import { Formik, Form } from "formik"
 import { array, object } from "yup"
 import CustomModal from "../../Elements/CustomModal"
@@ -9,6 +9,8 @@ import { Trans, t } from "@lingui/macro"
 import clsx from "clsx"
 import { CSSTheme } from "../../../Themes/types"
 import { useFileBrowser } from "../../../Contexts/FileBrowserContext"
+import { useStorageApi } from "../../../Contexts/StorageApiContext"
+import { getPathWithFile } from "../../../Utils/pathUtils"
 
 const useStyles = makeStyles(({ constants, breakpoints }: CSSTheme) =>
   createStyles({
@@ -79,9 +81,15 @@ const UploadFileModal = ({ modalOpen, close }: IUploadFileModuleProps) => {
   const [isDoneDisabled, setIsDoneDisabled] = useState(true)
   const { uploadFiles } = useStorage()
   const { currentPath, refreshContents, bucket } = useFileBrowser()
+  const { storageApiClient } = useStorageApi()
+  const [emptyFolders, setEmptyFolders] = useState<string[]>([])
 
   const UploadSchema = object().shape({ files: array().required(t`Please select a file to upload`) })
 
+  useEffect(() => {
+    setEmptyFolders([])
+  }, [])
+
   const onFileNumberChange = useCallback((filesNumber: number) => {
     setIsDoneDisabled(filesNumber === 0)
   }, [])
@@ -91,14 +99,24 @@ const UploadFileModal = ({ modalOpen, close }: IUploadFileModuleProps) => {
     helpers.setSubmitting(true)
     try {
       close()
-      await uploadFiles(bucket.id, values.files, currentPath)
+      await values.files.length && uploadFiles(bucket.id, values.files, currentPath)
+
+      //create empty dir
+      if(emptyFolders.length){
+        const allDirs = emptyFolders.map((folderPath) =>
+          storageApiClient.addBucketDirectory(bucket.id, { path: getPathWithFile(currentPath, folderPath) })
+        )
+
+        await Promise.all(allDirs)
+          .catch(console.error)
+      }
       refreshContents && refreshContents()
       helpers.resetForm()
     } catch (error: any) {
       console.error(error)
     }
     helpers.setSubmitting(false)
-  }, [close, currentPath, uploadFiles, refreshContents, bucket])
+  }, [bucket, close, uploadFiles, currentPath, emptyFolders, refreshContents, storageApiClient])
 
   return (
     <CustomModal
@@ -132,6 +150,7 @@ const UploadFileModal = ({ modalOpen, close }: IUploadFileModuleProps) => {
             maxSize={2 * 1024 ** 3}
             name="files"
             onFileNumberChange={onFileNumberChange}
+            onEmptyFolderPathsChange={setEmptyFolders}
             testId="fileUpload"
           />
           <footer className={classes.footer}>
diff --git a/packages/storage-ui/src/Components/Pages/BucketPage.tsx b/packages/storage-ui/src/Components/Pages/BucketPage.tsx
index 0ace743ccc..e816239373 100644
--- a/packages/storage-ui/src/Components/Pages/BucketPage.tsx
+++ b/packages/storage-ui/src/Components/Pages/BucketPage.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react"
-import { Crumb, useToasts, useHistory, useLocation } from "@chainsafe/common-components"
+import { Crumb, useToasts, useHistory, useLocation, getFilesAndEmptyDirFromDataTransferItems } from "@chainsafe/common-components"
 import { useStorage, FileSystemItem } from "../../Contexts/StorageContext"
 import {
   getArrayOfPaths,
@@ -22,7 +22,6 @@ import { useLocalStorage } from "@chainsafe/browser-storage-hooks"
 import { DISMISSED_SURVEY_KEY } from "../Modules/SurveyBanner"
 import { usePageTrack } from "../../Contexts/PosthogContext"
 import { Helmet } from "react-helmet-async"
-import getFilesFromDataTransferItems from "../../Utils/getFilesFromDataTransferItems"
 
 const BucketPage: React.FC<IFileBrowserModuleProps> = () => {
   const { storageBuckets, uploadFiles, getStorageSummary, downloadFile } = useStorage()
@@ -183,11 +182,21 @@ const BucketPage: React.FC<IFileBrowserModuleProps> = () => {
       return
     }
 
-    const flattenedFiles = await getFilesFromDataTransferItems(fileItems)
-    uploadFiles(bucket.id, flattenedFiles, path)
-      .then(() => refreshContents())
-      .catch(console.error)
-  }, [bucket, accountRestricted, addToast, uploadFiles, refreshContents])
+    const flattenedFiles = await getFilesAndEmptyDirFromDataTransferItems(fileItems)
+    flattenedFiles.files?.length && await uploadFiles(bucket.id, flattenedFiles.files, path)
+
+    //create empty dir
+    if(flattenedFiles?.emptyDirPaths?.length){
+      const allDirs = flattenedFiles.emptyDirPaths.map((folderPath) =>
+        storageApiClient.addBucketDirectory(bucket.id, { path: getPathWithFile(currentPath, folderPath) })
+      )
+
+      await Promise.all(allDirs)
+        .catch(console.error)
+    }
+
+    refreshContents(true)
+  }, [bucket, accountRestricted, uploadFiles, addToast, storageApiClient, currentPath, refreshContents])
 
   const viewFolder = useCallback((toView: ISelectedFile) => {
     const fileSystemItem = pathContents.find(f => f.cid === toView.cid && f.name === toView.name)
diff --git a/packages/storage-ui/src/Contexts/StorageContext.tsx b/packages/storage-ui/src/Contexts/StorageContext.tsx
index 9181133185..deeafdf6d0 100644
--- a/packages/storage-ui/src/Contexts/StorageContext.tsx
+++ b/packages/storage-ui/src/Contexts/StorageContext.tsx
@@ -19,8 +19,7 @@ import axios, { CancelToken } from "axios"
 import { getParentPathFromFilePath, getPathWithFile } from "../Utils/pathUtils"
 import dayjs from "dayjs"
 import isSameOrAfter from "dayjs/plugin/isSameOrAfter"
-import { ToastParams, useToasts } from "@chainsafe/common-components"
-import { FileWithPath } from "../Utils/getFilesFromDataTransferItems"
+import { FileWithPath, ToastParams, useToasts } from "@chainsafe/common-components"
 dayjs.extend(isSameOrAfter)
 
 type StorageContextProps = {
diff --git a/packages/storage-ui/src/Utils/getFilesFromDataTransferItems.ts b/packages/storage-ui/src/Utils/getFilesFromDataTransferItems.ts
deleted file mode 100644
index 4fc5b0d153..0000000000
--- a/packages/storage-ui/src/Utils/getFilesFromDataTransferItems.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-//Shamelessly borrowed from https://github.com/anatol-grabowski/datatransfer-files-promise with added Types
-
-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, "path", {
-          value: path
-        })
-        resolve(file as FileWithPath)
-      }, (err: Error) => {
-        reject(err)
-      })
-    })
-  }
-
-  const dirReadEntries = (dirReader: DirectoryReader, path: string): Promise<FileWithPath[]> => {
-    return new Promise((resolve, reject) => {
-      dirReader.readEntries(async (entries: FileSystemEntry[]) => {
-        let files = [] as Array<FileWithPath>
-        for (const entry of entries) {
-          const itemFiles = await getFilesFromEntry(entry, path) as Array<FileWithPath>
-          files = files.concat(itemFiles)
-        }
-        resolve(files)
-      }, (err: Error) => {
-        reject(err)
-      })
-    })
-  }
-
-  const readDir = async (entry: DirectoryEntry, path: string) => {
-    const dirReader = entry.createReader()
-    const newPath = path + entry.name + "/"
-    let files = [] as Array<FileWithPath>
-    let newFiles
-    do {
-      newFiles = await dirReadEntries(dirReader, newPath)
-      files = files.concat(newFiles)
-    } while (newFiles.length > 0)
-    return files
-  }
-
-  const getFilesFromEntry = async (entry: FileSystemEntry, path = "") => {
-    if (entry.isFile) {
-      const file = await readFile(entry as FileEntry, path)
-      return [file]
-    }
-    if (entry.isDirectory) {
-      const files = await readDir(entry as DirectoryEntry, path)
-      return files
-    }
-  }
-
-  let files = [] as Array<FileWithPath>
-  const entries = []
-
-  // Pull out all entries before reading them
-  for (let i = 0, ii = dataTransferItems.length; i < ii; i++) {
-    entries.push(dataTransferItems[i].webkitGetAsEntry())
-  }
-
-  // Recursively read through all entries
-  for (const entry of entries) {
-    if (entry) {
-      const newFiles = await getFilesFromEntry(entry)
-      if (newFiles) {
-        files = files.concat(newFiles)
-      }
-    }
-  }
-
-  return files
-}
-
-export default getFilesFromDataTransferItems
\ No newline at end of file
diff --git a/packages/storage-ui/src/Utils/pathUtils.ts b/packages/storage-ui/src/Utils/pathUtils.ts
index be16f0fbf3..3e6c822ebf 100644
--- a/packages/storage-ui/src/Utils/pathUtils.ts
+++ b/packages/storage-ui/src/Utils/pathUtils.ts
@@ -53,7 +53,7 @@ export function getPathWithFile(path?: string, fileName?: string) {
 }
 
 // /path/to/somewhere/1.txt -> /path/to/somewhere
-export function getParentPathFromFilePath(filePath: string) {
+export function getParentPathFromFilePath(filePath = "") {
   const parentPath = filePath.substring(0, filePath.lastIndexOf("/"))
   if (!parentPath) return "/"
   return parentPath

From 60ba8a243eff531d147083b3047015df9557d8cf Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Fri, 3 Jun 2022 22:36:56 +0200
Subject: [PATCH 8/9] refresh on storage

---
 .../Components/Modules/UploadFileModal/UploadFileModal.tsx  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/storage-ui/src/Components/Modules/UploadFileModal/UploadFileModal.tsx b/packages/storage-ui/src/Components/Modules/UploadFileModal/UploadFileModal.tsx
index e97fb4acbf..e172c9e0d1 100644
--- a/packages/storage-ui/src/Components/Modules/UploadFileModal/UploadFileModal.tsx
+++ b/packages/storage-ui/src/Components/Modules/UploadFileModal/UploadFileModal.tsx
@@ -96,10 +96,11 @@ const UploadFileModal = ({ modalOpen, close }: IUploadFileModuleProps) => {
 
   const onSubmit = useCallback(async (values, helpers) => {
     if (!bucket) return
+
     helpers.setSubmitting(true)
     try {
       close()
-      await values.files.length && uploadFiles(bucket.id, values.files, currentPath)
+      values.files.length && await uploadFiles(bucket.id, values.files, currentPath)
 
       //create empty dir
       if(emptyFolders.length){
@@ -110,11 +111,12 @@ const UploadFileModal = ({ modalOpen, close }: IUploadFileModuleProps) => {
         await Promise.all(allDirs)
           .catch(console.error)
       }
-      refreshContents && refreshContents()
       helpers.resetForm()
     } catch (error: any) {
       console.error(error)
     }
+
+    refreshContents && refreshContents()
     helpers.setSubmitting(false)
   }, [bucket, close, uploadFiles, currentPath, emptyFolders, refreshContents, storageApiClient])
 

From 65b79e52ff1e80ea230f8577c6c5effe88470263 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Thu, 9 Jun 2022 20:08:27 +0100
Subject: [PATCH 9/9] typo

---
 .../src/Components/Modules/FileBrowsers/UploadFileModal.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
index 3ee544a8db..85311ba1ed 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
@@ -127,7 +127,7 @@ const UploadFileModule = ({ modalOpen, close }: IUploadFileModuleProps) => {
 
   const onFormikValidate = useCallback(({ files }: UploadedFiles) => {
 
-    if (files.length === 0, isTouched) {
+    if (files.length === 0 && isTouched) {
       return { files: t`Please select a file to upload` }
     }