AngularFire observables tarea de almacenamiento nunca se completa

votos
1

Estoy subiendo una imagen de la galería de la cámara a base de fuego con éxito, sin embargo soy incapaz de getDownloadURL () como la tarea de almacenamiento AngularFire observables nunca se completa.

He consultado la documentación después de la 'Vigilancia porcentaje de subida' - Ejemplo de Uso aquí

Por favor, puede kindlyadvise lo que estoy haciendo mal o recomendar un enfoque alternativo. Gracias.

async onCamera(){
      try{
          const options: CameraOptions = {
          quality: 100,
          targetHeight:500,
          targetWidth:500,
          allowEdit: true,
          correctOrientation: true,
          sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
          destinationType: this.camera.DestinationType.DATA_URL,
          encodingType: this.camera.EncodingType.JPEG,
          mediaType: this.camera.MediaType.PICTURE
        }
        const imageData = await this.camera.getPicture(options);
        const image = 'data:image/jpeg;base64,' + imageData;
        const id = Math.random().toString(36).substring(2);
        const user = this.authenticatorService.getUser();
        const fileRef = this.afStorage.ref(user.uid + '/images/categories/'+id);
        const task = fileRef.putString(image, 'data_url');
        console.log('Done! - I can see this comment successfully logged to the terminal');
        //---------------------------------
        // But this Observable never completes?....
        //---------------------------------
        task.snapshotChanges().pipe(
          finalize(() => {
            console.log('Sequence complete'); // Execute when the observable completes: never logged
            this.downloadURL = fileRef.getDownloadURL();
            this.downloadURL.subscribe(url=> this.imageUrl=url);
            console.log('My ImageUrl' + this.imageUrl); // Never logged to terminal?
          }));

        console.log('Finished! - I can see this comment successfully logged to the terminal');
      } catch(e) {
        console.error(e);
        this.errorMessage = JSON.stringify(e);
        console.log(this.errorMessage);
      }
    }

Las importaciones pertinentes

import { AngularFireStorage, AngularFireStorageReference, AngularFireUploadTask } from '@angular/fire/storage';
    import { Observable } from 'rxjs/Observable';
    import { Camera, CameraOptions} from '@ionic-native/camera/ngx';
    import { finalize } from 'rxjs/operators';

Iónica Nativo 5 Referencia: https://blog.ionicframework.com/help-test-ionic-native-5/

dependencias pertinentes

dependencies: {
    @angular/animations: 6.1.0,
    @angular/common: 6.1.0,
    @angular/compiler: 6.1.0,
    @angular/compiler-cli: 6.1.0,
    @angular/core: 6.1.0,
    @angular/fire: ^5.1.0,
    ....
    @ionic-native/camera: ^5.0.0-beta.22,
    @ionic-native/core: ^5.0.0-beta.22,
    ...
    cordova-plugin-camera: ~4.0.3,
    ...
    firebase: ^5.5.9,
    ionic-angular: 3.9.2,
    promise-polyfill: ^8.1.0,
    rxjs: ^6.3.3,
    rxjs-compat: ^6.3.3,
    cordova-android: ~7.1.4
  },
Publicado el 19/12/2018 a las 14:21
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
1

Parece que te estás 99,9% del camino, buen trabajo en este proyecto! Y gracias por proporcionar los enlaces a los documentos. Creo que la razón de que el finalize()nunca se está disparando es porque no se está suscribiendo al .snapshotChanges(). Sin .subscribe()su código no será realmente escuchar a los cambios efectuados por fuera task.snapshotChanges().

En el ejemplo que has encontrado , observe que hay una .subscribe()atascado en después de la .pipe():

// get notified when the download URL is available
task.snapshotChanges().pipe(
    finalize(() => this.downloadURL = fileRef.getDownloadURL() )
)
.subscribe()

Así que el código debe ser:

//---------------------------------
// But this Observable never completes?....
//---------------------------------
task.snapshotChanges().pipe(
    finalize(() => {
        this.downloadURL = fileRef.getDownloadURL();
        console.log('My ImageUrl' + this.downloadURL);
    })
).subscribe();
Respondida el 09/01/2019 a las 13:18
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more