Quiero subir una imagen en Firebase. Pero para hacer eso, primero tengo que obtener el archivo. ¿Cómo puedo obtener una imagen de mi computadora, por ejemplo, a través del HTML? Estoy tratando de hacer esto, pero no sé cuál es el retorno de esto. Ayúdenme chicos...
<input type="file" name="image" [(ngModel)]="myImage">Puede hacer referencia al elemento DOM usando ElementRef y luego extraer los datos del archivo cargado desde la referencia del elemento. Use #variableName para hacer referencia a la entrada del archivo.
<input #fileInput (change)="fileUpload()" type="file" name="pic" accept="image/*"> En su clase de componente, haga referencia a la entrada del archivo usando ViewChild .
import {Component, ElementRef, Renderer2, ViewChild} from '@angular/core' @Component({ selector: 'my-app', template: ` <div> <h2>{{name}}</h2> <input #fileInput (change)="fileUpload()" type="file" name="pic" accept="image/*"> </div> `, }) export class App { name:string; @ViewChild('fileInput') el:ElementRef; constructor(private rd: Renderer2) { this.name = `Angular : File Upload` } fileUpload() { console.log(this.el); // Access the uploaded file through the ElementRef this.uploadedFile = this.el.nativeElement.files[0]; } }He creado un plunker de muestra aquí .
¿Por qué no usas directiva con evento de cambio?
componente.html
<input type='file' uploader accept=".txt,.doc">uploader.directiva.ts
import { Directive, HostListener } from '@angular/core'; @Directive({ selector: '[uploader]' }) export class UploaderDirective { @HostListener('change',['$event.target.files']) onChanges(files) { this.readFile(files[0]) } readFile(file){ let fileReader = new FileReader(); fileReader.onload = async (e: any) => { //DO SOMETHING HERE with e.target.result } fileReader.readAsText(file); } }No olvide agregar la Directiva a su módulo.