Uploading Multiple Files In A Single "Form Post" With HttpClient In Angular 7.2.12

<cfscript>

	// CAUTION: Exercise caution when saving user-provided files to a publicly-accessible
	// location on a web-server - it could create a remote-code execution vulnerability.

	try {

		// --------------------------------------------------------------------------- //
		// --------------------------------------------------------------------------- //

		// When the Lucee server sees a "multipart/form-data" post, it automatically
		// parses the data and appends it to the FORM scope. For files, Lucee put's the
		// TEMP FILE PATH into the form-field.
		param name="form.name" type="string";
		param name="form.email" type="string";
		param name="form.memo" type="string";
		param name="form.resume" type="string" default="";
		param name="form.sample" type="string" default="";

		uploadDirectory = expandPath( "/uploads/upload-#createUuid()#/" );

		directoryCreate( uploadDirectory );

		// Save the user-submitted job-application data.
		fileWrite(
			file = ( uploadDirectory & "meta-data.json" ),
			data = serializeJson({
				name: form.name,
				email: form.email,
				memo: form.memo
			})
		);

		// When saving uploaded files in the form-post, the fileUpload() method will copy
		// the file-binary from the server's temp directory - ie, getTempDirectory() -
		// into the destination folder using the original clientFilename of the file.

		// If the user did NOT upload a file, the "resume" form-field will be empty.
		if ( len( form.resume ) ) {

			fileUpload(
				destination = uploadDirectory,
				fileField = "resume"
			);

		}

		// If the user did NOT upload a file, the "sample" form-field will be empty.
		if ( len( form.sample ) ) {

			fileUpload(
				destination = uploadDirectory,
				fileField = "sample"
			);

		}

		// --------------------------------------------------------------------------- //
		// --------------------------------------------------------------------------- //

		cfcontent(
			type = "text/plain",
			variable = charsetDecode( serializeJson( "OK" ), "utf-8" )
		);

	} catch ( any error ) {

		// For the sake of the demo, just serialize and return the error.
		// --
		// CAUTION: In a production app, you never want to return the raw error as this
		// will expose private information about your application and server.
		cfheader( statusCode = 500 );
		cfcontent(
			type = "application/json",
			variable = charsetDecode( serializeJson( error ), "utf-8" )
		);

	}

</cfscript>

// Import the core angular services.
import { Component } from "@angular/core";

// Import the application components and services.
import { JobApplicationService } from "./job-application.service";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

@Component({
	selector: "my-app",
	styleUrls: [ "./app.component.less" ],
	template:
	`
		<h2>
			Job Application
		</h2>

		<form (submit)="submitApplication()">

			<div class="field">
				<label class="field__label">
					Name:
				</label>
				<input type="text" name="name" [(ngModel)]="form.name" class="field__input" />
			</div>

			<div class="field">
				<label class="field__label">
					Email:
				</label>
				<input type="text" name="email" [(ngModel)]="form.email" class="field__input" />
			</div>

			<div class="field">
				<label class="field__label">
					Cover Letter:
				</label>
				<textarea name="memo" [(ngModel)]="form.memo" class="field__textarea"></textarea>
			</div>

			<div class="field">
				<label class="field__label">
					Resume:
				</label>
				<input
					#resumeRef
					type="file"
					name="resume"
					(change)="( form.resume = resumeRef.files )"
					class="field__input"
				/>
			</div>

			<div class="field">
				<label class="field__label">
					Code Sample:
				</label>
				<input
					#sampleRef
					type="file"
					name="sample"
					(change)="( form.sample = sampleRef.files )"
					class="field__input"
				/>
			</div>

			<div class="actions">
				<button type="submit" class="actions__primary">
					Submit Application
				</button>
			</div>

		</form>
	`
})
export class AppComponent {

	public form: {
		name: string;
		email: string;
		memo: string;
		resume: FileList | null;
		sample: FileList | null;
	};

	private jobApplicationService: JobApplicationService;

	// I initialize the app component.
	constructor( jobApplicationService: JobApplicationService ) {

		this.jobApplicationService = jobApplicationService;

		this.form = {
			name: "",
			email: "",
			memo: "",
			resume: null,
			sample: null
		};

	}

	// ---
	// PUBLIC METHODS.
	// ---

	// I submit the job application form.
	public submitApplication() : void {

		var name = this.form.name;
		var email = this.form.email;
		var memo = this.form.memo;

		// Dealing with the files requires a tiny bit of elbow-grease. Since NgModel
		// won't automatically grab the files from the file-input, we have to use the
		// (changes) event to grab them manually. Then, we have to pluck the first
		// File Blob from the given FileList.
		var resume = ( this.form.resume && this.form.resume.length )
			? this.form.resume[ 0 ]
			: null
		;
		var sample = ( this.form.sample && this.form.sample.length )
			? this.form.sample[ 0 ]
			: null
		;

		this.jobApplicationService
			.submitApplication({
				name: name,
				email: email,
				memo: memo,
				resume: resume,
				sample: sample
			})
			.then(
				() => {

					alert( "Thank you for your interest!" );

				},
				( error ) => {

					alert( "Something went wrong with the form-submission." );
					console.warn( "Error submitting job application." );
					console.error( error );

				}
			)
		;

	}

}

// Import the core angular services.
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

interface JobApplication {
	name: string;
	email: string;
	memo: string;
	resume: File | null;
	sample: File | null;
}

@Injectable({
	providedIn: "root"
})
export class JobApplicationService {

	private httpClient: HttpClient;

	// I initialize the job-application service.
	constructor( httpClient: HttpClient ) {

		this.httpClient = httpClient;

	}

	// ---
	// PUBLIC METHODS.
	// ---

	// I submit the given job application and selected files. Returns a Promise.
	public async submitApplication( application: JobApplication ) : Promise<void> {

		var formData = new FormData();

		// The FormData object provides a way to programmatically submit data that the
		// Browser could have natively submitted using a "<form/>" tag. Each entry here
		// represents a form-control field.
		formData.append( "name", application.name );
		formData.append( "email", application.email );
		formData.append( "memo", application.memo );

		// While the above values are "simple" values, we can add File Blobs to the
		// FormData in the exactly same way.
		// --
		// NOTE: An optional "filename" can be provided for Files. But, for this demo,
		// we're going to allow the native filename to be used for the uploads.
		( application.resume ) && formData.append( "resume", application.resume );
		( application.sample ) && formData.append( "sample", application.sample );

		var result = await this.httpClient
			.post<void>(
				"./api/upload.cfm",
				formData

				// NOTE: When using a FormData instance to define the request BODY, the
				// correct Content-Type will be automatically provided, along with the
				// necessary "boundary" option that delimits the field values. If you
				// attempt to define the Content-Type explicitly, the "boundary" value
				// will be omitted from the post which will prevent the Lucee Server
				// parsing the request into the Form scope properly.
				// --
				// {
				// headers: {
				// "Content-Type": "multipart/form-data"
				// }
				// }
			)
			.toPromise()
		;

	}

}