Búsqueda de sitios web

asp.net mvc - Enviar datos de archivo a una aplicación .NET desde kendo-upload usando Angular/TypeScript


Tengo un archivo de certificado que necesito subir a través de Kendo Upload o File Select, leer los datos del archivo y enviarlos a la API de la aplicación MVC. He intentado de diferentes maneras usando File Reader y no parece funcionar. En última instancia, ya sea desde VM o DTO, necesito que el certificado se convierta a byte[] para ser guardado en la base de datos.

html :

<div *ngIf="!certificateExists; else addCertificateTemplate">
  <div class="form-row">
    <div style="padding-bottom: 10px">
      <strong>Certificate</strong>
    </div>
    <kendo-formfield>
      <kendo-fileselect
        formControlName="certificate"
        #fileSelect="kendoFileSelect"
        [multiple]="false"
        [restrictions]="fileRestrictions"
        [disabled]="!isEditable"
        (ngModelChange)="onChangeFile($event)">
        <kendo-upload-messages
          select="Select a file to upload"
          dropFilesHere="Drop file here to upload">
        </kendo-upload-messages>
      </kendo-fileselect>
      <kendo-formerror
        *ngIf="
          form.controls?.file?.errors?.required &&
          fileSelect.fileList.files.length === 0">
        Select a file to upload
        </kendo-formerror>
    </kendo-formfield>
  </div>
</div>

componente ts:

handleFormSubmit(): void {
const formValue = this.form?.getRawValue();
if (this.form?.valid) {
  const data = this.form?.value as SomeDto;

  const payload = this.createSubmitPayload(data, formValue);
  this.service
    .save(payload, true)
    .pipe(
      tap((r) => {
        this.onSave(r.id);
      })
    )
    .subscribe();
  } else {
  openExpansionPanels(this.expansionPanels);
 }
}


onChangeFile(files: any): void {
  // I'm not sure what to do here
  const file = files[0];
  console.log(file);
}

servicio ts:

save(
  data: SomeDto
): Observable<SomeDto> {
return this.httpClient
  .post<SomeDto>(
    `${API_BASE}/someBaseRoute/save`,
    data
  )
  .pipe(
    this.pageLoaderService.wrapWithLoader(
      'save'
    )
  );
}

Vm :

public class SomeVm
{
    public type Property1 { get; set; }
    
    public byte[] Certificate { get; set; }
    
    public type Property3 { get; set; }
}

controladora

    [HttpPost]
    [Route("save")]
    public HttpResponseMessage Save(HttpRequestMessage request, [FromBody] SomeVm vm)
    {
        return GetHttpResponse(
            request, () =>
            {
                
                var someDto = new SomeDto
                {
                    Property1 = vm.Property1,
                    Certificate = vm.Certificate,
                    Property3 = vm.Property3
                };

                someDto = _httpClient.Post<SomeDto, SomeDto>("apiRoute/update", someDto).Result;

                return request.CreateResponse(HttpStatusCode.OK, someDto);
            }
        );
    }

Estoy dando mucho contexto de código aquí solo para dar el panorama completo. Sin embargo, creo que simplemente hay algún concepto que me estoy perdiendo en el componente ts para leer los datos del archivo.