CODEWITHSUNDEEP
typescript
methuselah
methuselah

Reputation: 13206

Argument type Event is not assignable to parameter type Event & DragEvent

I have the following issue with my html component, at the line (change)="fileUpload($event)" it keeps flagging the error: Argument type Event is not assignable to parameter type Event & DragEvent

  <input
    (change)="fileUpload($event)"
    [attr.data-cy]="'builder-sidebar-upload-file-button'"
    accept="image/x-png,image/gif,image/jpeg"
    type="file"
    multiple
  />

The underlying code looks like this:

  fileUpload(e: Event & DragEvent): void {
    if (!this.builderService.activeDragData.getValue()) {
      this.fileIsSelectedFromBrowser(e);
      this.fileisDraggedInFromDesktop(e);
    }
  }

  fileIsSelectedFromBrowser(e: Event & DragEvent): void {
    if (
      e.target['files'] &&
      e.target['files']['length'] &&
      this.uploadService.checkFile(e.target['files'], ActiveUploadTypes.Image, true)
    ) {
      for (let i = 0; i < e.target['files']['length']; i++) {
        const image = e.target['files'][i];
        this.uploadFile(image);
      }
      return;
    }
  }

  fileisDraggedInFromDesktop(e: Event & DragEvent): void {
    if (
      e.dataTransfer &&
      this.uploadService.checkFile(e.dataTransfer.files, ActiveUploadTypes.Image, true)
    ) {
      for (let i = 0; i < e.dataTransfer.files.length; i++) {
        const image = e.dataTransfer.files[i];
        this.uploadFile(image);
      }
      return;
    }
  }

Is there a way to remove this error code from my HTML template?

Upvotes: 0

Views: 2635

Answers (1)

Kevin Montrose
Kevin Montrose

Reputation: 22571

Event & DragEvent is an intersection type so to satisfy it you must have an object with all the members of both Event and DragEvent.

If you want either use a union type Event | DragEvent, and then use a type guard to distinguish between them.

An example of a type guard:

function foo(evt: Event | DragEvent) {
    if (isDragEvent(evt)) {
        // evt is now known to be a DragEvent
    } else {
        // evt is now know to be an Event
    }
}

function isDragEvent(e: Event | DragEvent): e is DragEvent {
    return (e as DragEvent).dataTransfer !== undefined;
}

Upvotes: 2

Related Questions