Generating an Observable that connects with a pre-existing function

Question

Generating an Observable that connects with a pre-existing function

Currently, I've been attempting to connect the onCompleteItem array function from the ng2-file-upload package with an RxJS Observable method that can be subscribed to.

The function in question looks like this:

onCompleteItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;

..which essentially is similar to:

onCompleteItem(item: any, response: any, status: any, headers: any)

Below are the important sections from MyComponent, where everything is currently functioning smoothly:

imageArray: Image[] = [];

uploader:FileUploader = new FileUploader({
  url: '/api/FileUpload'
});

ngOnInit() {

  this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
    const data = JSON.parse(response);
    data.forEach(x => {
      console.log(x);
      this.imageArray.push(x);
    }
    this.uploader.removeFromQueue(item);
  };

}

I made an effort to bind this as an Observable using the RxJS bindCallback function:

bindCallback(this.uploader.onCompleteItem, {item: any, response: any, status: any, headers: any})().pipe(
  tap((item, response) => {
    const data = JSON.parse(response);
    this.uploader.removeFromQueue(item);
    const images = data.map(x => console.log(x) );
    this.imageArray.push(...images);
  })
).subscribe();

Unfortunately, this approach encounters some type and syntax errors. Any suggestions on a better way to rewrite this as a bound Observable function?

angular typescript observable ng2-file-upload

Answer 1

Answer №1

bindCallback is used to wrap a function that will be called when the observable is subscribed to, like getJSON(url, callback). It seems you are attempting to utilize it by only passing the callback parameter.

Alternatively, you can explore the fromEventPattern function, which allows you to define how the event handler is registered and unregistered using its two parameters.

const {fromEventPattern} = rxjs;

const uploader = {
  upload() {
    setTimeout(() => {
      if (this.onCompleteItem) this.onCompleteItem('arg 1', 'arg 2');
    }, 1000);
  }
};

const source = fromEventPattern(handler => uploader.onCompleteItem = handler, _ => uploader.onCompleteItem = null);

source.subscribe(([arg1, arg2]) => console.log(arg1, arg2));
uploader.upload();

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.4/rxjs.umd.js"></script>

Answer 2

bindCallback is used to wrap a function that will be called when the observable is subscribed to, like getJSON(url, callback). It seems you are attempting to utilize it by only passing the callback parameter.

Alternatively, you can explore the fromEventPattern function, which allows you to define how the event handler is registered and unregistered using its two parameters.

const {fromEventPattern} = rxjs;

const uploader = {
  upload() {
    setTimeout(() => {
      if (this.onCompleteItem) this.onCompleteItem('arg 1', 'arg 2');
    }, 1000);
  }
};

const source = fromEventPattern(handler => uploader.onCompleteItem = handler, _ => uploader.onCompleteItem = null);

source.subscribe(([arg1, arg2]) => console.log(arg1, arg2));
uploader.upload();

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.4/rxjs.umd.js"></script>

Answer 3

Answer №2

Embarking on this journey was quite enlightening.. I trust that this answer will offer valuable insights to fellow users.

Initially, I experimented with a few solutions before settling on the one I eventually implemented. Below is a progression of my ideas:

Initial approach:

const obs = new Observable<{ item: FileItem, response: string }>(sub => {
  this.uploader.onCompleteItem = (item: FileItem, response: string) => sub.next({ item, response });
  return () => this.uploader.onCompleteItem = undefined;
});

bindCallback((x: (item: FileItem, response: string) => any) => this.uploader.onCompleteItem = x)()
  .pipe(
    takeUntil(this.onDestroySubj),
    tap(([item, response]) => {
      const data = JSON.parse(response);
      this.imageArray.push(...data );
      this.uploader.removeFromQueue(item);
    })
  ).subscribe();

The drawback of the above solution is that bindCallBack only triggers once.

A More Polished Approach:

Observable.create((sub: Subscriber<[FileItem, string]>) => {
  this.uploader.onCompleteItem = (item: FileItem, response: string) => sub.next([item, response]);
  return () => this.uploader.onCompleteItem = undefined;
}).pipe(
  takeUntil(this.onDestroySubj),
  tap(([item, response]) => {
    const data = JSON.parse(response);
    this.imageArray.push(...data );
    this.uploader.removeFromQueue(item);
  })
).subscribe();

