Simple track creation page with form

src/RunnersMeet.Client/src/app/app-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard } from '@auth0/auth0-angular';
+import { CreateTrackPageComponent } from './pages/create-track-page/create-track-page.component';
 import { HomePageComponent } from './pages/home-page/home-page.component';
 import { TracksPageComponent } from './pages/tracks-page/tracks-page.component';
 
@@ -14,6 +15,11 @@ const routes: Routes = [
 		component: TracksPageComponent,
 		canActivate: [AuthGuard],
 	},
+	{
+		path: 'tracks/create',
+		component: CreateTrackPageComponent,
+		canActivate: [AuthGuard],
+	},
 ];
 
 @NgModule({

src/RunnersMeet.Client/src/app/app.component.html

@@ -1,2 +1,6 @@
 <h1>{{title}}</h1>
+<ul>
+	<li><a [routerLink]="['/tracks']">Tracks</a></li>
+	<li><a [routerLink]="['/tracks/create']">Create Track</a></li>
+</ul>
 <router-outlet></router-outlet>

src/RunnersMeet.Client/src/app/app.module.ts

@@ -9,12 +9,15 @@ import { HomePageComponent } from './pages/home-page/home-page.component';
 import { TracksPageComponent } from './pages/tracks-page/tracks-page.component';
 import { TracksApiService } from './tracks-api.service';
 import { HttpClientModule } from '@angular/common/http';
+import { CreateTrackPageComponent } from './pages/create-track-page/create-track-page.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
 	declarations: [
 		AppComponent,
 		HomePageComponent,
 		TracksPageComponent,
+  CreateTrackPageComponent,
 	],
 	imports: [
 		BrowserModule,
@@ -25,7 +28,8 @@ import { HttpClientModule } from '@angular/common/http';
 			httpInterceptor: {
 				...environment.httpInterceptor,
 			},
-		})
+		}),
+		FormsModule
 	],
 	providers: [
 		TracksApiService

src/RunnersMeet.Client/src/app/pages/create-track-page/create-track-page.component.html

@@ -0,0 +1,11 @@
+<form #uploadForm="ngForm" (ngSubmit)="uploadFile($event, uploadForm)">
+	<div>
+	  <input type="file" name="trackFile" (change)="onFileChange($event)" ngModel />
+	</div>
+	<div>
+	  <input type="text" name="fileName" [(ngModel)]="fileName" />
+	</div>
+	<div>
+	  <button type="submit">Upload</button>
+	</div>
+  </form>

src/RunnersMeet.Client/src/app/pages/create-track-page/create-track-page.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateTrackPageComponent } from './create-track-page.component';
+
+describe('CreateTrackPageComponent', () => {
+	let component: CreateTrackPageComponent;
+	let fixture: ComponentFixture<CreateTrackPageComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			declarations: [CreateTrackPageComponent]
+		})
+			.compileComponents();
+
+		fixture = TestBed.createComponent(CreateTrackPageComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/RunnersMeet.Client/src/app/pages/create-track-page/create-track-page.component.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { TracksApiService } from 'src/app/tracks-api.service';
+
+@Component({
+	selector: 'app-create-track-page',
+	templateUrl: './create-track-page.component.html',
+	styleUrls: ['./create-track-page.component.scss']
+})
+export class CreateTrackPageComponent {
+	public fileName: string = '';
+
+	public constructor(
+		private readonly tracksApi: TracksApiService
+	) { }
+
+	public onFileChange(event: Event): void {
+		const element = event.currentTarget as HTMLInputElement;
+		let fileList: FileList | null = element.files;
+		if (fileList) {
+			this.fileName = fileList.item(0)?.name || '';
+			const extIndex = this.fileName.lastIndexOf('.');
+			if (extIndex > 0) {
+				this.fileName = this.fileName.substring(0, extIndex);
+			}
+		}
+	}
+
+	public uploadFile(event: SubmitEvent, form: NgForm): void {
+
+		const file: File | undefined = ((event.target as HTMLFormElement).elements.namedItem('trackFile') as HTMLInputElement).files?.[0];
+
+		if (file) {
+			const formData = new FormData();
+			formData.append("file", file);
+			formData.append("name", form.value.fileName);
+
+			this.tracksApi.createTrack(formData).then(track => console.log('created track', track));
+		}
+	}
+}

src/RunnersMeet.Client/src/app/pages/home-page/home-page.component.html

@@ -17,6 +17,3 @@
 	Not authenticated
 	<button type="button" (click)="login()">Login</button>
 </div>
-<ul>
-	<li><a [routerLink]="['/tracks']">Tracks</a></li>
-</ul>

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

@@ -15,4 +15,8 @@ export class TracksApiService {
 	public getTracks(): Promise<object[]> {
 		return lastValueFrom(this.http.get<object[]>(`${environment.apiUri}/api/tracks`));
 	}
+
+	public createTrack(formData: FormData): Promise<unknown> {
+		return lastValueFrom(this.http.post(`${environment.apiUri}/api/tracks`, formData));
+	}
 }