Implement downloading of attachments

src/constants/request.ts

@@ -78,7 +78,8 @@ export const URLs = {
     attachments: {
       get: '/attachments',
       patch: '/attachments',
-      delete: '/attachments'
+      delete: '/attachments',
+      download: '/attachments'
     },
     questions: {
       get: '/questions',

src/containers/course-section/resource-item/ResourceItem.tsx

@@ -23,8 +23,9 @@ import {
   selectionFields
 } from '~/containers/course-section/resource-item/ResourceItem.constants'
 import { styles } from '~/containers/course-section/resource-item/ResourceItem.styles'
-
+import { ResourceService } from '~/services/resource-service'
 import {
+  Attachment,
   CourseResource,
   ResourceAvailability,
   ResourceAvailabilityStatusEnum,
@@ -208,7 +209,8 @@ const ResourceItem: FC<ResourceItemProps> = ({
     const type = resourceType ?? resource.resourceType
 
     if (type === ResourceType.Attachment) {
-      console.log('download the attachment / go to the attachment view')
+      const fileName = (resource as Attachment).fileName
+      void ResourceService.downloadAttachment(resource._id, fileName)
       return
     }
 

src/services/resource-service.ts

@@ -76,6 +76,22 @@ export const ResourceService = {
       headers: { 'Content-Type': 'multipart/form-data' }
     })
   },
+  downloadAttachment: async (id: string, fileName: string): Promise<void> => {
+    const response = await axiosClient.get(
+      createUrlPath(URLs.resources.attachments.download, id),
+      { responseType: 'blob' }
+    )
+
+    const url = window.URL.createObjectURL(new Blob([response.data]))
+    const link = document.createElement('a')
+    link.href = url
+    link.setAttribute('download', fileName)
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+
+    setTimeout(() => window.URL.revokeObjectURL(url), 100)
+  },
   getQuestions: (
     params?: GetResourcesParams
   ): Promise<AxiosResponse<ItemsWithCount<Question>>> => {