Myujth

When creating a storage reference using example code below, I have no issue. However, when I replace "1234" with this.id I get the below issue in screenshot. How do I fix this? All documentation I have read online indicates that this should be working.

export class NewListComponent implements OnInit 

uploadPercent: Observable<number>;
downloadURL: Observable<string>;
uploadProgress: Observable<number>;
ref: AngularFireStorageReference;
task: AngularFireUploadTask;
uploadState: Observable<string>;
id:string;
imgObsArray: Observable<string> = new Array();

 constructor(private afStorage: AngularFireStorage) 

 

 ngOnInit() 
 


uploadFile(event) 

this.id = Math.random().toString(36).substring(2);
this.ref = this.afStorage.ref("1234");
this.task = this.ref.put(event.target.files[0]);
this.uploadState = this.task.snapshotChanges().pipe(map(s => s.state));
this.uploadProgress = this.task.percentageChanges();

 this.ref.getDownloadURL()
 .subscribe(avatarUrl => 
 this.downloadURL = avatarUrl
 this.imgObsArray.push(this.downloadURL)
 console.log(avatarUrl + " This is the avatarUrl " + this.downloadURL + " This is the downloadURL ");
 , (error) => 
 console.error(error);
 );

Error

UPDATED CODE BASED ON FEEDBACK

uploadFile(event) 
const id = Math.random().toString(36).substring(2);

console.log(id + " THIS IS THE RANDOM ID")

this.ref = this.afStorage.ref(id);

this.task = this.ref.put(event.target.files[0]);

this.uploadState = this.task.snapshotChanges().pipe(map(s => s.state));

this.uploadProgress = this.task.percentageChanges(); 

this.task.snapshotChanges().pipe( 
 finalize(() => this.downloadURL = this.ref.getDownloadURL())).subscribe(); 

this.downloadURL.pipe(
 filter( url => url !== undefined),
 tap(avatarUrl => this.imgObsArray.push(avatarUrl),
 console.log(avatarUrl + " This is the avatarUrl " + avatarUrl + " This is the downloadURL "); ),
 catchError( error => 
 console.error(error); 
 return Observable.throw(error);
)).subscribe();

Adding as an answer, You should retrieve the downloadUrl on the finalize of snapshot changes as mentioned in storage docs. To resolve the pipe error, its better to move this.downloadUrl subscription to ngOnInit.

PS: After further discussion , it seems that ref.getDownloadUrl can initially return null.