Currently, I am in the process of developing a web application using Angular 11 that interacts with the msgraph API to facilitate file uploads to either onedrive or sharepoint, and subsequently opens the uploaded file in the Office online editor. Although this functionality is relatively straightforward to implement, another crucial aspect of the project involves retrieving the modified file once the user has finished editing it. Essentially, my goal is to receive a notification when the user closes the editor tab so that I can proceed to download the file and remove it from onedrive or sharepoint.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test-page',
templateUrl: './test-page.component.html',
styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {
constructor() { }
winGoogle!: Window | null;
interval!: NodeJS.Timeout;
ngOnInit(): void {
this.interval = setInterval(this.detectClose, 1000);
}
openWin () {
this.winGoogle = window.open('http://google.com', '_blank');
}
closeWin () {
if(this.winGoogle) {
this.winGoogle.close();
}
}
detectClose() {
//detect if the tab is closed by the user ( not from code ) and remove the interval
clearInterval(this.interval)
}
}
In my attempts to address this issue, I have noticed that the value of "handler" (this.winGoogle) remains undefined throughout the process.
If anyone has insights on how I can accomplish this task successfully, or if it is even feasible, your input would be greatly appreciated!