How to detect file input closing in angular?

Question

I need to detect the file input dialog once i try to close without any change, but i can't do in angular , i found the solution for the problem but using javascript only and i tried to convert to angular code but its not working properly.

I tried to convert the js code to angular.

 @ViewChild('file') file: ElementRef;
 constructor(@Inject(DOCUMENT) private document: any) {}

I use the document object of js like the above.

After file input is clicked it execute the onClick function below.

onClick() {
console.log('On Click');
this.document.body.onfocus = this.test();
}
test() {
console.log(this.selectedFile);
if (this.selectedFile != null) {
  if (this.selectedFile.length) {
    alert('ROAR! FILES!');
  } else {
    alert('*empty wheeze*');
  }
}
this.document.body.onfocus = null;
}

you can get the javascript version of code from here ` 
http://jsfiddle.net/Shiboe/yuK3r/6/` 

http://jsfiddle.net/Shiboe/yuK3r/6/

I need this code works for Angular 4, help me out.

Answer 1

You can use template reference variable for this purpose. try this code (in app.component.html):

<input type="file" (change)="fileSelected($event)" style='display:none' #godzilla>
<button (click)="godzilla.click()">mech-godzilla</button>

and in component.ts:

fileSelected(event){
   console.log('file selected');
}

Working example here

Answer 2

You can create a service that tracks the focus event on your app.

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class FocusTrackingService {
  private appFocusSubject = new Subject<boolean>();

  constructor() {
    this.setupFocusListener();
  }

  private setupFocusListener() {
    window.addEventListener('focus', () => {
      this.appFocusSubject.next(true);
    });
  }

  getAppFocusObservable(): Observable<boolean> {
    return this.appFocusSubject.asObservable();
  }
}

Then in your component where you're opening the dialog you can subscribe to that service.

@ViewChild('YourFileInputIdGoesHere') fileInput!: ElementRef;
private filePickerHasOpened: boolean = false;

constructor(private focusTrackingService: FocusTrackingService) {}

ngOnInit(): void {
  this.focusTrackingService.getAppFocusObservable().subscribe((isInFocus) => {
    // If we regain focus on our app and our dialog has been opened
    if (isInFocus && this.filePickerHasOpened) {
      this.filePickerHasOpened = false;
      // Do stuff
    }
  });
}

openFileDialog(): void {
    this.filePickerHasOpened = true;
    this.fileInput.nativeElement.click();
}