Get the download URL from Firebase Storage and save it into an array within Firestore

I am currently working on a project to upload multiple image files to Firebase Storage and then store their download URLs in a single array within Firestore.

uploadImages(name, images) {
    for (let i = 0; i < images.length; i++) {
      const file = images[i].file;
      const path = `${name}/${new Date().getTime()}_${file.name}`;
      this.task = this.storage.upload(path, file);
      let snapshot = this.task.task.snapshot;

      this.task.snapshotChanges().pipe(
        finalize(() => {
          snapshot.ref.getDownloadURL().then(downloadUrl => {
            this.db.collection('test').doc()....

            HOW CAN I STORE ALL DOWNLOAD URLS IN AN ASCENDING ARRAY?          

              .then(() => {
                console.log('Image uploaded successfully.');
              })
              .catch(error => {
                throw new Error('Error uploading image:' + error);
              });
          });
        })
      ).subscribe(snap => snapshot = snap);
    }
  }

While my current code retrieves the download URL for each image, I am unsure of how to efficiently save them into one ascending array.

Answer №1

To store an array in your Firestore database, you can simply use the following code:

this.db.collection([YOUR_COLLECTION]).add({link: [YOUR_ARRAY]});

Replace [YOUR_ARRAY] with the download URLs you want to save. This will create a Firestore document with a field named link containing an array of your URLs. The document will be assigned a unique ID automatically; if you prefer to assign your own custom ID, you can do so like this:

this.db.collection([YOUR_COLLECTION]).doc([YOUR_DOCUMENT]).set({link: arr});

If you need the array to be in ascending order, make sure to organize it before saving it to the database.

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

Question about TypeScript annotations: arrays containing key-value pairs

Is there an explanation for why this issue occurs in VSCode? interface Point { x: number; y: number; } let grid: [key: number, value: [key: number, value: Point]]; // ... // Accessing an object of type number | [key: number, value: Point] var c ...

Setting the height of CKEditor 5: A comprehensive guide

How can I adjust the height of the CKeditor angular component? The documentation suggests we can set the editor style to: min-height: 500px !important; However, this solution does not seem to be effective for me. Any other suggestions? ...

Combine two elements in an array

I am faced with a challenge in binding values from an Array. My goal is to display two values in a row, then the next two values in the following row, and so on. Unfortunately, I have been unable to achieve this using *ngFor. Any assistance would be greatl ...

The RxJs 'from' function is currently producing an Observable that is unrecognized

import { Tenant } from './tenant'; import { from, Observable } from 'rxjs'; export const testTenants: Tenant[] = [ { 'tenant_id': 'ID1' } ] const tenants$: Observable<Tenant>= from(testTenant ...

A guide on retrieving data from Firestore using TypeScript

I've been diving into a chat project using Angular, and Firestore has given me a bit of trouble. Trying to get the hang of typescript while working with it. Within app.module.ts, kicking things off with: import { provideFirebaseApp, getApp, initi ...

What is the best way to extract and connect data from a JSON file to a dropdown menu in Angular 2+?

Here is an example of my JSON data: { "Stations": { "44": { "NAME": "Station 1", "BRANCH_CD": "3", "BRANCH": "Bay Branch" }, "137": { "NAME": "Station 2", ...

Resizing svg to accommodate a circle shape

As I work on my vue.js app that involves a plethora of diverse icons, I made the decision to create a small icons builder in node.js. The purpose is to standardize their usage and also "crop" each SVG so it fits perfectly within its parent container by uti ...

Change validators dynamically according to conditions

Scenario: At the start, there is a single text box named Name1, a date picker called DOB1, and a check box labeled Compare. Both Name1 and DOB1 are mandatory. When the checkbox is clicked, two new form controls are dynamically included, named Name2 and DO ...

Enhance Your NestJS Application by Extending Mongoose Schemas and Overriding Parent Properties

In order to achieve the desired functionality, I have a requirement for my Class B to extend a Class A. This initial step works as intended; however, the next task at hand is overriding a property of Class A within Class B. More specifically, it is necess ...

Ways to eliminate angular-fontawesome from a project?

I initially added Angular fontawesome to my project using the command provided in this link: https://www.npmjs.com/package/@fortawesome/angular-fontawesome ng add @fortawesome/angular-fontawesome@6 However, I have now decided that I want to switch to Font ...

How can I resolve the issue of mobileQuery.addEventListener not functioning in Safari while using Angular?

I have been utilizing the angular material sidenav, which includes specific breakpoints for different device widths. Here are some examples: View Angular material documentation example Access the same example in stackblitz This is how it appears: public ...

Angular 5 and the world of HTTP connections

As I embark on my journey of creating my very first Angular 5 application, one of the key components is its interaction with the Java Rest Web Services that I have developed using Spring Boot. The foundation of this integration lies in the following RESTfu ...

Mastering the art of utilizing Angular Material's custom-palette colors for maximum impact. Unle

I have implemented a custom material-color palette where I defined the primary and accent palettes with specific shades as shown below: $my-app-primary: mat-palette($md-lightprimary ,500,900,A700 ); $my-app-accent: mat-palette($md-lightaccent, 500,900 ...

The PWA software encountered an issue where the checkForUpdate function never resolved

Despite my efforts, I have encountered an issue while working with the PWA for our application. The checkForUpdate and versionUpdates methods do not seem to resolve to any values. constructor( appRef: ApplicationRef, updates: SwUpdate, ) { ...

Dropdown with grouped options in Angular PrimeNG - displaying data other than the default label/value pair

Hello there, I've encountered some difficulties with the dropdown menu, specifically when it comes to organizing by groups. Initially, I faced challenges understanding the specific format required for the array used in options to populate the dropdow ...

Issues with my transpiled and typed TypeScript npm module: How can I effectively use it in a TypeScript project?

I'm trying to experiment with TypeScript. Recently, I created a simple "hello world" TypeScript module and shared it on npm. It's very basic, just has a default export: export default function hello(target: string = 'World'): void { ...

Unselect all options in Angular's multiple selection feature

Objective: My goal is to ensure that when I invoke the myMethod() function, all options are unselected. Current Issue: Currently, calling myMethod() will only deselect the last option, leaving the others selected if they were previously selected. Possibl ...

How about utilizing React's conditional rendering feature?

I'm currently working on a component that displays tournaments and matches, and I'm facing a challenge in implementing a filter option for users to select tournaments by 'league', while still displaying all tournaments if no 'leagu ...

What are some effective methods for troubleshooting unidentified JavaScript functions within Chrome's performance analyzer?

Currently, I am utilizing Angular 4 and incorporating numerous anonymous arrow functions (() => {}). I am curious if it is feasible to identify these functions in Chrome's performance analyzer without assigning them names. Below is an example of t ...

Tips for dynamically loading Angular modules once they are in production

My application is currently in production, and I am looking to enhance its flexibility when adding new features. These features would essentially be additional modules. In Angular, it is necessary to explicitly define all dependent submodules and componen ...