fix download functionality with blob #1076

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<APIImageWithURL>[];
-  onChangeSelectedImages: (selectedImages: MRT_RowSelectionState) => void;
+  onChangeselectedFiles: (selectedFiles: MRT_RowSelectionState) => void;
 }
 
 export type DownloadFileProps = ImageDownloadDialogProps;
@@ -34,55 +36,57 @@ 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<string | undefined>(
     undefined
   );
 
   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 (
     <Dialog open={open} maxWidth="lg">
@@ -94,15 +98,15 @@ const DownloadFileDialog = (props: DownloadFileProps) => {
       <DialogContent>
         Are you sure you want to download{' '}
         <strong data-testid="delete-usage-status-value">
-          {selectedImages?.length + ' '}
+          {selectedFiles?.length + ' '}
         </strong>
         {fileType}
         {count > 1 ? 's' : ''}?
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose}>Cancel</Button>
         <Button
-          onClick={handleDownloadImages}
+          onClick={handleDownloadFiles}
           disabled={isLoading || formError != undefined}
           endIcon={isLoading ? <CircularProgress size={20} /> : null}
         >