Secure two-step download

src/RunnersMeet.Client/src/app/tracks-api.service.ts

@@ -32,4 +32,21 @@ export class TracksApiService {
 	public deleteTrack(track: Track): Promise<void> {
 		return lastValueFrom(this.http.delete(`${environment.apiUri}/api/tracks/${track.trackId}`)).then();
 	}
+
+	public downloadTrack(track: Track): Promise<{ blob: Blob | null, filename?: string }> {
+		return lastValueFrom(this.http.get(`${environment.apiUri}/api/tracks/download/${track.fileHash}`, {
+			responseType: 'blob',
+			observe: 'response'
+		})).then(response => {
+			let filename = undefined;
+			const match = response.headers.get('Content-Disposition')?.match(/filename\*=UTF-8'.*?'(.*?)(\s|$)/);
+			if (match) {
+				filename = decodeURIComponent(match[1]);
+			}
+			return {
+				blob: response.body,
+				filename: filename,
+			};
+		});
+	}
 }

src/RunnersMeet.Client/src/app/tracks/track-list-item/track-list-item.component.html

@@ -1,3 +1,5 @@
 {{ track?.trackId }} - {{ track?.displayName }} - {{ track?.fileHash }}<br />
 ↔{{ track?.distance }}m ↑{{ track?.elevationUp }}m ↓{{ track?.elevationDown }}m<br />
-<a [routerLink]="['/tracks/edit', track?.trackId]">Edit</a>
+<a [routerLink]="['/tracks/edit', track?.trackId]">Edit</a> &mdash;
+<button *ngIf="!downloadUrl" type="button" (click)="downloadGpx()">Download</button>
+<a *ngIf="downloadUrl" [href]="downloadUrl" [download]="downloadFileName">Download</a>

src/RunnersMeet.Client/src/app/tracks/track-list-item/track-list-item.component.ts

@@ -1,4 +1,6 @@
 import { Component, Input } from '@angular/core';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { TracksApiService } from 'src/app/tracks-api.service';
 import { Track } from '../track';
 
 @Component({
@@ -9,4 +11,21 @@ import { Track } from '../track';
 export class TrackListItemComponent {
 	@Input()
 	public track?: Track;
+
+	public downloadUrl: SafeUrl | null = null;
+	public downloadFileName?: string;
+
+	public constructor(
+		private readonly tracksApi: TracksApiService,
+		private readonly sanitizer: DomSanitizer
+	) { }
+
+	public downloadGpx(): void {
+		this.tracksApi.downloadTrack(this.track!).then(file => {
+			if (file.blob) {
+				this.downloadUrl = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(file.blob));
+				this.downloadFileName = file.filename
+			}
+		});
+	}
 }