Merge pull request #16018 from strapi/fix/validate-ml-assets-

packages/core/upload/admin/src/hooks/tests/useAssets.test.js

@@ -243,4 +243,97 @@ describe('useAssets', () => {
 
     console.error = originalConsoleError;
   });
+
+  it('should filter out any assets without a name', async () => {
+    const { get } = useFetchClient();
+
+    get.mockReturnValue({
+      data: {
+        results: [
+          {
+            name: null,
+            mime: 'image/jpeg',
+            ext: 'jpg',
+          },
+          {
+            name: 'test',
+            mime: 'image/jpeg',
+            ext: 'jpg',
+          },
+        ],
+      },
+    });
+
+    const { result, waitFor } = await setup({});
+
+    await waitFor(() => result.current.data !== undefined);
+
+    expect(result.current.data.results).toEqual([
+      {
+        name: 'test',
+        mime: 'image/jpeg',
+        ext: 'jpg',
+      },
+    ]);
+  });
+
+  it('should set mime and ext to strings as defaults if they are nullish', async () => {
+    const { get } = useFetchClient();
+
+    get.mockReturnValue({
+      data: {
+        results: [
+          {
+            name: 'test 1',
+            mime: null,
+            ext: 'jpg',
+          },
+          {
+            name: 'test 2',
+            mime: 'image/jpeg',
+            ext: null,
+          },
+          {
+            name: 'test 3',
+            mime: null,
+            ext: null,
+          },
+          {
+            name: 'test 4',
+            mime: 'image/jpeg',
+            ext: 'jpg',
+          },
+        ],
+      },
+    });
+
+    const { result, waitFor } = await setup({});
+
+    await waitFor(() => result.current.data !== undefined);
+
+    expect(result.current.data.results).toMatchInlineSnapshot(`
+      [
+        {
+          "ext": "jpg",
+          "mime": "",
+          "name": "test 1",
+        },
+        {
+          "ext": "",
+          "mime": "image/jpeg",
+          "name": "test 2",
+        },
+        {
+          "ext": "",
+          "mime": "",
+          "name": "test 3",
+        },
+        {
+          "ext": "jpg",
+          "mime": "image/jpeg",
+          "name": "test 4",
+        },
+      ]
+    `);
+  });
 });

packages/core/upload/admin/src/hooks/useAssets.js

@@ -71,6 +71,31 @@ export const useAssets = ({ skipWhen = false, query = {} } = {}) => {
     enabled: !skipWhen,
     staleTime: 0,
     cacheTime: 0,
+    select(data) {
+      if (data?.results && Array.isArray(data.results)) {
+        return {
+          ...data,
+          results: data.results
+            /**
+             * Filter out assets that don't have a name.
+             * So we don't try to render them as assets
+             * and get errors.
+             */
+            .filter((asset) => asset.name)
+            .map((asset) => ({
+              ...asset,
+              /**
+               * Mime and ext cannot be null in the front-end because
+               * we expect them to be strings and use the `includes` method.
+               */
+              mime: asset.mime ?? '',
+              ext: asset.ext ?? '',
+            })),
+        };
+      }
+
+      return data;
+    },
   });
 
   return { data, error, isLoading };