Angular 13/dot net core 6, update pdf troubleshooting

Question

I have a web app, Angular 13, Visual Studio 2022, dot net core 6.0. I upload 2 docx file with input file. html code here

<div class="custom-file">
  <input #file type="file" id="customFile" accept=".pdf,.docx,.jpg,.png,.gif,.txt" (change)="upload(file.files)" name="file" />
  <label class="custom-file-label" for="customFile">{{filescelto}}</label>
</div>
<div class="custom-file">
  <input #file2 type="file" id="customFile2" accept=".pdf,.docx,.jpg,.png,.gif,.txt" (change)="upload2(file2.files)" name="file2" />
  <label class="custom-file-label" for="customFile2">{{filescelto2}}</label>
</div>
<button (click)="uploadFile()">Upload</button>

type script code here

async uploadFile() {
    await this.http.post<any>('https://localhost:44381/api/Upload', this.formData).subscribe( 
              (response) => {
                  console.log('File Uploaded Successfully');
              },
              (error) => {
                console.log(error);
              }
          )
    }

In change event of input file there is the append in FormData

upload(files) {
    if (files.length === 0) {
      console.log("return 0");
      return;
    }
    for (const file of files) {
      this.formData.append(file.name, file);
      console.log(file.name);
    }
  }

Upload of 2 docx file is ok, I have a problem with pdf because the thread is not in execution ( debugging in dot net core ). Some ideas?

Answer 1

I found a good solution with IFormFile and I haven't threads troubles.

FRONT END

const formData: FormData = new FormData();
this.selectedFiles.push(this.fileToUpload);
this.selectedFiles.push(this.fileToUpload2);
for (let file of this.selectedFiles) {
  formData.append("files", file);
}
return this.http.post('https://localhost:44381/FileManager', formData,
{
  headers: new HttpHeaders()
})
.subscribe(() => console.log("File uploaded"));

BACK END

public List<IFormFile> Files { get; set; }

....

public Task<HttpResponseMessage> PostAsync([FromForm] MultipleFilesModel listfiles)