Wie können Sie kendo-fileselect verwenden, um von einer eckigen App in eine C#-Web-API hochzuladen?

Wir implementieren Kendo für Angular in unserem Projekt. Wir haben ein bestehendes Projekt, das Kendo-Upload verwendet, das sofort einen Aufruf an den Server auslöst, aber das kann ich für diese Seite nicht tun.

Die Seite ist für einen Mitarbeiter zum Hochladen eines Lebenslaufs. Sie haben möglicherweise einen vorhandenen Lebenslauf und müssen zuerst gefragt werden, ob sie diesen ersetzen möchten, und sie erhalten ein Feld zur Eingabe einer Beschreibung. Daher denke ich, dass ich kendo-fileselect verwenden und möglicherweise einen Dialog auslösen muss (sind Sie sicher, dass Sie ersetzen möchten?) und die Beschreibung und die Mitarbeiter-ID auf Knopfdruck mitsenden. Also habe ich ein Objekt erstellt, um diese Daten zu tragen.

Sie können sehen, dass das Objekt aufgefüllt wird, wenn es die API aufruft:

Aber wenn ich versuche, die API-Methode aufzurufen, erhalte ich eine Fehlermeldung:

Failed to load resource: the server responded with a status of 400 (Bad Request) [http://localhost:6300/api/employee/resume]

Der entsprechende Code ist unten.

Serverseitig:

public class EmployeeResume
{
    public int ResumeId { get; set; }
    public int EmployeeId { get; set; }
    public DateTime CreatedDate { get; set; }
    public string Description { get; set; }
    public byte[] FileContent { get; set; }
    public string FileName { get; set; }
}

[HttpPut("resume")]
    public async Task<IActionResult> UploadResume([FromBody] EmployeeResume resume)
    {            
        if (resume == null)
        {
            return BadRequest();
        }


        return Ok();
    }

Client-Seite:

// Model
export interface EmployeeResume {
    createdDate?: string;
    description?: string;
    employeeId: string;
    fileContent: any;
    fileName: string;    
    resumeId?: string;
}

// CHILD component
// -----------------------------------------------------------

// Kendo FileSelect in template
<kendo-fileselect
    formControlName="uploadFile"
    [restrictions]="uploadRestrictions"
    [multiple]="false"
    (select)="selectEventHandler($event)">
</kendo-fileselect>

// Sets a component property to the selected file
selectEventHandler(e: SelectEvent): void {
    this.uploadfile = e.files[0];
}

// When upload button is clicked, create the
// resume object and emit an event to parent
upload(): void {

    if (this.uploadfile.validationErrors) return;

    const thisComponent = this;
    const reader = new FileReader();

    reader.onload = function (ev) {
      const request = {
        description: thisComponent.f.description.value,
        employeeId: thisComponent.employeeId,
        fileContent: ev.target.result,
        fileName: thisComponent.uploadfile.name
      } as EmployeeResume;

      thisComponent.onUpload.emit(request);
    }

    reader.readAsDataURL(this.uploadfile.rawFile);    
}

// PARENT component
// -----------------------------------------------------------

// Template
<app-employee-resume
    [employeeId]="(employeeId$ | async)"
    (onUpload)="uploadResume($event)">
</app-employee-resume>

// Handler
uploadResume(resume: EmployeeResume) {    
    this.svc.upsertResume(resume)
}

// 'svc'
upsertResume(resume: EmployeeResume) {
    return this.http.put(`${this.apiUrl}/employee/resume`, resume);
}