refactor: add download file method

src/components/ActionBar/ActionBar.tsx

@@ -8,7 +8,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 
 import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/version/Version';
 import { Fab, ActionListItem } from './styles';
-import { isURL } from '../../utils/url';
+import { isURL, extractFileName, downloadFile } from '../../utils/url';
 import api from '../../utils/api';
 
 export interface Action {
@@ -18,12 +18,14 @@ export interface Action {
 }
 
 async function downloadHandler(link: string): Promise<void> {
-  await api.request(link, 'GET', {
+  const fileStream: Blob = await api.request(link, 'GET', {
     headers: {
       ['accept']: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3',
     },
     credentials: 'include',
   });
+  const fileName = extractFileName(link);
+  downloadFile(fileStream, fileName);
 }
 
 const ACTIONS = {

src/utils/url.ts

@@ -18,3 +18,20 @@ export function getRegistryURL(): string {
   // Don't add slash if it's not a sub directory
   return `${location.origin}${location.pathname === '/' ? '' : location.pathname}`;
 }
+
+export function extractFileName(url: string): string {
+  return url.substring(url.lastIndexOf('/') + 1);
+}
+
+export function downloadFile(fileStream: Blob, fileName: string): void {
+  const file = new File([fileStream], fileName, { type: 'application/octet-stream', lastModified: Date.now() });
+  const objectURL = URL.createObjectURL(file);
+  const fileLink = document.createElement('a');
+  fileLink.href = objectURL;
+  fileLink.download = fileName;
+  fileLink.click();
+  // firefox requires remove the object url
+  setTimeout(() => {
+    URL.revokeObjectURL(objectURL);
+  }, 150);
+}