File upload using angular 18 and .net 8

I am trying to upload a file from angular app to c# Web API (essentially to aws s3 bucket through service) with no success, I could use postman to upload files to API which seems to see the filenames in the controller but with Angualar app I always get no files count. In the network tab and in console I can see form data is posted in request but I don't see anything coming in Controller.

Question: does the file have to be encoded with base 64 and send to API and write the content back into s3? or can use form-data to post the file to API and save in s3?

Here the code for angular18 and .NET8

upload.component.html:

<div class="card mb-4">
<div class="card-header">
<strong>Upload</strong>
</div>
<div class="card-body">
<div class="upload-section mb-3">
<label for="fileUpload" class="form-label">Select File</label>
<input
type="file"
id="fileUpload"
(change)="onFileSelected($event)"
class="form-control"
multiple
/>
</div>
<div class="d-flex justify-content-end">
<button
type="button"
class="btn btn-primary me-2"
(click)="uploadDocuments()"
>
Upload
</button>
<button
type="button"
class="btn btn-secondary"
(click)="resetDocuments()"
>
Reset
</button>
</div>
</div>
</div>


upload.component.ts

onFileSelected(event: any) {
if (event.target.files && event.target.files.length > 0) {
const files: FileList = event.target.files;
for (let i = 0; i < files.length; i++) {
this.selectedDocuments.push(files);
}
}
}

uploadDocuments() {
if (this.selectedDocuments.length > 0) {
this.uploadProgress = 0; // Reset progress
this.documentService.uploadDocuments(this.selectedDocuments).subscribe({
next: (event) => {
if (event.type === HttpEventType.UploadProgress && event.total) {
this.uploadProgress = Math.round((100 * event.loaded) / event.total);
} else if (event instanceof HttpResponse) {
console.log('Documents uploaded successfully:', event.body);
alert('Documents uploaded successfully!');
this.selectedDocuments = []; // Clear the list after uploading
this.uploadProgress = 0; // Reset progress
}
},
error: (error) => {
console.error('Error uploading documents:', error);
alert('An error occurred during document upload.');
}
});
} else {
alert('There are no documents selected for upload.');
}
}


upload.service.ts

uploadDocuments(files: File[]): Observable<HttpEvent<any>> {
const formData = new FormData();
files.forEach(file => {
formData.append('files', file, file.name);
});
console.log('FormData:', formData); // Just to check the formData contents

formData.forEach((value, key) => {
console.log(`Key: ${key}, Value:`, value);
});
console.log('FormData size:', formData.getAll('files').length);


const req = new HttpRequest('POST', `${this.apiUrl}/documents/upload`, formData, {
reportProgress: true, // Enable progress tracking
responseType: 'json'
});

return this.http.request(req).pipe(
catchError(this.handleError) // Handle errors properly
);


}

Controller:

[HttpPost("upload"), DisableRequestSizeLimit]
public async Task<IActionResult> UploadDocuments([FromForm] IFormFileCollection files)
{
if (files.Count == 0)
{
return BadRequest("No files selected.");
}
await _documentService.UploadDocumentsAsync(files, GetOrganizationName());
return Ok("Files uploaded successfully.");
}

Continue reading...