Как дождаться завершения асинхронной функции перед выполнением других строк кода

Question

У меня есть функция, которая загружает изображение.Я поместил код в какой-то файл службы и вызвал его в другом компоненте, который вызывает эту службу.Я хочу выполнить еще одну строку кода в компоненте, который вызывает службу сразу после успешного завершения загрузки.

Я прочитал еще один аналогичный вопрос по этому поводу.Но я не могу четко уловить ответ, потому что в другом вопросе асинхронная функция и функция после лежат в одном файле.У меня есть подсказка Promise и Observable.но я не совсем понимаю, как правильно его использовать

Вот мой сервис:

public changeImage = (e: any, prevImage: string, filePath: string) => {
    const file  = e.target.files[0];
    const ref   = this.storage.ref(filePath);
    const task  = this.storage.upload(filePath, file);

    this.uploadPercent = task.percentageChanges();
    task.snapshotChanges().pipe(
      finalize(() => console.log(`Finished`) )
    ).subscribe();
}

, а вот компонент, который вызывает сервис:

public uploadImage = async (e: any) => {
    this.uploading        = true;
    await this.imageStorage.changeImage(e, this.admin.adminImage, `admin/${e.target.files[0].name}`);
    /* I want to execute code here after upload is success */
    this.uploading = false; /* executed after upload finished */
}

Как мне этого добиться?