Merge pull request #38 from G4brym/add-support-for-big-folders

Add support for folders with more than 1000 files or truncated by the r2 api
G4brym · Sep 17, 2023 · 2ab79e7 · 2ab79e7
2 parents af1b738 + 658c3ed
commit 2ab79e7
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -64,7 +64,6 @@ wrangler publish
 - Delete folders
 - Image thumbnail's using Cloudflare workers
 - Tooltip when hovering a file with absolute time in "x days time ago" format
-- Automatically load more files, when the bottom is reached (current limit is 1000 files)
 - bundle bootstrap icons instead of importing
 
 ## Known issues

diff --git a/READMEes.md b/READMEes.md
@@ -62,7 +62,6 @@ wrangler publish
 - Eliminar carpetas
 - Miniaturas de imágenes usando workers de Cloudflare
 - Información sobre herramientas al pasar el ratón por encima de un archivo con el formato "hace x días"
-- Cargar automáticamente más archivos cuando se alcance la parte inferior (el límite actual es de 1000 archivos)
 - Agrupar íconos de bootstrap en lugar de importarlos
 
 ## Problemas conocidos

diff --git a/READMEfr.md b/READMEfr.md
@@ -62,7 +62,6 @@ wrangler publish
 - Supprimer des dossiers
 - Miniatures d'images avec les travailleurs Cloudflare
 - Info-bulle lors du survol d'un fichier avec le format "il y a x jours"
-- Chargement automatique de plus de fichiers lorsque le bas de la liste est atteint (la limite actuelle est de 1000 fichiers)
 - Regrouper les icônes Bootstrap au lieu de les importer
 
 ## Problèmes connus

diff --git a/READMEpt.md b/READMEpt.md
@@ -61,7 +61,6 @@ wrangler publish
 - Excluir pastas
 - Miniaturas de imagens usando workers do Cloudflare
 - Informações de ferramentas ao passar o mouse sobre um arquivo no formato "há x dias"
-- Carregar automaticamente mais arquivos quando chegar ao final (o limite atual é de 1000 arquivos)
 - Agrupar ícones do Bootstrap em vez de importá-los
 
 ## Problemas Conhecidos

diff --git a/packages/dashboard/src/api.js b/packages/dashboard/src/api.js
@@ -115,58 +115,77 @@ const apiHandler = {
   listObjects: async () => {
     const prefix = getCurrentFolder()
 
-    const response = await axios.get(`/api/buckets/${store.state.activeBucket}?include=customMetadata&include=httpMetadata`, {
-      params: {
-        delimiter: '/',
-        prefix: encodeKey(prefix)
-        // limit: 1000  TODO: only use this parameter on 1.0.3 or above
-      }
-    })
-
-    let files = []
-    if (response.data.objects) {
-      files = response.data.objects.filter(function (obj) {
-        return !obj.key.endsWith('/')
-      })
-      files = files.map(function (obj) {
-        const name = obj.key.replace(prefix, '')
-        const extension = name.split('.').pop()
-
-        return {
-          ...obj,
-          name,
-          path: store.state.currentFolder,
-          extension,
-          preview: preview.getType(name),
-          isFile: true,
-          hash: encodeKey(name)
+    let filesConc = []
+    let foldersConc = []
+
+    let truncated = true
+    let cursor = null
+
+    while (truncated) {
+      const response = await axios.get(`/api/buckets/${store.state.activeBucket}?include=customMetadata&include=httpMetadata`, {
+        params: {
+          delimiter: '/',
+          prefix: encodeKey(prefix),
+          cursor: cursor
         }
-      }).filter(obj => {
-        return !(store.state.config?.showHiddenFiles !== true && obj.name.startsWith('.'))
       })
-    }
 
-    let folders = []
-    if (response.data.delimitedPrefixes) {
-      folders = response.data.delimitedPrefixes.map(function (obj) {
-        const split = obj.split('/')
-        const name = split[split.length - 2]
-
-        return {
-          name,
-          path: store.state.currentFolder,
-          key: obj,
-          isFolder: true,
-          hash: encodeKey(obj)
+      truncated = response.data.truncated
+      cursor = response.data.cursor
+
+      let files = []
+      if (response.data.objects) {
+        files = response.data.objects.filter(function (obj) {
+          return !obj.key.endsWith('/')
+        })
+        files = files.map(function (obj) {
+          const name = obj.key.replace(prefix, '')
+          const extension = name.split('.').pop()
+
+          return {
+            ...obj,
+            name,
+            path: store.state.currentFolder,
+            extension,
+            preview: preview.getType(name),
+            isFile: true,
+            hash: encodeKey(name)
+          }
+        }).filter(obj => {
+          return !(store.state.config?.showHiddenFiles !== true && obj.name.startsWith('.'))
+        })
+
+        for (const f of files) {
+          filesConc.push(f)
         }
-      }).filter(obj => {
-        return !(store.state.config?.showHiddenFiles !== true && obj.name.startsWith('.'))
-      })
+      }
+
+      let folders = []
+      if (response.data.delimitedPrefixes) {
+        folders = response.data.delimitedPrefixes.map(function (obj) {
+          const split = obj.split('/')
+          const name = split[split.length - 2]
+
+          return {
+            name,
+            path: store.state.currentFolder,
+            key: obj,
+            isFolder: true,
+            hash: encodeKey(obj)
+          }
+        }).filter(obj => {
+          return !(store.state.config?.showHiddenFiles !== true && obj.name.startsWith('.'))
+        })
+
+        for (const f of folders) {
+          foldersConc.push(f)
+        }
+      }
     }
 
     return {
-      files: files.reverse(),
-      folders
+      files: filesConc.reverse(),
+      folders: foldersConc
     }
   }
 }