Filter out os hidden files (#2159)

* filter DS and thumb * storage * Update packages/common-components/src/FileInput/FileInput.tsx * lingui extract Co-authored-by: GitHub Actions <actions@github.com> Co-authored-by: Juan Manuel Spoleti <104365141+juans-chainsafe@users.noreply.github.com> Co-authored-by: Tanmoy Basak Anjan <tanmoy3399@gmail.com>
ChainSafe · May 31, 2022 · f75cef5 · f75cef5
1 parent 0c5ef78
commit f75cef5
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/packages/files-ui/src/Contexts/FilesContext.tsx b/packages/files-ui/src/Contexts/FilesContext.tsx
@@ -48,6 +48,12 @@ export interface BucketKeyPermission extends Bucket {
   readers: RichUserInfo[]
 }
 
+const FILES_TO_IGNORE = [
+  // Thumbnail cache files for macOS and Windows
+  ".DS_Store", // macOs
+  "Thumbs.db"  // Windows
+]
+
 type FilesContext = {
   buckets: BucketKeyPermission[]
   storageSummary: BucketSummaryResponse | undefined
@@ -351,7 +357,9 @@ const FilesProvider = ({ children }: FilesContextProps) => {
   }, [filesApiClient])
 
   const uploadFiles = useCallback(async (bucket: BucketKeyPermission, files: FileWithPath[], rootUploadPath: string) => {
-    const hasOversizedFile = files.some(file => file.size > MAX_FILE_SIZE)
+    const acceptedFiles = files.filter(f => !FILES_TO_IGNORE.includes(f.name))
+
+    const hasOversizedFile = acceptedFiles.some(file => file.size > MAX_FILE_SIZE)
     if (hasOversizedFile) {
       addToast({
         title: t`We can't encrypt files larger than 2GB. Some items will not be uploaded`,
@@ -363,9 +371,9 @@ const FilesProvider = ({ children }: FilesContextProps) => {
     const cancelToken = cancelSource.token
 
     const toastParams: ToastParams = {
-      title: plural(files.length, {
-        one: `Encrypting and uploading ${files.length} file`,
-        other: `Encrypting and uploading ${files.length} files`
+      title: plural(acceptedFiles.length, {
+        one: `Encrypting and uploading ${acceptedFiles.length} file`,
+        other: `Encrypting and uploading ${acceptedFiles.length} files`
       }),
       type: "success",
       progress: 0,
@@ -377,12 +385,12 @@ const FilesProvider = ({ children }: FilesContextProps) => {
     setUploadsInProgress(true)
 
     try {
-      const paths = [...new Set(files.map(f => getParentPathFromFilePath(f.path)))]
-      const totalUploadSize = files.reduce((sum, f) => sum += f.size, 0)
+      const paths = [...new Set(acceptedFiles.map(f => getParentPathFromFilePath(f.path)))]
+      const totalUploadSize = acceptedFiles.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 filesToUpload = acceptedFiles.filter((f => getParentPathFromFilePath(f.path) === path))
         const batchSize = filesToUpload.reduce((sum, f) => sum += f.size, 0)
         // prevent unsafe references warning on uploadedSize
         const uploadedSizeRef = uploadedSize

diff --git a/packages/storage-ui/src/Contexts/StorageContext.tsx b/packages/storage-ui/src/Contexts/StorageContext.tsx
@@ -73,6 +73,12 @@ interface IFileSystemItem extends FileContentResponse {
 
 type FileSystemItem = IFileSystemItem
 
+const FILES_TO_IGNORE = [
+  // Thumbnail cache files for macOS and Windows
+  ".DS_Store", // macOs
+  "Thumbs.db"  // Windows
+]
+
 const StorageContext = React.createContext<StorageContext | undefined>(undefined)
 
 const StorageProvider = ({ children }: StorageContextProps) => {
@@ -310,13 +316,14 @@ const StorageProvider = ({ children }: StorageContextProps) => {
       return
     }
 
+    const acceptedFiles = files.filter(f => !FILES_TO_IGNORE.includes(f.name))
     const cancelSource = axios.CancelToken.source()
     const cancelToken = cancelSource.token
 
     const toastParams: ToastParams = {
-      title: plural(files.length, {
-        one: `Uploading ${files.length} file`,
-        other: `Uploading ${files.length} files`
+      title: plural(acceptedFiles.length, {
+        one: `Uploading ${acceptedFiles.length} file`,
+        other: `Uploading ${acceptedFiles.length} files`
       }),
       type: "success",
       progress: 0,
@@ -329,7 +336,7 @@ const StorageProvider = ({ children }: StorageContextProps) => {
 
     try {
       const filesParam = await Promise.all(
-        files
+        acceptedFiles
           .map(async (f) => {
             const fileData = await readFileAsync(f)
             return {