Basic track upload styling

src/RunnersMeet.Client/src/app/tracks/track-create/track-create.component.html

@@ -1,8 +1,14 @@
-<form #uploadForm="ngForm" (ngSubmit)="uploadFile($event, uploadForm)">
-	<div>
-		<input type="file" name="trackFile" ngModel />
-	</div>
-	<div>
-		<button type="submit">Upload</button>
-	</div>
+<h1>Upload a GPX File to create a new Track</h1>
+<form class="" #uploadForm="ngForm" (ngSubmit)="uploadFile(uploadForm)">
+	<p>
+		<input #uploadField class="hidden" type="file" name="trackFile" (change)="fileSelectionChange($event)" />
+		<button (click)="uploadField.click()" mat-raised-button><mat-icon aria-hidden="false" aria-label="Attach" fontIcon="attach_file"></mat-icon> Choose GPX File</button>
+	</p>
+	<p>
+		<mat-form-field appearance="fill">
+			<mat-label>File Name</mat-label>
+			<input type="text" disabled [value]="fileName" matInput>
+		</mat-form-field>
+	</p>
+	<button type="submit" mat-raised-button color="primary" [disabled]="!file">Upload</button>
 </form>

src/RunnersMeet.Client/src/app/tracks/track-create/track-create.component.ts

@@ -9,22 +9,29 @@ import { TracksApiService } from 'src/app/tracks-api.service';
   styleUrls: ['./track-create.component.scss']
 })
 export class TrackCreateComponent {
+	public fileName: string = '';
+	public file: File | undefined;
+
 	public constructor(
 		private readonly tracksApi: TracksApiService,
 		private readonly router: Router
 	) { }
 
-	public uploadFile(event: SubmitEvent, form: NgForm): void {
-
-		const file: File | undefined = ((event.target as HTMLFormElement).elements.namedItem('trackFile') as HTMLInputElement).files?.[0];
+	public fileSelectionChange(event: Event): void {
+		this.file = (event.target as HTMLInputElement).files?.[0];
+		this.fileName = this.file?.name ?? '';
+	}
 
-		if (file) {
+	public uploadFile(form: NgForm): void {
+		if (this.file) {
 			const formData = new FormData();
-			formData.append("file", file);
+			formData.append("file", this.file);
 
 			this.tracksApi.createTrack(formData).then(track =>
 			{
 				form.resetForm();
+				this.file = undefined;
+				this.fileName = '';
 				this.router.navigateByUrl(`tracks/edit/${track.trackId}`, );
 			});
 		}

src/RunnersMeet.Client/src/styles.scss

@@ -3,6 +3,10 @@
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 
+.hidden {
+	display: none;
+}
+
 .main-content {
 	padding: 1em;
 }