feat(media dir nav): navigation through sub directories and breadcrumbs

packages/decap-cms-backend-github/src/API.ts

@@ -62,8 +62,13 @@ export interface Config {
   getUser: ({ token }: { token: string }) => Promise<GitHubUser>;
 }
 
+export enum TreeFileType {
+  TREE = 'tree',
+  BLOB = 'blob',
+}
+
 interface TreeFile {
-  type: 'blob' | 'tree';
+  type: TreeFileType;
   sha: string;
   path: string;
   raw?: string;
@@ -382,7 +387,9 @@ export default class API {
             this.request(`${this.repoURL}/git/trees`, {
               method: 'POST',
               body: JSON.stringify({
-                tree: [{ path: 'README.md', mode: '100644', type: 'blob', sha: item.sha }],
+                tree: [
+                  { path: 'README.md', mode: '100644', type: TreeFileType.BLOB, sha: item.sha },
+                ],
               }),
             }),
           )
@@ -676,8 +683,8 @@ export default class API {
 
   async listFiles(
     path: string,
-    { repoURL = this.repoURL, branch = this.branch, depth = 1 } = {},
-  ): Promise<{ type: string; id: string; name: string; path: string; size: number }[]> {
+    { repoURL = this.repoURL, branch = this.branch, depth = 1, types = [TreeFileType.BLOB] } = {},
+  ): Promise<{ type: TreeFileType; id: string; name: string; path: string; size: number }[]> {
     const folder = trim(path, '/');
     try {
       const result: Octokit.GitGetTreeResponse = await this.request(
@@ -691,9 +698,12 @@ export default class API {
       return (
         result.tree
           // filter only files and up to the required depth
-          .filter(file => file.type === 'blob' && file.path.split('/').length <= depth)
+          .filter(
+            file =>
+              types.includes(file.type as TreeFileType) && file.path.split('/').length <= depth,
+          )
           .map(file => ({
-            type: file.type,
+            type: file.type as TreeFileType,
             id: file.sha,
             name: basename(file.path),
             path: `${folder}/${file.path}`,
@@ -1394,7 +1404,7 @@ export default class API {
       const entry = {
         path: trimStart(file.path, '/'),
         mode: '100644',
-        type: 'blob',
+        type: TreeFileType.BLOB,
         sha: file.sha,
       } as TreeEntry;
 
@@ -1416,14 +1426,14 @@ export default class API {
         tree.push({
           path: file.path,
           mode: '100644',
-          type: 'blob',
+          type: TreeFileType.BLOB,
           sha: null,
         });
         // create in new path
         tree.push({
           path: file.path.replace(sourceDir, destDir),
           mode: '100644',
-          type: 'blob',
+          type: TreeFileType.BLOB,
           sha: file.path === from ? sha : file.id,
         });
       }

packages/decap-cms-backend-github/src/__tests__/GraphQLAPI.spec.js

@@ -41,7 +41,7 @@ describe('github GraphQL API', () => {
       ];
       const path = 'posts';
 
-      expect(api.getAllFiles(entries, path)).toEqual([
+      expect(api.getAllFiles(entries, path, ['blob'])).toEqual([
         {
           name: 'post-1.md',
           id: 'sha-1',
@@ -65,5 +65,70 @@ describe('github GraphQL API', () => {
         },
       ]);
     });
+
+    it('should should return directories when types includes `tree`', () => {
+      const api = new GraphQLAPI({ branch: 'gh-pages', repo: 'owner/my-repo' });
+      const entries = [
+        {
+          name: 'post-1.md',
+          sha: 'sha-1',
+          type: 'blob',
+          blob: { size: 1 },
+        },
+        {
+          name: 'post-2.md',
+          sha: 'sha-2',
+          type: 'blob',
+          blob: { size: 2 },
+        },
+        {
+          name: '2019',
+          sha: 'dir-sha',
+          type: 'tree',
+          object: {
+            entries: [
+              {
+                name: 'nested-post.md',
+                sha: 'nested-post-sha',
+                type: 'blob',
+                blob: { size: 3 },
+              },
+            ],
+          },
+        },
+      ];
+      const path = 'posts';
+
+      expect(api.getAllFiles(entries, path, ['blob', 'tree'])).toEqual([
+        {
+          name: 'post-1.md',
+          id: 'sha-1',
+          type: 'blob',
+          size: 1,
+          path: 'posts/post-1.md',
+        },
+        {
+          name: 'post-2.md',
+          id: 'sha-2',
+          type: 'blob',
+          size: 2,
+          path: 'posts/post-2.md',
+        },
+        {
+          name: '2019',
+          id: 'dir-sha',
+          type: 'tree',
+          size: 0,
+          path: 'posts/2019',
+        },
+        {
+          name: 'nested-post.md',
+          id: 'nested-post-sha',
+          type: 'blob',
+          size: 3,
+          path: 'posts/2019/nested-post.md',
+        },
+      ]);
+    });
   });
 });

packages/decap-cms-core/src/actions/media.ts

@@ -99,7 +99,6 @@ export function getAsset({ collection, entry, path, field }: GetAssetArgs) {
 
     const state = getState();
     const resolvedPath = selectMediaFilePath(state.config, collection, entry, path, field);
-
     let { asset, isLoading, error } = state.medias[resolvedPath] || {};
     if (isLoading) {
       return emptyAsset;

packages/decap-cms-core/src/actions/mediaLibrary.ts

@@ -211,15 +211,24 @@ function createMediaFileFromAsset({
 }
 
 export function persistMedia(file: File, opts: MediaOptions = {}) {
-  const { privateUpload, field } = opts;
+  const { privateUpload, field, currentMediaFolder } = opts;
   return async (dispatch: ThunkDispatch<State, {}, AnyAction>, getState: () => State) => {
     const state = getState();
     const backend = currentBackend(state.config);
     const integration = selectIntegration(state, null, 'assetStore');
-    const files: MediaFile[] = selectMediaFiles(state, field);
+    const files: MediaFile[] = selectMediaFiles(state);
     const fileName = sanitizeSlug(file.name.toLowerCase(), state.config.slug);
-    const existingFile = files.find(existingFile => existingFile.name.toLowerCase() === fileName);
-
+    const entry = state.entryDraft.get('entry');
+    const collection = state.collections.get(entry?.get('collection'));
+    const path = selectMediaFilePath(
+      state.config,
+      collection,
+      entry,
+      fileName,
+      field,
+      currentMediaFolder,
+    );
+    const existingFile = files.find(existingFile => existingFile.path.toLowerCase() === path);
     const editingDraft = selectEditingDraft(state.entryDraft);
 
     /**
@@ -265,7 +274,14 @@ export function persistMedia(file: File, opts: MediaOptions = {}) {
       } else {
         const entry = state.entryDraft.get('entry');
         const collection = state.collections.get(entry?.get('collection'));
-        const path = selectMediaFilePath(state.config, collection, entry, fileName, field);
+        const path = selectMediaFilePath(
+          state.config,
+          collection,
+          entry,
+          fileName,
+          field,
+          currentMediaFolder,
+        );
         assetProxy = createAssetProxy({
           file,
           path,
@@ -437,6 +453,7 @@ export function mediaLoading(page: number) {
 interface MediaOptions {
   privateUpload?: boolean;
   field?: EntryField;
+  currentMediaFolder?: string;
   page?: number;
   canPaginate?: boolean;
   dynamicSearch?: boolean;

packages/decap-cms-core/src/backend.ts

@@ -261,6 +261,7 @@ export interface MediaFile {
   url?: string;
   file?: File;
   field?: EntryField;
+  isDirectory?: boolean;
 }
 
 interface BackupEntry {