feat(package): update to use signal API

apps/demo/src/doc.md

@@ -6,12 +6,12 @@ import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-u
 ### Annotations
 ```typescript
 // class FileSelectDirective
-@Directive({ selector: '[ng2FileSelect]', standalone: false })
+@Directive({ selector: '[ng2FileSelect]' })
 ```
 
 ```typescript
 // class FileDropDirective
-@Directive({ selector: '[ng2FileDrop]', standalone: false })
+@Directive({ selector: '[ng2FileDrop]' })
 ```
 
 ## FileSelect API

libs/ng2-file-upload/file-upload/file-drop.directive.ts

@@ -1,29 +1,27 @@
-import { Directive, EventEmitter, ElementRef, HostListener, Input, Output } from '@angular/core';
+import { Directive, ElementRef, HostListener, inject, input, output } from '@angular/core';
 
 import { FileUploader, FileUploaderOptions } from './file-uploader.class';
 
-@Directive({ selector: '[ng2FileDrop]', standalone: false })
+@Directive({
+  selector: '[ng2FileDrop]',
+})
 export class FileDropDirective {
-  @Input()  uploader?: FileUploader;
-  @Output()  fileOver: EventEmitter<any> = new EventEmitter();
+  readonly uploader = input<FileUploader>();
+  readonly fileOver = output<any>();
   // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-  @Output()  onFileDrop: EventEmitter<File[]> = new EventEmitter<File[]>();
+  readonly onFileDrop = output<File[]>();
 
-  protected element: ElementRef;
-
-  constructor(element: ElementRef) {
-    this.element = element;
-  }
+  protected readonly element = inject(ElementRef);
 
   getOptions(): FileUploaderOptions | void {
-    return this.uploader?.options;
+    return this.uploader()?.options;
   }
 
   getFilters(): string {
     return '';
   }
 
-  @HostListener('drop', [ '$event' ])
+  @HostListener('drop', ['$event'])
   onDrop(event: MouseEvent): void {
     const transfer = this._getTransfer(event);
     if (!transfer) {
@@ -34,13 +32,13 @@ export class FileDropDirective {
     const filters = this.getFilters();
     this._preventAndStop(event);
     if (options) {
-      this.uploader?.addToQueue(transfer.files, options, filters);
+      this.uploader()?.addToQueue(transfer.files, options, filters);
     }
     this.fileOver.emit(false);
     this.onFileDrop.emit(transfer.files);
   }
 
-  @HostListener('dragover', [ '$event' ])
+  @HostListener('dragover', ['$event'])
   onDragOver(event: MouseEvent): void {
     const transfer = this._getTransfer(event);
     if (!this._haveFiles(transfer.types)) {
@@ -52,10 +50,10 @@ export class FileDropDirective {
     this.fileOver.emit(true);
   }
 
-  @HostListener('dragleave', [ '$event' ])
+  @HostListener('dragleave', ['$event'])
   onDragLeave(event: MouseEvent): void {
     if ((this as any).element) {
-      if (event.currentTarget === (this as any).element[ 0 ]) {
+      if (event.currentTarget === (this as any).element[0]) {
         return;
       }
     }
@@ -80,10 +78,11 @@ export class FileDropDirective {
 
     if (types.indexOf) {
       return types.indexOf('Files') !== -1;
-    } else if (types.contains) {
+    }
+
+    if (types.contains) {
       return types.contains('Files');
-    } else {
-      return false;
     }
+    return false;
   }
 }

libs/ng2-file-upload/file-upload/file-select.directive.ts

@@ -1,21 +1,17 @@
-import { Directive, EventEmitter, ElementRef, Input, HostListener, Output } from '@angular/core';
+import { Directive, ElementRef, HostListener, inject, input, output } from '@angular/core';
 
 import { FileUploader, FileUploaderOptions } from './file-uploader.class';
 
-@Directive({ selector: '[ng2FileSelect]', standalone: false })
+@Directive({ selector: '[ng2FileSelect]' })
 export class FileSelectDirective {
-  @Input() uploader?: FileUploader;
+  readonly uploader = input<FileUploader>();
   // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-  @Output() onFileSelected: EventEmitter<File[]> = new EventEmitter<File[]>();
+  readonly onFileSelected = output<File[]>();
 
-  protected element: ElementRef;
-
-  constructor(element: ElementRef) {
-    this.element = element;
-  }
+  protected element = inject(ElementRef);
 
   getOptions(): FileUploaderOptions | undefined {
-    return this.uploader?.options;
+    return this.uploader()?.options;
   }
 
   getFilters(): string {
@@ -31,7 +27,7 @@ export class FileSelectDirective {
     const files = this.element.nativeElement.files;
     const options = this.getOptions();
     const filters = this.getFilters();
-    this.uploader?.addToQueue(files, options, filters);
+    this.uploader()?.addToQueue(files, options, filters);
 
     this.onFileSelected.emit(files);
     if (this.isEmptyAfterSelection()) {

libs/ng2-file-upload/file-upload/file-upload.module.ts

@@ -1,13 +1,17 @@
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { FileDropDirective } from './file-drop.directive';
 import { FileSelectDirective } from './file-select.directive';
+import { FileDropDirective } from './file-drop.directive';
 
 @NgModule({
-  imports: [ CommonModule ],
-  declarations: [ FileDropDirective, FileSelectDirective ],
-  exports: [ FileDropDirective, FileSelectDirective ]
+  imports: [
+    FileSelectDirective,
+    FileDropDirective,
+  ],
+  exports: [
+    FileSelectDirective,
+    FileDropDirective,
+  ],
 })
 export class FileUploadModule {
 }

libs/ng2-file-upload/index.ts

@@ -1,8 +1,8 @@
-export * from  './file-upload/file-drop.directive';
-export * from  './file-upload/file-uploader.class';
+export * from './file-upload/file-uploader.class';
 export * from './file-upload/file-item.class';
 export * from './file-upload/file-like-object.class';
 export * from './file-upload/file-like-object.class';
 
 export { FileUploadModule } from './file-upload/file-upload.module';
 export { FileSelectDirective } from './file-upload/file-select.directive';
+export { FileDropDirective } from './file-upload/file-drop.directive';

libs/ng2-file-upload/package.json

@@ -5,8 +5,7 @@
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT",
   "peerDependencies": {
-    "@angular/core": "^19.0.0",
-    "@angular/common": "^19.0.0"
+    "@angular/core": "^19.0.0"
   },
   "sideEffects": false,
   "publishConfig": {

libs/ng2-file-upload/testing/spec/file-drop.directive.spec.ts

@@ -11,7 +11,8 @@ import { FileDropDirective } from '../../file-upload/file-drop.directive';
   template: `<div type="file"
                     ng2FileDrop
                     [uploader]="uploader"
-             ></div>`
+             ></div>`,
+  imports: [FileUploadModule],
 })
 export class ContainerComponent {
   public get url(): string { return 'localhost:3000'; }
@@ -25,14 +26,6 @@ describe('Directive: FileDropDirective', () => {
   let directiveElement: DebugElement;
   let fileDropDirective: FileDropDirective;
 
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [ FileUploadModule ],
-      declarations: [ ContainerComponent, FileDropDirective ],
-      providers: [ ContainerComponent ]
-    });
-  });
-
   beforeEach(() => {
     fixture = TestBed.createComponent(ContainerComponent);
     hostComponent = fixture.componentInstance;
@@ -50,7 +43,7 @@ describe('Directive: FileDropDirective', () => {
   });
 
   it('can set file uploader', () => {
-    expect(fileDropDirective.uploader).toBe(hostComponent.uploader);
+    expect(fileDropDirective.uploader()).toBe(hostComponent.uploader);
   });
 
   it('can get uploader options', () => {
@@ -84,8 +77,9 @@ describe('Directive: FileDropDirective', () => {
 
   it('adds file to upload', () => {
     let addToQueue;
-    if (fileDropDirective.uploader?.addToQueue) {
-      addToQueue = jest.spyOn(fileDropDirective.uploader, 'addToQueue');
+    const uploader = fileDropDirective.uploader();
+    if (uploader?.addToQueue) {
+      addToQueue = jest.spyOn(uploader, 'addToQueue');
     }
 
     let fileOverData;
@@ -141,8 +135,8 @@ describe('Directive: FileDropDirective', () => {
 function getFakeEventData(): any {
   return {
     dataTransfer: {
-      files: [ 'foo.bar' ],
-      types: [ 'Files' ]
+      files: ['foo.bar'],
+      types: ['Files']
     },
     preventDefault: () => undefined,
     stopPropagation: () => undefined

libs/ng2-file-upload/testing/spec/file-select.directive.spec.ts

@@ -11,7 +11,8 @@ import { FileUploader } from '../../file-upload/file-uploader.class';
   template: `<input type="file"
                     ng2FileSelect
                     [uploader]="uploader"
-             />`
+             />`,
+  imports: [FileUploadModule],
 })
 export class ContainerComponent {
   public get url(): string { return 'localhost:3000'; }
@@ -24,14 +25,6 @@ describe('Directive: FileSelectDirective', () => {
   let directiveElement: DebugElement;
   let fileSelectDirective: FileSelectDirective;
 
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [ FileUploadModule ],
-      declarations: [ ContainerComponent ],
-      providers: [ ContainerComponent ]
-    });
-  });
-
   beforeEach(() => {
     fixture = TestBed.createComponent(ContainerComponent);
     hostComponent = fixture.componentInstance;
@@ -49,7 +42,7 @@ describe('Directive: FileSelectDirective', () => {
   });
 
   it('can set file uploader', () => {
-    expect(fileSelectDirective.uploader).toBe(hostComponent.uploader);
+    expect(fileSelectDirective.uploader()).toBe(hostComponent.uploader);
   });
 
   it('can get uploader options', () => {
@@ -91,8 +84,9 @@ describe('Directive: FileSelectDirective', () => {
 
   it('handles change event', () => {
     let addToQueue;
-    if (fileSelectDirective.uploader?.addToQueue) {
-      addToQueue = jest.spyOn(fileSelectDirective.uploader, 'addToQueue');
+    const uploader = fileSelectDirective.uploader();
+    if (uploader?.addToQueue) {
+      addToQueue = jest.spyOn(uploader, 'addToQueue');
     }
     fileSelectDirective.onChange();
 

libs/ng2-file-upload/testing/test-setup.ts

@@ -1 +1,3 @@
-import 'jest-preset-angular/setup-jest';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';
+
+setupZoneTestEnv();

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "description": "Angular file upload directives",
   "scripts": {
+    "nx": "nx",
     "start": "npx nx run ng2-file-upload-demo:serve",
     "demo.build": "ng build",
     "demo.build-prod": "ng build",