file-upload - example - upload file angular 4

¿Cómo incluir un control de carga de archivos en una forma reactiva Angular2?

Question

Por alguna extraña razón, simplemente no hay tutoriales ni ejemplos de código en línea que muestren cómo utilizar los formularios reactivos de Angular2 con algo más que una simple entrada o un menú desplegable de selección.

Necesito crear un formulario para permitir que los usuarios seleccionen su avatar. (Archivo de imagen)

Lo siguiente no funciona. (Es decir, la propiedad Avatar nunca muestra ningún cambio de valor).

profile.component.html:

 <form [formGroup]="profileForm" novalidate>
<div class="row">
<div class="col-md-4 ">
<img src="{{imgUrl}}uploads/avatars/{{getUserAvatar}}" style="width:150px; height:150px;float:left;border-radius:50%;margin-right:25px;margin-left:10px;">
<div class="form-group">
<label>Update Profile Image</label>
<input class="form-control" type="file" formControlName="avatar">
</div>
</div>
<div class="col-md-8 ">
<div class="form-group">
<label >Firstname:
<input class="form-control" formControlName="firstname">
</label>
</div>
<div class="form-group">
<label >Lastname:
<input class="form-control" formControlName="lastname">
</label>
</div>
<div class="form-group">
<label >Email:
<input class="form-control" formControlName="email">
</label>
</div>
<div class="form-group">
<label >Password:
<input class="form-control" type="password" formControlName="password">
</label>
</div>
</div>
</div>
</form>
<p>Form value: {{ profileForm.value | json }}</p>
<p>Form status: {{ profileForm.status | json }}</p>

profile.ponent.ts:

import { Component, OnInit } from ''@angular/core'';
import { FormBuilder, FormGroup, Validators } from ''@angular/forms'';
import {Config} from ''../../services/config.service'';
import {AuthService} from ''../../services/auth.service'';
import {User} from ''../../models/user.model'';
@Component({
selector: ''app-profile'',
templateUrl: ''./profile.component.html'',
styleUrls: [''./profile.component.css'']
})
export class ProfileComponent implements OnInit {
authUser:User;
profileForm : FormGroup;
constructor(private authService:AuthService, private fb: FormBuilder) {}
createForm() {
this.profileForm = this.fb.group({
firstname: [this.authUser.firstname, Validators.required ],
lastname: [this.authUser.lastname, Validators.required ],
email: [this.authUser.email, Validators.required ],
avatar: [this.authUser.avatar, Validators.required ],
password:[''xxxxxx'', Validators.minLength(4)]
});
}
ngOnInit() {
this.authUser = this.authService.getAuthUser();
this.createForm();
} 

Answer 1

La respuesta simple se puede encontrar aquí. https://devblog.dymel.pl/2016/09/02/upload-file-image-angular2-aspnetcore/

El HTML

 <input #fileInput type="file"/>
<button (click)="addFile()">Add</button>

Componente.ts

@ViewChild("fileInput") fileInput;
addFile(): void {
let fi = this.fileInput.nativeElement;
if (fi.files && fi.files[0]) {
let fileToUpload = fi.files[0];
this.uploadService
.upload(fileToUpload)
.subscribe(res => {
console.log(res);
});
}
}

El servicio.

upload(fileToUpload: any) {
let input = new FormData();
input.append("file", fileToUpload);
return this.http.post("/api/uploadFile", input);
}

Answer 2

Llego un poco tarde a esto, pero para cualquier otra persona que pueda venir aquí en busca de la misma solución: este es mi acceso de entrada de archivos que se puede usar con formularios reactivos o controlados por plantillas. Demo here .

Se proporciona alguna validación opcional que se puede usar para verificar las dimensiones de la imagen y el tamaño del archivo, la extensión, el tipo, que está deshabilitado de forma predeterminada.

npm i file-input-accessor y agrega el módulo a sus importaciones de AppModule:

import {BrowserModule} from ''@angular/platform-browser'';
import {FileInputAccessorModule} from "file-input-accessor";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FileInputAccessorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

Luego use su entrada de archivo como cualquier otra entrada:

<!--Reactive Forms-->
<input type="file" multiple [formControl]="someFileControl" />
<input type="file" multiple formControlName="someFileControl" />
<!--Template-driven-->
<input type="file" name="file-input" multiple [(ngModel)]="fileList" />

Puede suscribirse a la propiedad valueChanges como cualquier otro control reactivo.

Answer 3

Puede utilizar el siguiente método para cargar imágenes en cualquier tipo de formulario.

Exponer un método de cambio a su control.

<input class="form-control" type="file" name="avatar" (change)="imageUpload($event)">
<img [src]="imageUrl" />

Agregue la lógica a continuación en su clase.

 // Declare the variable.
imageUrl: any;
//method definition in your class
imageUpload(e) {
let reader = new FileReader();
//get the selected file from event
let file = e.target.files[0];
reader.onloadend = () => {
//Assign the result to variable for setting the src of image element
this.imageUrl = reader.result;
}
reader.readAsDataURL(file);
}
}

Una vez que se haya cargado la imagen, puede usar this.imageUrl para actualizar su modelo de formulario. Para cargar la imagen o el archivo en el servidor, puede tomar la referencia del siguiente enlace.

Cómo subir archivo en Angular2

Déjame saber si esta solución está funcionando para ti.