diff --git a/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js b/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js new file mode 100644 index 0000000000..4084832ff9 --- /dev/null +++ b/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js @@ -0,0 +1,414 @@ +import React from 'react'; +import { ThemeProvider, lightTheme } from '@strapi/parts'; +import { render as renderTL } from '@testing-library/react'; +import { ImageAssetCard } from '../ImageAssetCard'; +import en from '../../../translations/en.json'; + +jest.mock('../../../utils', () => ({ + ...jest.requireActual('../../../utils'), + getTrad: x => x, +})); + +jest.mock('react-intl', () => ({ + useIntl: () => ({ formatMessage: jest.fn(({ id }) => en[id]) }), +})); + +describe('ImageAssetCard', () => { + it('snapshots the component', () => { + const { container } = renderTL( + + + + ); + + expect(container).toMatchInlineSnapshot(` + .c21 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + + .c0 { + background: #ffffff; + border-radius: 4px; + box-shadow: 0px 1px 4px rgba(33,33,52,0.1); + } + + .c10 { + padding-top: 8px; + padding-right: 12px; + padding-bottom: 8px; + padding-left: 12px; + } + + .c15 { + background: #f6f6f9; + color: #666687; + padding: 4px; + border-radius: 4px; + } + + .c3 { + position: absolute; + top: 12px; + left: 12px; + } + + .c5 { + position: absolute; + top: 12px; + right: 12px; + } + + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c11 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c9 { + margin: 0; + padding: 0; + max-height: 100%; + max-width: 100%; + } + + .c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 10.25rem; + width: 100%; + background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px; + } + + .c12 { + font-weight: 500; + font-size: 0.75rem; + line-height: 1.33; + color: #32324d; + } + + .c13 { + font-weight: 400; + font-size: 0.75rem; + line-height: 1.33; + color: #666687; + } + + .c18 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; + } + + .c19 { + font-weight: 600; + line-height: 1.14; + } + + .c20 { + font-weight: 600; + font-size: 0.6875rem; + line-height: 1.45; + text-transform: uppercase; + } + + .c16 { + display: inline-block; + } + + .c17 { + margin-left: auto; + } + + .c4 { + margin: 0; + height: 18px; + min-width: 18px; + border-radius: 4px; + border: 1px solid #c0c0cf; + -webkit-appearance: none; + background-color: #ffffff; + } + + .c4:checked { + background-color: #4945ff; + border: 1px solid #4945ff; + } + + .c4:checked:after { + content: ''; + display: block; + position: relative; + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSJ3aGl0ZSIKICAvPgo8L3N2Zz4=) no-repeat no-repeat center center; + width: 10px; + height: 10px; + left: 50%; + top: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + } + + .c4:checked:disabled:after { + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center; + } + + .c4:disabled { + background-color: #dcdce4; + border: 1px solid #c0c0cf; + } + + .c4:indeterminate { + background-color: #4945ff; + border: 1px solid #4945ff; + } + + .c4:indeterminate:after { + content: ''; + display: block; + position: relative; + color: white; + height: 2px; + width: 10px; + background-color: #ffffff; + left: 50%; + top: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + } + + .c4:indeterminate:disabled { + background-color: #dcdce4; + border: 1px solid #c0c0cf; + } + + .c4:indeterminate:disabled:after { + background-color: #8e8ea9; + } + + .c2 { + position: relative; + border-bottom: 1px solid #eaeaef; + } + + .c6 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + } + + .c6 svg { + height: 12px; + width: 12px; + } + + .c6 svg > g, + .c6 svg path { + fill: #ffffff; + } + + .c6[aria-disabled='true'] { + pointer-events: none; + } + + .c7 svg > g, + .c7 svg path { + fill: #8e8ea9; + } + + .c7:hover svg > g, + .c7:hover svg path { + fill: #666687; + } + + .c7:active svg > g, + .c7:active svg path { + fill: #a5a5ba; + } + + .c7[aria-disabled='true'] { + background-color: #eaeaef; + } + + .c7[aria-disabled='true'] svg path { + fill: #666687; + } + + .c14 { + text-transform: uppercase; + } + +
+
+
+
+ +
+
+ + + +
+
+ +
+
+
+
+
+

+ hello.png +

+
+ + png + + - 40✕40 +
+
+
+ + Image + +
+
+
+
+
+

+

+

+
+ `); + }); +}); diff --git a/packages/core/upload/admin/src/components/AssetCard/tests/UnknownAssetCard.test.js b/packages/core/upload/admin/src/components/AssetCard/tests/UnknownAssetCard.test.js new file mode 100644 index 0000000000..3e081de19c --- /dev/null +++ b/packages/core/upload/admin/src/components/AssetCard/tests/UnknownAssetCard.test.js @@ -0,0 +1,444 @@ +import React from 'react'; +import { ThemeProvider, lightTheme } from '@strapi/parts'; +import { render as renderTL } from '@testing-library/react'; +import { UnknownAssetCard } from '../UnknownAssetCard'; +import en from '../../../translations/en.json'; + +jest.mock('../../../utils', () => ({ + ...jest.requireActual('../../../utils'), + getTrad: x => x, +})); + +jest.mock('react-intl', () => ({ + useIntl: () => ({ formatMessage: jest.fn(({ id }) => en[id]) }), +})); + +describe('UnknownAssetCard', () => { + it('snapshots the component', () => { + const { container } = renderTL( + + + + ); + + expect(container).toMatchInlineSnapshot(` + .c15 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + + .c0 { + background: #ffffff; + border-radius: 4px; + box-shadow: 0px 1px 4px rgba(33,33,52,0.1); + } + + .c11 { + padding-top: 8px; + padding-right: 12px; + padding-bottom: 8px; + padding-left: 12px; + } + + .c3 { + position: absolute; + top: 12px; + left: 12px; + } + + .c5 { + position: absolute; + top: 12px; + right: 12px; + } + + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c9 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 10.25rem; + width: 100%; + background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px; + } + + .c12 { + font-weight: 500; + font-size: 0.75rem; + line-height: 1.33; + color: #32324d; + } + + .c13 { + font-weight: 400; + font-size: 0.75rem; + line-height: 1.33; + color: #666687; + } + + .c4 { + margin: 0; + height: 18px; + min-width: 18px; + border-radius: 4px; + border: 1px solid #c0c0cf; + -webkit-appearance: none; + background-color: #ffffff; + } + + .c4:checked { + background-color: #4945ff; + border: 1px solid #4945ff; + } + + .c4:checked:after { + content: ''; + display: block; + position: relative; + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSJ3aGl0ZSIKICAvPgo8L3N2Zz4=) no-repeat no-repeat center center; + width: 10px; + height: 10px; + left: 50%; + top: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + } + + .c4:checked:disabled:after { + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center; + } + + .c4:disabled { + background-color: #dcdce4; + border: 1px solid #c0c0cf; + } + + .c4:indeterminate { + background-color: #4945ff; + border: 1px solid #4945ff; + } + + .c4:indeterminate:after { + content: ''; + display: block; + position: relative; + color: white; + height: 2px; + width: 10px; + background-color: #ffffff; + left: 50%; + top: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + } + + .c4:indeterminate:disabled { + background-color: #dcdce4; + border: 1px solid #c0c0cf; + } + + .c4:indeterminate:disabled:after { + background-color: #8e8ea9; + } + + .c2 { + position: relative; + border-bottom: 1px solid #eaeaef; + } + + .c6 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + } + + .c6 svg { + height: 12px; + width: 12px; + } + + .c6 svg > g, + .c6 svg path { + fill: #ffffff; + } + + .c6[aria-disabled='true'] { + pointer-events: none; + } + + .c7 svg > g, + .c7 svg path { + fill: #8e8ea9; + } + + .c7:hover svg > g, + .c7:hover svg path { + fill: #666687; + } + + .c7:active svg > g, + .c7:active svg path { + fill: #a5a5ba; + } + + .c7[aria-disabled='true'] { + background-color: #eaeaef; + } + + .c7[aria-disabled='true'] svg path { + fill: #666687; + } + + .c14 { + text-transform: uppercase; + } + + .c10 svg { + font-size: 3rem; + } + +
+
+
+
+ +
+
+ + + +
+
+
+ + + + + + + + + + + + + + + + +
+
+
+
+
+
+

+ hello.png +

+
+ + png + +
+
+
+
+
+
+

+

+

+
+ `); + }); +}); diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/FromUrlForm.js b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/FromUrlForm.js index 3136eb1f3e..b10672e636 100644 --- a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/FromUrlForm.js +++ b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/FromUrlForm.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { Box } from '@strapi/parts/Box'; import { ModalFooter } from '@strapi/parts/ModalLayout'; @@ -11,12 +11,15 @@ import { getTrad, urlSchema } from '../../../utils'; import { urlsToAssets } from '../../../utils/urlsToAssets'; export const FromUrlForm = ({ onClose, onAddAsset }) => { + const [loading, setLoading] = useState(false); const { formatMessage } = useIntl(); const handleSubmit = async ({ urls }) => { + setLoading(true); const urlArray = urls.split(/\r?\n/); const assets = await urlsToAssets(urlArray); + // no need to set the loading to false since the component unmounts onAddAsset(assets); }; @@ -53,7 +56,7 @@ export const FromUrlForm = ({ onClose, onAddAsset }) => { + } diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromUrlForm.test.js b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromUrlForm.test.js index 28f17fc4b4..3786165af2 100644 --- a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromUrlForm.test.js +++ b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromUrlForm.test.js @@ -3,7 +3,7 @@ import { ThemeProvider, lightTheme } from '@strapi/parts'; import { render as renderTL, screen, fireEvent, waitFor } from '@testing-library/react'; import { FromUrlForm } from '../FromUrlForm'; import en from '../../../../translations/en.json'; -import { mockAssets } from './server'; +import { server } from './server'; jest.mock('../../../../utils', () => ({ ...jest.requireActual('../../../../utils'), @@ -15,7 +15,9 @@ jest.mock('react-intl', () => ({ })); describe('FromUrlForm', () => { - beforeAll(mockAssets); + beforeAll(() => server.listen()); + afterEach(() => server.resetHandlers()); + afterAll(() => server.close()); it('snapshots the component with 4 URLs: 3 valid and one in failure', async () => { const onAddAssetSpy = jest.fn(); @@ -60,9 +62,9 @@ describe('FromUrlForm', () => { }, { ext: 'lutin', - mime: undefined, + mime: 'application/json', source: 'url', - type: 'unknown', + type: 'doc', url: 'http://localhost:5000/not-working-like-cors.lutin', }, ]; diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/server.js b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/server.js index cc076db0ac..93c33717c0 100644 --- a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/server.js +++ b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/server.js @@ -1,26 +1,40 @@ // mocking window.fetch since msw is not able to give back the res.url param -export const mockAssets = () => { - window.fetch = url => { - if (url === 'http://localhost:5000/an-image.png') { - const headers = { get: () => 'image/png' }; +import { rest } from 'msw'; +import { setupServer } from 'msw/node'; - return Promise.resolve({ url: 'http://localhost:5000/an-image.png', headers }); - } +export const server = setupServer( + rest.get('*/an-image.png', (req, res, ctx) => + res(ctx.set('Content-Type', 'image/png'), ctx.body()) + ), + rest.get('*/a-pdf.pdf', (req, res, ctx) => + res(ctx.set('Content-Type', 'application/pdf'), ctx.body()) + ), + rest.get('*/a-video.mp4', (req, res, ctx) => + res(ctx.set('Content-Type', 'video/mp4'), ctx.body()) + ), + rest.get('*/not-working-like-cors.lutin', (req, res, ctx) => res(ctx.json({}))) +); - if (url === 'http://localhost:5000/a-pdf.pdf') { - const headers = { get: () => 'application/pdf' }; +// export const mockAssets = url => { +// if (url === 'http://localhost:5000/an-image.png') { +// const headers = { get: () => 'image/png' }; - return Promise.resolve({ url: 'http://localhost:5000/a-pdf.pdf', headers }); - } +// return Promise.resolve({ url: 'http://localhost:5000/an-image.png', headers }); +// } - if (url === 'http://localhost:5000/a-video.mp4') { - const headers = { get: () => 'video/mp4' }; +// if (url === 'http://localhost:5000/a-pdf.pdf') { +// const headers = { get: () => 'application/pdf' }; - return Promise.resolve({ url: 'http://localhost:5000/a-video.mp4', headers }); - } +// return Promise.resolve({ url: 'http://localhost:5000/a-pdf.pdf', headers }); +// } - // eslint-disable-next-line prefer-promise-reject-errors - return Promise.reject('http://localhost:5000/not-working-like-cors.lutin'); - }; -}; +// if (url === 'http://localhost:5000/a-video.mp4') { +// const headers = { get: () => 'video/mp4' }; + +// return Promise.resolve({ url: 'http://localhost:5000/a-video.mp4', headers }); +// } + +// // eslint-disable-next-line prefer-promise-reject-errors +// return Promise.reject('http://localhost:5000/not-working-like-cors.lutin'); +// }; diff --git a/packages/core/upload/admin/src/utils/urlsToAssets.js b/packages/core/upload/admin/src/utils/urlsToAssets.js index 979be5f854..651c5aa35e 100644 --- a/packages/core/upload/admin/src/utils/urlsToAssets.js +++ b/packages/core/upload/admin/src/utils/urlsToAssets.js @@ -1,12 +1,16 @@ +import axios from 'axios'; import { AssetType, AssetSource } from '../constants'; export const urlsToAssets = async urls => { const assetPromises = urls.map(url => - fetch(url) - .then(res => ({ url: res.url, mime: res.headers.get('Content-Type') })) - .catch(() => { - throw url; + axios + .get(url, { + responseType: 'blob', }) + .then(res => ({ + url: res.config.url, + mime: res.headers['content-type'], + })) ); // Retrieve the assets metadata const assetsResults = await Promise.allSettled(assetPromises);