Acquiring the download link for Firebase Storage in Angular 2+ technology

reference: AngularFireStorageReference;
task: AngularFireUploadTask;
uploadState: Observable<string>;
uploadProgress: Observable<number>;
downloadLink: Observable<string>;

beginUpload(event) {
  const id = Math.floor(Math.random() * 1000);
  this.reference = this.afStorage.ref(id);
  this.task = this.reference.put(event.target.files[0]);
  this.uploadState = this.task.snapshotChanges().pipe(map(s => s.state));
  this.uploadProgress = this.task.percentageChanges();
  this.downloadLink = this.task.getDownloadURL();
}

Above example is sourced from tutorial.

I am trying to retrieve the download link after successful upload to firebase storage, but encountering this error:

TS2740: Type 'Subscription' is missing the following properties from type 'Observable': _isScalar, source, operator, lift, and 6 more.

Answer №1

Answer:

handleFileUpload(event) {
  const uniqueId = Math.random().toString(36).substring(2);
  const selectedFile = event.target.files[0];
  const filePath = uniqueId;
  this.reference = this.angularFireStorage.ref(uniqueId);
  this.uploadTask = this.angularFireStorage.upload(filePath, selectedFile);
  this.uploadingState = this.uploadTask.snapshotChanges().pipe(map(snapshot => snapshot.state));
  this.uploadProgressPercentage = this.uploadTask.percentageChanges();
  this.uploadTask.snapshotChanges().pipe(
    finalize(() => this.downloadLink = this.reference.getDownloadURL() )
  ).subscribe()
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unique text: "Singleton React component"

A counter component has been implemented using a npm package available here. import * as React from 'react'; import { Theme, createStyles, withStyles, WithStyles } from '@material-ui/core'; import withRoot from '../../../withRoot&a ...

Issue - Unrecognized listen EADDRINUSE :::5432 detected in Windows Command Prompt

I encountered an issue when I tried running gulp serve --nobrowser, resulting in the following error: { Error: listen EADDRINUSE :::5432 at Object._errnoException (util.js:992:11) at _exceptionWithHostPort (util.js:1014:20) at Server.setupListenHandle [as ...

Having trouble with animation transition in Angular 6?

When it comes to animating the opening and closing of a Sidenav, what are some best practices? animations: [ trigger('slider', [ state('open', style( {} )), state('closed', style( ...

The File plugin in Ionic 3 is encountering difficulties in writing files on the device

I am developing an app using Ionic 3 and the file plugin. My goal is to write a JSON string to a JSON file located in my assets folder with the following hierarchy: assets -> mock -> msg-list.json , with "assets" as the main folder in the Ionic file ...

What sets Firebase apart from Express in terms of its core functionalities?

Currently, I am delving into the realm of writing an API using Express and MongoDB while incorporating Angular for routes and views. I have been contemplating whether Firebase and AngularFire could potentially eliminate the need for Express altogether, mak ...

Tips for executing a loop and fetching a URL in Angular 8

I've been attempting to fetch data from a URL and convert it into a JSON file for display using HTML. The URL of the JSON only differs by one digit, ranging from 1 to 10, "https://jsonplaceholder.typicode.com/todos/1" Despite my efforts to create a l ...

Use the rowTemplate in a Kendo grid without replacing the existing one

I am currently utilizing Angular 1.4 with TypeScript and Kendo UI (employing angular directives). My goal is to create a RowTemplate for each row that dynamically changes the color based on a specific property of the item. While I am aware of jQuery solu ...

Using Typescript in React to render font colors with specific styling

Attempting to utilize a variable to set the font color within a react component, encountering an error with my <span>: Type '{ style: "color:yellow"; }' is not assignable to type 'HTMLProps<HTMLSpanElement>' The use of yel ...

Error alert! A token error has been detected while executing Angular tests under <Jasmine>

I've been navigating the world of Angular testing, but I've hit a roadblock that I can't seem to bypass. Despite my efforts to consult the documentation and scour Google for answers, I remain stuck with a cryptic error message stating "Inval ...

Differences Between APP_INITIALIZER and platformBrowserDynamic with provide

I've discovered two different approaches for delaying an Angular bootstrap until a Promise or Observable is resolved. One method involves using APP_INITIALIZER: { provide: APP_INITIALIZER, useFactory: (configService: ConfigurationService) => ( ...

The error message displayed on the vue-router.esm.js?8c4f:2181 file shows a TypeError, stating that it is unable to read the property '

When attempting to log in using Gmail authentication for my Vue Firebase application, I encounter an issue after clicking on "sign in with Google." Even though I get directed to the dashboard page, I am unable to view its content. In the console, the follo ...

Tips to decrease the bundle size of Angular 2 with WebPack

After experimenting with various Angular 2 seed projects utilizing WebPack, I noticed that when I compile the bundle for production, the resulting file size is around 3MB. Is there a way to minimize the size of this file? An example of one of these proje ...

After installing the latest version of Node.js, the stability of the Ionic environment

After updating nodejs from v8.1 to v12, my ionic environment is experiencing instability. Any suggestions on what needs to be updated? [abc]$ ionic cordova emulate android When running ng run app:ionic-cordova-build --platform=android, an unhandled exce ...

Guide to automatically have the md-select panel open when the page loads

Utilizing Angular4 along with Redux and angular material to create the layout of my website. In order to accomplish this, I am working on configuring the md-select panel to automatically open. For instance, when a button is clicked, it triggers an action ...

Firebase Hosting integrated with Cloud Functions

Struggling with deploying my functions and hosting. While I have managed to get them working separately on different branches, integrating both hosting and cloud functions is proving to be a challenge. It seems like my cloud function is not deploying succ ...

Angular Algolia InstantSearch displaying a type error

Whenever I attempt to navigate using Angular navigation to a component, it immediately redirects back to the previous page and throws this error in the console log core.js:14597 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'add ...

The testing for React and TypeScript did not succeed. It is recommended to utilize the "jsdom" test environment for better results

I'm working on a basic React/TypeScript project and diving into the world of testing. I've opted for React Testing Library and Jest to test a straightforward product page that should display the message "Welcome to our product page." Unfortunate ...

Is it possible to utilize [key:string]: any in order to eliminate the requirement for an additional function when working

Currently, I am utilizing recompose within my React project. Specifically, I am leveraging its compose function which is defined as: function compose<TInner, TOutter>( ...functions: Function[] ): ComponentEnhancer<TInner, TOutter>; interf ...

Troubleshooting: Empty Rows displayed in PrimeNG Table

Experimenting with Angular 8 and the primeNG package, I'm facing an issue where I cannot retrieve values. Despite using the {{staff[col.field]}} syntax, I only get empty rows of data. However, when I utilize the interface definition like {{staff.Emplo ...

What is the process for transforming a string literal type into the keys of a different type?

Imagine having a string literal type like this: type Letters = "a" | "b" | "c" | "d" | "e"; Is there a way to create the following type based on Letters? type LetterFlags = {a: boolean, b: boolean, c: bool ...