diff --git a/src/common/downloadFileDialog.component.tsx b/src/common/downloadFileDialog.component.tsx index 1ea538e4f..b7341ab5a 100644 --- a/src/common/downloadFileDialog.component.tsx +++ b/src/common/downloadFileDialog.component.tsx @@ -18,13 +18,15 @@ export interface BaseDownloadFileProps { open: boolean; onClose: () => void; fileType: 'Image' | 'Attachment'; + fileInterface: APIImageWithURL; } export interface ImageDownloadDialogProps extends BaseDownloadFileProps { fileType: 'Image'; - selectedImages?: APIImage[]; + fileInterface: APIImageWithURL; + selectedFiles?: APIImage[]; useGetFileIds: (ids: string[]) => UseQueryResult[]; - onChangeSelectedImages: (selectedImages: MRT_RowSelectionState) => void; + onChangeselectedFiles: (selectedFiles: MRT_RowSelectionState) => void; } export type DownloadFileProps = ImageDownloadDialogProps; @@ -34,12 +36,13 @@ const DownloadFileDialog = (props: DownloadFileProps) => { open, onClose, fileType, - selectedImages, + selectedFiles, useGetFileIds, - onChangeSelectedImages, + onChangeselectedFiles, + fileInterface, } = props; - const count = selectedImages ? selectedImages.length : 0; + const count = selectedFiles ? selectedFiles.length : 0; const [formError, setFormError] = React.useState( undefined @@ -47,42 +50,43 @@ const DownloadFileDialog = (props: DownloadFileProps) => { let isLoading = false; - const selectedImagesIds = selectedImages?.map((image) => image.id); + const selectedFilesIds = selectedFiles?.map((file) => file.id); const handleClose = React.useCallback(() => { setFormError(undefined); onClose(); }, [onClose]); - const downloadedImages: (APIImageWithURL | undefined)[] = useGetFileIds( - selectedImagesIds ?? [''] + const downloadedFiles: (typeof fileInterface | undefined)[] = useGetFileIds( + selectedFilesIds ?? [''] ).map((query) => { isLoading = isLoading || query.isLoading; return query.data; }); - const handleDownloadImages = React.useCallback(() => { - if (downloadedImages && downloadedImages.length >= 1) { - downloadedImages.forEach(async (image: APIImageWithURL | undefined) => { - if (image) { - const response = await fetch(image.url); + const handleDownloadFiles = React.useCallback(() => { + if (downloadedFiles && downloadedFiles.length >= 1) { + downloadedFiles.forEach(async (file: APIImageWithURL | undefined) => { + if (file) { + const response = await fetch(file.url); const blob = await response.blob(); - const link = document.createElement('a'); + link.href = URL.createObjectURL(blob); - link.download = image.file_name; + link.download = file.file_name; + document.body.appendChild(link); link.click(); URL.revokeObjectURL(link.href); document.body.removeChild(link); } }); - onChangeSelectedImages({}); + onChangeselectedFiles({}); onClose(); } else { setFormError('No data provided. Please refresh and try again'); } - }, [downloadedImages, onChangeSelectedImages, onClose]); + }, [downloadedFiles, onChangeselectedFiles, onClose]); return ( @@ -94,7 +98,7 @@ const DownloadFileDialog = (props: DownloadFileProps) => { Are you sure you want to download{' '} - {selectedImages?.length + ' '} + {selectedFiles?.length + ' '} {fileType} {count > 1 ? 's' : ''}? @@ -102,7 +106,7 @@ const DownloadFileDialog = (props: DownloadFileProps) => {