Skip to content

Update download urls to directly download the file #256

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
frozenhelium wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update download urls to directly download the file #256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions src/components/Link/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ interface Props extends Omit<NextLinkProps, 'locale'> {
target?: string;
variant?: Variant;
title?: React.ReactNode;
download?: boolean;
}

// NOTE: this does not support relative links
Expand All @@ -34,6 +35,7 @@ function Link(props: Props) {
variant = 'transparent',
className,
title,
download = false,
...rest
} = props;

Expand All @@ -56,6 +58,23 @@ function Link(props: Props) {
}
}

let { target, rel } = rest;
if (download) {
// NOTE: the server is configured to set the Content-Disposition
// header for media files when treat_as_download is set, which
// makes the browser download the file instead of opening it.
// NOTE: media URLs do not have query params so we can safely
// append the query param with `?`
if (typeof href === 'string') {
href = `${href}?treat_as_download=true`;
}
// NOTE: fallback for when the server does not handle
// treat_as_download: open the file in a new tab instead of
// navigating away from the page
target = target ?? '_blank';
rel = rel ?? 'noopener noreferrer';
}

return (
<NextLink
className={_cs(
Expand All @@ -65,6 +84,8 @@ function Link(props: Props) {
)}
// eslint-disable-next-line
{...rest}
target={target}
rel={rel}
title={title ? String(title) : undefined}
href={href}
>
Expand Down
1 change: 1 addition & 0 deletions src/pages/[locale]/data/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -979,6 +979,7 @@ function Data(props: Props) {
href={asset.file.url}
variant="buttonTransparent"
className={styles.link}
download
>
<IoDownloadOutline />
{t('download')}
Expand Down
77 changes: 11 additions & 66 deletions src/pages/[locale]/projects/[id].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, {
useCallback,
useEffect,
useState,
useMemo,
Expand Down Expand Up @@ -27,7 +26,6 @@ import OgMeta from 'components/OgMeta';
import Page from 'components/Page';
import ProjectTypeIcon from 'components/ProjectTypeIcon';
import ImageWrapper from 'components/ImageWrapper';
import Button from 'components/Button';
import Hero from 'components/Hero';
import Tag from 'components/Tag';
import Card from 'components/Card';
Expand Down Expand Up @@ -151,7 +149,6 @@ function Project(props: Props) {
exportModerateToHighAgreementYesMaybeGeometries,
numberOfContributorUsers,
aoiGeometry,
firebaseId,
id: projectId,
} = props;

Expand Down Expand Up @@ -338,31 +335,6 @@ function Project(props: Props) {
transformAoiToGeoJson(aoiGeometry)
), [aoiGeometry]);

const aoiGeometryBlob = useMemo(() => {
if (!aoiGeometryFeature) {
return undefined;
}
const blob = new Blob(
[JSON.stringify(aoiGeometryFeature, null, 2)],
{ type: 'application/geo+json' },
);
return blob;
}, [aoiGeometryFeature]);

const onAoiDownloadClick = useCallback(() => {
if (!aoiGeometryBlob) {
return;
}
const url = URL.createObjectURL(aoiGeometryBlob);

const a = document.createElement('a');
a.href = url;
a.download = `area_of_interest_${firebaseId}.geojson`;
a.click();

URL.revokeObjectURL(url);
}, [aoiGeometryBlob, firebaseId]);

return (
<Page contentClassName={_cs(styles.project, className)}>
<OgMeta
Expand Down Expand Up @@ -632,6 +604,7 @@ function Project(props: Props) {
href={exportAggregatedResults?.file?.url}
variant="buttonTransparent"
className={styles.link}
download
>
<IoDownloadOutline />
{t('download')}
Expand Down Expand Up @@ -662,6 +635,7 @@ function Project(props: Props) {
href={exportAggregatedResultsWithGeometry?.file?.url}
variant="buttonTransparent"
className={styles.link}
download
>
<IoDownloadOutline />
{t('download')}
Expand Down Expand Up @@ -690,6 +664,7 @@ function Project(props: Props) {
href={exportGroups?.file.url}
variant="buttonTransparent"
className={styles.link}
download
>
<IoDownloadOutline />
{t('download')}
Expand Down Expand Up @@ -718,6 +693,7 @@ function Project(props: Props) {
href={exportHistory?.file.url}
variant="buttonTransparent"
className={styles.link}
download
>
<IoDownloadOutline />
{t('download')}
Expand Down Expand Up @@ -746,6 +722,7 @@ function Project(props: Props) {
href={exportResults?.file.url}
variant="buttonTransparent"
className={styles.link}
download
>
<IoDownloadOutline />
{t('download')}
Expand Down Expand Up @@ -774,6 +751,7 @@ function Project(props: Props) {
href={exportTasks?.file.url}
variant="buttonTransparent"
className={styles.link}
download
>
<IoDownloadOutline />
{t('download')}
Expand Down Expand Up @@ -802,50 +780,14 @@ function Project(props: Props) {
href={exportUsers?.file.url}
variant="buttonTransparent"
className={styles.link}
download
>
<IoDownloadOutline />
{t('download')}
</Link>
</Card>
)}
{aoiGeometry && (
<Card
childrenContainerClassName={styles.downloadCard}
heading={t('area-of-interest-title')}
description={t('area-of-interest-description')}
>
<div className={styles.fileDetails}>
<Tag>GEOJSON</Tag>
<div>
{t('download-size', {
size: getFileSizeProperties(
aoiGeometryBlob?.size ?? 0,
).size,
formatParams: {
size: {
style: 'unit',
unit: getFileSizeProperties(
aoiGeometryBlob?.size ?? 0,
).unit,
maximumFractionDigits: 1,
},
},
})}
</div>
</div>
<Button
variant="border"
className={styles.link}
onClick={onAoiDownloadClick}
>
<IoDownloadOutline />
{t('download')}
</Button>
</Card>
)}
{/* NOTE: If in case there is no aoiGeometry,
we show exportAreaOfInterest if present */}
{!aoiGeometry && exportAreaOfInterest && (
{exportAreaOfInterest && (
<Card
childrenContainerClassName={styles.downloadCard}
key={exportAreaOfInterest?.id}
Expand All @@ -869,6 +811,7 @@ function Project(props: Props) {
href={exportAreaOfInterest?.file.url}
variant="buttonTransparent"
className={styles.link}
download
>
<IoDownloadOutline />
{t('download')}
Expand Down Expand Up @@ -899,6 +842,7 @@ function Project(props: Props) {
href={exportHotTaskingManagerGeometries?.file.url}
variant="buttonTransparent"
className={styles.link}
download
>
<IoDownloadOutline />
{t('download')}
Expand Down Expand Up @@ -929,6 +873,7 @@ function Project(props: Props) {
href={exportModerateToHighAgreementYesMaybeGeometries?.file.url}
variant="buttonTransparent"
className={styles.link}
download
>
<IoDownloadOutline />
{t('download')}
Expand Down
Loading