3

Hola tengo un formulario en angular pero me gustaría enviar un archivo al api como se hace básicamente solo el envió de ese archivo?

<ma-header></ma-header>
<mat-card *ngIf="event">
    <mat-card-title>{{h1Text}}</mat-card-title>
    <mat-card-content>
      <form novalidate (ngSubmit)="submit()" #eventForm="ngForm" enctype="multipart/form-data">

        <p>Estudio del Paciente</p>
        <input type="file" #estudio="ngModel" id="estudio" name="estudio" placeholder="Estudio" [(ngModel)]="event.e_estudio_url">

        <button mat-raised-button color="primary" [disabled]="!eventForm.valid" type="submit">
          <mat-icon>event</mat-icon>
          {{submitText}}
        </button>
      </form>
    </mat-card-content>
  </mat-card>

Cual seria el evento TS para enviarlo?

2 respuestas 2

2

Si se puede enviarlo en binario. Este es el html:

<form #form = 'ngForm' (ngSubmit) = 'onSubmit()'  >
    <div>
    <p>
        <label>Subir archivo</label>
        <input type="file" (change)='fileChangeEvent($event)' />
    </p>
        <input type="submit" value="Subir" [disabled] = '!form.form.valid' >
    <div>
</form>

Para recuperarlo desde una clase usas target.files:

export class MiClase implements OnInit{

    public filesToUpload: Array<File>;

    fileChangeEvent(fileInput:any){
        this.filesToUpload=<Array<File>> fileInput.target.files;
    }

    onSubmit(){
       //Aqui ya tienes el archivo en binario en la variable this.filesToUpload
       // y puedes hacer con el lo que quieras
    }
}
0

lo recomendable para trabajar con archivos en angular es codificarlos en base64 con alguna de las tantas librerias que existen para cada versión de angular, el proceso es simple la librería o pugin que uses termina siendo una directiva de atributo esta se coloca en el campo file al enviar el formulario este procesa un objeto JSON mas o menos con la siguiente estructura:

{ "filetype": "text/plain", "filename": "textfile.txt", "base64": "/asd414f52132rwe1dfg1sd23g5465df1g2df155dsf55" } 

El atributo base64 es el que debes de procesar en el servidor aplicando un decode base64(eso también depende del lenguaje que estés trabajando para procesar los llamados ajax) luego lo guardas en algún directorio o la otra opción que tienes es guardar el campo base64 en la base de datos y cuando lo necesites lo lees como una cadena y lo renderizas en el html, así lo lo he hecho cuando trabajo con imágenes. Espero tomes la decisión que mas se adapte a tu proyecto suerte.

Nota: si lo trabajas de esta forma no necesitas usar enctype="multipart/form-data"

2
  • Si necesito guardar en base64 de todo tipo de archivo .txt, .docx, .gif o .bmp no requiere usarse `enctype="multipart/form-data", a que se debe el uso de eso?
    – JuankGlezz
    Commented el 13 ago. 2019 a las 15:51
  • Si esta técnica de codificar el archivo a base64 sirve para cualquier tipo de archivo y no requiere usar enctype="multipart/form-data ya que todo lo gestiona la librería de angular que utilices para ello, antes la forma tradicional de subir archivos al servidor era utilizar el enctype="multipart/form-data en la etiqueta form combinado con el campo file de html, pero eso era antes de la llegada de frameworks javascript que hoy en día conocemos. Solo tienes que buscar la librería que se adapte a la versión de angular que estas usando para codificar los archivos a base 64 y enviarlos al servidor.
    – Darwel
    Commented el 24 ago. 2019 a las 21:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.