Receive response after executing onFinalize Firebase cloud function

I have successfully created an unzip onFinalize function that unzips any file copied to storage and then deletes the file. However, I am looking for a way to receive a return value from the onFinalize cloud function in my Angular app or somehow listen for when the process is finished.

Currently, I am using logging, but it can be cumbersome because the REST call to the logger API requires an access token. Unfortunately, it's not possible to refresh the access token after it expires in 3600 seconds (unless the user logs out and logs back in).

Is there a good solution in Angular that does not involve a REST call or require an access token?

export const manageZipArchives = functions
  .region("xxxxx")
  .runWith({timeoutSeconds: 540, memory: "512MB"})
  .storage.bucket("xxxxxxxxx")
  .object()
  .onFinalize(async (obj: functions.storage.ObjectMetadata) => {
    const file = admin
      .storage()
      .bucket(obj.bucket)
      .file(obj.name!);

    ...

    return ok;
  });

Answer №1

It's quite peculiar that I am unable to listen or receive a response from the function (based on your comments)

Cloud Functions triggered by Cloud Storage events operate as background functions. They do not have any concept of a client (or front-end): the file created in Cloud Storage could have been generated by a backend process, such as an application running on a Compute Engine instance for instance.

In this scenario, you can utilize the real-time listeners provided by either Firestore or the Realtime Database.

Let's consider the example of a Firestore document. The process would be as follows:

In your Angular application:

  1. Create a document Reference using the doc() method, within a particular collection.
  2. Retrieve the doc ID associated with this Reference, utilizing the id property.
  3. Assign this doc ID as a Custom Metadata of the uploaded file.
  4. Set up a listener for this document Reference using the onSnapshot() method. Even though the doc does not yet exist, once it is created, the listener will trigger.
  5. Upload the file

In your Cloud Function:

  1. Upon completion of all asynchronous tasks like unzipping, deletion, etc., retrieve the value of the document ID stored as a Custom Metadata value and create the document in Firestore => The listener in the angular app will then be activated, indicating that the work for this file is done.

Additionally, if you need to communicate a potential error or exception to the front-end, you can also utilize the Firestore document: for instance, you could include a status field and an errorMessage field with relevant information. These fields can be accessed in the listener.

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

Add the JavaScript files to the components

I am working on integrating an admin template into my Angular2 project (version 2.1.0) which is already equipped with Bootstrap, jQuery, and jQuery plugins. Since there are numerous jQuery plugins and JS files involved, I am faced with the challenge of ho ...

Unable to display routerLink within innerHTML in Angular

Within my component code, there is a field named "taggy" that contains a complete anchor tag. Initially, when I rendered it in my HTML, I only saw the contents of "taggy" displayed as text "<a href="blopp/1337">hazaa<a>". Clearly, this did not ...

Angular 5's recursive directives in dynamic modules without any circular dependencies

I've been experimenting with loading dynamic templates into my Angular 5 app. My first attempt was following the examples in the official Angular documentation, but I quickly realized that they only cover loading static components dynamically. Next, ...

Transform the object type into Angular's Type<T>

After working with a list of components, an AnyComponent type, and a function to locate a specific component, I encountered an issue: const components = [Comp1, Comp2, Comp3 ...]; type AnyComponent = typeof components[number]; findComponent(id: string): ...

Volar and vue-tsc are producing conflicting TypeScript error messages

During the development of my project using Vite, Vue 3, and TypeScript, I have set up vue-tsc to run in watch mode. I am utilizing VS Code along with Volar. This setup has been helpful as it displays all TypeScript errors in the console as expected, but I ...

Leveraging JSON data in subsequent GET request in Ionic 3

My application receives input, concatenates it to a string, and then requests JSON data. The response includes the following first two lines: https://i.sstatic.net/h6YNH.png Now, I need to update my code to be asynchronous. It should make the initial call ...

Is it possible to dynamically close the parent modal based on input from the child component?

As I follow a tutorial, I am working on importing the stripe function from two js files. The goal is to display my stripe payment in a modal. However, I am unsure how to close the modal once I receive a successful payment message in the child. Below are s ...

The "tsc" command in Typescript seems to be acting up. I've exhausted all possible solutions but

Hello there, I find myself struggling to run Typescript throughout the day while utilizing Visual Studio Code. My usual method involves installing TS globally: $ npm install -g typescript But every time I try to use it, I encounter the same error: bas ...

Leverage the JSON Web Token module within a Chrome extension

Currently in the process of developing a chrome extension but encountering an issue with loading the json web token node module in my Node.js setup. background-script.ts import jwt from 'jsonwebtoken'; // import * as jwt from '../node_mod ...

Why does the Change Detection problem persist even when using On Push with the same object reference?

After a recent discussion on Angular Change detection, I believed I had a solid understanding. However, my confidence wavered when I encountered this issue: Why is change detection not happening here when [value] changed? To further illustrate the problem ...

Tips for sending a function as a value within React Context while employing Typescript

I've been working on incorporating createContext into my TypeScript application, but I'm having trouble setting up all the values I want to pass to my provider: My goal is to pass a set of values through my context: Initially, I've defined ...

Utilize a fresh function in Angular to retrieve and store data from a URL into a variable

Currently, I am attempting to utilize Angular in order to retrieve data from a link upon clicking a button. As a newcomer to Angular with only 2 days experience, my knowledge is quite limited. What I aim to achieve is triggering the loading of JSON data w ...

The Extended Date type is indicating that the function cannot be located

I came across this helpful gist with date extensions: https://gist.github.com/weslleih/b6e7628416a052963349494747aed659 However, when attempting to use the functions, I encountered a runtime error stating: TypeError: x.isToday is not a function I foun ...

Issue with importing aliases in Angular 7 production environment

Hello everyone! I have encountered an issue where using alias on import and building the project in production mode (--prod flag) results in the alias being undefined. Interestingly, this behavior does not occur in development mode. Any suggestions on how ...

Receive the [Object object] when implementing the panelbar in Angular

I am having trouble binding local data to a kendo panelbar in my Angular component. Instead of getting the correct data, all I see is [object object]. Here's a snippet from my component file: import { Component } from '@angular/core'; impor ...

Can you explain why it prints to the console twice every time I try to add an item?

This is a note-taking application created using Angular and Firebase. The primary functionalities include adding items and displaying them. I noticed a strange behavior where my ngOnInit() method is being called twice every time I add an item. As shown in ...

Challenges associated with adding information to FormData in an Angular Net 5 Application

I'm currently working on developing an application using Angular 11 and .NET 5 and am facing some challenges while trying to implement the file upload feature. I have successfully managed to send pictures to the server, but I'm encountering issue ...

Is there a way to package extra files along with `NodejsFunction` in Node.js?

I am looking to add another HTML file to the source code, like shown below. https://i.sstatic.net/OyxDM.png Here is my current code: const mailerFunction = new aws_lambda_nodejs.NodejsFunction(this, 'ApiNotificationHandler', { runtime: lambd ...

Writing a CSV file to AWS S3 proves to be unsuccessful

I have been working with TypeScript code that successfully writes a CSV file to AWS S3 when running locally. However, I have recently encountered an error message: s3 upload error unsupported body payload object NOTES: The code is not passing creden ...

Methods for resolving a ViewStyle typescript issue in react native

Trying to pass a width parameter into StyleSheet is causing an error like this: <View style={styles.children(width)}>{children}</View> Here's how I'm trying to use it: const styles = StyleSheet.create({ modalContent: { flex: ...