diff --git a/packages/tupaia-web/src/features/Visuals/View/MultiPhotograph/MultiPhotographEnlarged.tsx b/packages/tupaia-web/src/features/Visuals/View/MultiPhotograph/MultiPhotographEnlarged.tsx index c6b973fd34..9c2c99dda8 100644 --- a/packages/tupaia-web/src/features/Visuals/View/MultiPhotograph/MultiPhotographEnlarged.tsx +++ b/packages/tupaia-web/src/features/Visuals/View/MultiPhotograph/MultiPhotographEnlarged.tsx @@ -15,6 +15,7 @@ import { URL_SEARCH_PARAMS } from '../../../../constants'; import { useDashboard } from '../../../Dashboard'; import { useDownloadImages } from './useDownloadImages'; import { ExportIconButton } from '../../../EnlargedDashboardItem'; +import { SmallAlert } from '@tupaia/ui-components'; const Wrapper = styled.div` position: relative; @@ -157,13 +158,11 @@ export const MultiPhotographEnlarged = ({ report, config }: MultiPhotographEnlar const { projectCode, entityCode } = useParams(); const { activeDashboard } = useDashboard(); - const { mutate: downloadImages, isLoading } = useDownloadImages( - projectCode, - entityCode, - activeDashboard?.code, - reportCode, - data, - ); + const { + mutate: downloadImages, + isLoading, + error, + } = useDownloadImages(projectCode, entityCode, activeDashboard?.code, reportCode, data); useEffect(() => { if (!sliderRef1.current || mainSlider) return; @@ -232,8 +231,10 @@ export const MultiPhotographEnlarged = ({ report, config }: MultiPhotographEnlar isLoading={isLoading} title="Export images" /> + + {error && {(error as Error).message}} { return Promise.all( - images?.map(photo => - fetch(photo.value, { + images?.map(photo => { + return fetch(photo.value, { method: 'GET', }).then(async response => { return { blob: await response.blob(), label: photo.label, }; - }), - ) ?? [], + }); + }) ?? [], ); }, { @@ -68,7 +68,7 @@ export const useDownloadImages = ( return blobsWithNames.push({ blob, name: label }); } // Default to Image 1, Image 2, etc. - blobsWithNames.push({ blob, name: `${reportCode}_image_${index + 1}` }); + blobsWithNames.push({ blob, name: `Image ${index + 1}` }); }); const zip = new JSZip();