This sparked an idea within me.. I pondered over using fromEvent as it can subscribe to jQuery actions and browser events, but requires a custom wrapper. This contemplation guided me towards my final resolution, utilizing fromEventPattern:

Final Solution: (complete code)

ngOnInit() {
  fromEventPattern<Parameters<FileUploader['onCompleteItem']>>(x => this.uploader.onCompleteItem = x).pipe(
    takeUntil(this.onDestroySubj),
    tap(([item, response]) => {
      this.imageArray = this.imagesSubject.getValue();
      const data = JSON.parse(response);
      this.imageArray.push(...data );
      this.uploader.removeFromQueue(item);

      // considering the usage of a Subject
      this.imagesSubject.next(this.imageArray);
    })
  ).subscribe();
}

ngOnDestroy() {
  this.onDestroySubj.next();
}

Answer 4

Embarking on this journey was quite enlightening.. I trust that this answer will offer valuable insights to fellow users.

Initially, I experimented with a few solutions before settling on the one I eventually implemented. Below is a progression of my ideas:

Initial approach:

const obs = new Observable<{ item: FileItem, response: string }>(sub => {
  this.uploader.onCompleteItem = (item: FileItem, response: string) => sub.next({ item, response });
  return () => this.uploader.onCompleteItem = undefined;
});

bindCallback((x: (item: FileItem, response: string) => any) => this.uploader.onCompleteItem = x)()
  .pipe(
    takeUntil(this.onDestroySubj),
    tap(([item, response]) => {
      const data = JSON.parse(response);
      this.imageArray.push(...data );
      this.uploader.removeFromQueue(item);
    })
  ).subscribe();

The drawback of the above solution is that bindCallBack only triggers once.

A More Polished Approach:

Observable.create((sub: Subscriber<[FileItem, string]>) => {
  this.uploader.onCompleteItem = (item: FileItem, response: string) => sub.next([item, response]);
  return () => this.uploader.onCompleteItem = undefined;
}).pipe(
  takeUntil(this.onDestroySubj),
  tap(([item, response]) => {
    const data = JSON.parse(response);
    this.imageArray.push(...data );
    this.uploader.removeFromQueue(item);
  })
).subscribe();

This sparked an idea within me.. I pondered over using fromEvent as it can subscribe to jQuery actions and browser events, but requires a custom wrapper. This contemplation guided me towards my final resolution, utilizing fromEventPattern:

Final Solution: (complete code)

ngOnInit() {
  fromEventPattern<Parameters<FileUploader['onCompleteItem']>>(x => this.uploader.onCompleteItem = x).pipe(
    takeUntil(this.onDestroySubj),
    tap(([item, response]) => {
      this.imageArray = this.imagesSubject.getValue();
      const data = JSON.parse(response);
      this.imageArray.push(...data );
      this.uploader.removeFromQueue(item);

      // considering the usage of a Subject
      this.imagesSubject.next(this.imageArray);
    })
  ).subscribe();
}

ngOnDestroy() {
  this.onDestroySubj.next();
}

Generating an Observable that connects with a pre-existing function

Answer №1

Answer №2

Similar questions

Lack of code completion in Nuxt options API when using typescript

Best practices for working with child components in Vue.js using TypeScript: Steer clear of directly mutating props

Error: Failed to execute close function in inappbrowser for Ionic application

What is the rationale behind TypeScript's decision to permit omission of "this" in a method?

Creating a flexible TypeScript function handler that accepts optional arguments depending on the function's name

I'm curious if there is a method to implement Angular Datatables that includes a filter for every column in a more streamlined and efficient manner?

Type returned by a React component

if and elsif JSON with Angular

Display an error popup if a server issue occurs

What is the substitute for <center> tag in AngularJS?

I am experiencing an issue with mydaterangepicker and primeng where it is not displaying properly in the table header. Can anyone assist me with this

Solving automatically generated TypeScript MongoDB types for GraphQL results

Why does the custom method only trigger once with the addEventListener?

Automatically convert user input to MM/DD/YYYY format in typescript as they type the date

POSTMAN - error when making a post request with the message "The media type 'application/json' is not compatible with this resource."

The metadata for [object Module] does not contain any ngModule information

Typescript does not allow for extending an interface with a data property even if both interfaces have the same data type

Creating mock objects with Jest

Leveraging Angular environment configurations for workspace libraries

What is the best way to utilize the async pipe along with @defer for efficiently loading and declaring variables in the template within Angular 17