Angular 6 - Get download URL of Firebase Storage file after upload

The task I am trying to accomplish here is simple.

1. Upload file to Firebase Storage

2. Grab the link to the file and insert it into the form.

The problem is, I can't get the download URL.

When I upload the content, it does upload, but I get the following error message:

Object { code_: "storage/object-not-found", message_: "Firebase Storage: Object 'rnmgm3vvpz' does not exist.", serverResponse_: "{\n  \"error\": {\n    \"code\": 404,\n    \"message\": \"Not Found.  Could not get object\"\n  }\n}", name_: "FirebaseError" }

Here is the code to upload on component.ts:

upload(event) {
  const id = Math.random().toString(36).substring(2);
  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.downloadURL = this.ref.getDownloadURL();
}

and on component.html:

<input type="file" (change)="upload($event)" accept=".png,.jpg" />

How to get downloadURL after file upload?