0

El tema es el siguiente: Necesito checkear si el usuario eligió o no una imagen en el input file. Si eligió una, voy a guardar los datos y la imagen la guardo en firestorage, caso contrario voy a guardar todos los datos del formulario sin la imagen. Mi idea fue preguntar si se seleccionó una imagen en la función addBook(). De la forma que lo hice no da resultados, porque en el caso de que no se haya elegido una imagen, intenta guardarla en firestorage de todas maneras, avisando este error por consola.

esta es mi funcion onFileSelected(event) que se activa cuando se elige una imagen en el input file

 onFileSelected(event) {
    // obtengo el archivo completo de la img (nombre, tipo, tamaño, etc..)
    this.selectedFile = event.target.files[0];  
    console.log('Archivo seleccionado: ' + this.selectedFile.name);

    // para mostrar la imagen seleccionada en etiqueta <img> lado html
    if (event.target.files && event.target.files[0]) {
      const reader = new FileReader();
      reader.onload = (event: any) => {
       this.url = event.target.result;
      };

      reader.readAsDataURL(event.target.files[0]);
    }

  }

Esta es mi funcion onUploadFile() que me permite subir la imagen a firestorage

onUploadFile() {
    // obtengo solo el nombre de la imagen
    const name = this.selectedFile.name;
    const fileRef = this.storage.ref(name);
    // subo imagen a firestorage con el nombre y todas sus prop(tipo, tamaño, etc..)
    const task = this.storage.upload(name, this.selectedFile);

    task.snapshotChanges()
    .pipe(
      // finalize notifica cuando termina de subir la imagen
      finalize(() => {
        this.image$ = fileRef.getDownloadURL();
        this.image$.subscribe(url => {
          console.log(url);
        });
      })
    )
    .subscribe();
  }

y esta es la funcion addBook(). en esta quiero preguntar si el usuario eligió o no una imagen para poder guardarla o no.

addBook(event: Event) {

    event.preventDefault();
    this.book = this.form.value;
    console.log(this.book);
    if (this.form.valid)
    {
      if (confirm('¿Esta seguro/a que desea agregar el producto?'))
      {
        // obtengo los valores del formulario
        this.book = this.form.value;
        // inserta el producto en la db firestore
        this.bookService.addBook(this.book);
        // guardo la imagen en firestorage
        if (this.book.image !== '' ){
          this.onUploadFile();
        }
        // para limpiar el formulario
        this.form.reset();
        this.book = {} as Book;
        // seteo la img <img> lado html
        this.url = 'http://placehold.it/180';
        this.toastr.success('Operación exitosa', 'Producto agregado!');
      }
    }
  }

Aca les muestro formulario de html tiene mas inputs pero solo les muestro el input file para que no sea mas largo el código.

<div class="row pt-4">
    <div class="col-md-5">
        <div class="card card-body pt-4">
            <h3 class="text-center"><b>Create book</b></h3>           
            <form [formGroup]="form" (ngSubmit)="addBook($event)">
                              
                <div class="form-group">
                    <div class="text-center mb-3">
                        <img class="img" [src]="url">
                    </div>                   
                    <input type="file" class="form-control"
                    formControlName="image" 
                    [(ngModel)]="book.image" 
                    placeholder="img"
                    (change)="onFileSelected($event)">
                </div>

                <div class="text-center">
                    <button [disabled]="form.invalid" type="submit" class="btn btn-dark btn-block">
                        <i class="fa fa-floppy-o" aria-hidden="true"></i>
                        Save
                    </button>
                    <button type="reset" class="btn btn-warning btn-block text-white">Reset
                        <i class="fa fa-refresh" aria-hidden="true"></i>
                    </button>
                </div>               
            </form>
        </div>
    </div>
    <div class="col-md-7">
        <app-books></app-books>
    </div>    
</div>

1 respuesta 1

0

Puedes probar esto.

    if (event.target.files.length == 0 || event.target.files[0] == null ) {
        // cuando este vacío 
        }else {
      const reader = new FileReader();
          reader.onload = (event: any) => {
           this.url = event.target.result;
          };
    
          reader.readAsDataURL(event.target.files[0]);
}

Espero que te sirva. Un saludo.

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.