TypeScript - Angular ドラッグアンドドロップ、イベント内の空のファイル配列

私は最新のAngularを使った別のプロジェクトでファイルアップロード用のディレクティブを使用しましたが、データ転送内のファイル配列が渡されないようです。なぜなら、イベント（リスナーから取得）を確認すると、ファイル配列が空だからです。助けてください。

export class FileUploadDirective {
  @Input() multiple: boolean;
  @Input() accept: string[];
  @Input() maxFileSize: number;

  @Output() fileEmitter = new EventEmitter<Object>();
  constructor(
    private renderer: Renderer2,
    private elementRef: ElementRef,
    ) {
    this.multiple = false;
    this.accept = ['application/pdf'];
    this.maxFileSize = 1;
    this.renderer.setProperty(this.elementRef.nativeElement, 'draggable', true);
  }

  @HostListener('dragover', ['$event']) onDragOver(evt: DragEvent){
    evt.preventDefault();
    evt.stopPropagation();
  }

  @HostListener('drop', ['$event']) public onDrop(evt: DragEvent) {
    evt.preventDefault();
    evt.stopPropagation();

    console.log("event: ", evt);
    files = evt.dataTransfer?.files;
    
    if (files && files.length > 0) {
      let reader: FileReader = new FileReader();
      
      reader.readAsDataURL(files[0]);
      reader.onloadstart = (e) => {
        console.log('load start', this.multiple, this.accept, this.maxFileSize);
      }

      reader.onprogress = (e) => {
        console.log('load progress');
      }

回答 #1

このエラーが出る人は、files=evt.dataTransfer?.files; を割り当てないでください

それは次の人によって行われなければなりません:

 console.log("event: ", evt.dataTransfer?.files.length);
    // files = evt.dataTransfer?.files;

    if (evt.dataTransfer!.files.length > 0) {
      let reader: FileReader = new FileReader();

      reader.readAsDataURL(evt.dataTransfer!.files[0]);
      reader.onloadstart = (e) => {
        console.log('load start', this.multiple, this.accept, this.maxFileSize);
      }

ファイルの長さは正しいですが、コンパイラは最初の代入をエラーとして認識します。上記の解決策は単一ファイル用です。