diff --git a/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx index ef2f4e5a..fb985d78 100644 --- a/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx +++ b/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx @@ -1,7 +1,7 @@ import { NodeViewWrapper } from '@tiptap/react' import React, { useEffect } from 'react' import { Resizable } from 're-resizable' -import { AlertTriangle, Image } from 'lucide-react' +import { AlertTriangle, Image, Download } from 'lucide-react' import { uploadNewImageFile } from '../../../../../services/blocks/Image/images' import { getActivityBlockMediaDirectory } from '@services/media/media' import { useOrg } from '@components/Contexts/OrgContext' @@ -52,6 +52,29 @@ function ImageBlockComponent(props: any) { }) } + const handleDownload = () => { + if (!fileId) return; + + const imageUrl = getActivityBlockMediaDirectory( + org?.org_uuid, + course?.courseStructure.course_uuid, + props.extension.options.activity.activity_uuid, + blockObject.block_uuid, + fileId, + 'imageBlock' + ); + + const link = document.createElement('a'); + link.href = imageUrl || ''; + link.download = `image-${blockObject?.block_uuid || 'download'}.${blockObject?.content.file_format || 'jpg'}`; + link.setAttribute('download', ''); + link.setAttribute('target', '_blank'); + link.setAttribute('rel', 'noopener noreferrer'); + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }; + useEffect(() => {}, [course, org]) return ( @@ -119,19 +142,28 @@ function ImageBlockComponent(props: any) { {blockObject && !isEditable && (
- +
+ + +
)} diff --git a/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx index 23a8d025..3988699b 100644 --- a/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx +++ b/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx @@ -1,7 +1,7 @@ import { NodeViewWrapper } from '@tiptap/react' import React, { useEffect } from 'react' import styled from 'styled-components' -import { AlertTriangle, FileText } from 'lucide-react' +import { AlertTriangle, FileText, Download } from 'lucide-react' import { uploadNewPDFFile } from '../../../../../services/blocks/Pdf/pdf' import { getActivityBlockMediaDirectory } from '@services/media/media' import { useOrg } from '@components/Contexts/OrgContext' @@ -47,6 +47,29 @@ function PDFBlockComponent(props: any) { }) } + const handleDownload = () => { + if (!fileId) return; + + const pdfUrl = getActivityBlockMediaDirectory( + org?.org_uuid, + course?.courseStructure.course_uuid, + props.extension.options.activity.activity_uuid, + blockObject.block_uuid, + fileId, + 'pdfBlock' + ); + + const link = document.createElement('a'); + link.href = pdfUrl || ''; + link.download = `document-${blockObject?.block_uuid || 'download'}.${blockObject?.content.file_format || 'pdf'}`; + link.setAttribute('download', ''); + link.setAttribute('target', '_blank'); + link.setAttribute('rel', 'noopener noreferrer'); + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }; + useEffect(() => { }, [course, org]) return ( @@ -58,17 +81,28 @@ function PDFBlockComponent(props: any) { {blockObject && ( -