(Firebase / angularfire2) получение ошибки [объект объекта] при загрузке URL

Question

Я получаю сообщение об ошибке при попытке получить URL из файла, который я только что загрузил.

Вот этот:

необработанное исключение: [объект объекта]

Это мой код в app.component.ts:

export class AppComponent {

ref: AngularFireStorageReference;
task: AngularFireUploadTask;
uploadProgress: Observable<number>;
downloadURL: Observable<string | null>;
taskName:string;
id:string;

ngOnInit() {

}

constructor(private afStorage: AngularFireStorage){

}

upload(event) {
    this.id = Math.random().toString(36).substring(2);
    this.ref = this.afStorage.ref('myURL/'+this.id);
    this.task =  this.ref.put(event.target.files[0]);
    this.uploadProgress = this.task.percentageChanges();
    this.downloadURL = this.afStorage.ref('myURL/'+this.id).getDownloadURL();
}

}

А это HTML:

<div class="card">
<div class="card-header">
    Firebase Cloud Storage Angular
</div>
<div class="card-body">
    <h5 class="card-title">Select a file for upload</h5>
    <input type="file" (change)="upload($event)" accept=".png, .jpg,"/>
    <div class="progress">
        <div id="progress" class="progress-bar progress-bar-striped bg-succes" role="progressbar" [style.width]="(uploadProgress | async) + '%'" [attr.aria-valuenow]="(uploadProgress | async)" aria-valuemin="0" aria-valuemax="100" ></div>
    </div>
    <br><br>
    <div *ngIf="downloadURL | async; let downloadSrc" class="alert alert-info" role="alert">
        File uploaded: <a [href]="downloadSrc">{{downloadSrc}}</a>
    </div>
</div>

Теперь ... вам не нужно говорить мне, я понял, что это потому, что .getDownloadURL выполняется одновременно с загрузкой файла. Я знаю это, потому что, когда я назначаю эту функцию обычной кнопке и жду, пока файл загрузится, чтобы нажать ее, ссылка выглядит просто отлично.

Я следовал некоторым учебникам, но ни у одного из них не было такой же проблемы.

¿Как я могу узнать, когда файл был успешно загружен?

Большое спасибо и извините за мой не очень хороший английский.

Answer 1

upload(event) {
    const task = this.afStorage.upload('myURL/'+this.id,event.target.files[0]);
    this.uploadProgress = task.percentageChanges();
    this.downloadURL = task.downloadURL().subscribe(url => {
        console.log('Your url is ready to use:', url);
    });
}

Answer 2

Благодаря помощи Рахула и Маурисио я смог найти решение моей проблемы:

const task = this.afStorage.upload('myURL/'+this.id,event.target.files[0]);
task.downloadURL().subscribe(url => {
  this.downloadURL = this.afStorage.ref('myURL/'+this.id).getDownloadURL();
});

Сначала он спрашивает, доступен ли URL-адрес задачи, а затем объявляет downloadURL.

Answer 3

Что вам нужно сделать, это подписаться на наблюдаемую задачу. DownloadURL ():

upload(event) {
    this.id = Math.random().toString(36).substring(2);
    this.ref = this.afStorage.ref('myURL/'+this.id);
    this.task =  this.ref.put(event.target.files[0]);
    this.uploadProgress = this.task.percentageChanges();
    this.downloadURL = this.task.downloadURL().subscribe(url => {
        console.log('Your url is ready to use:', url);
    });
}