Wątek przeniesiony 2023-10-06 19:57 z JavaScript przez Riddle.

Jakiego typu jest $event w <input (change)

0

Witam wszystkich.
Chciałbym zasięgnąć porady.

Mam proste zdarzenie:
W widoku HTML (Angular):

<input type="file" class="file-input" (change)="onImageUpload($event)">

Następnie w Component:

imageDisplay;
 onImageUpload(event) {
        const file: File = event.target.files[0];
        if (file) {
            const fileReader = new FileReader();
            fileReader.onload = () => {
                this.imageDisplay = fileReader.result;
            };
            fileReader.readAsDataURL(file);
        }
    }

W trybie strict mode: false oczywiście wszystko działa. Natomiast w strict mode niestety już nie.

Błąd: Parameter 'event' implicitly has an 'any' type.

Robię tak:

onImageUpload(event: Event) {
    const file: File = event.target.files[0];
    if (file) {
        const fileReader = new FileReader();
        fileReader.onload = () => {
            this.imageDisplay = fileReader.result;
        };
        fileReader.readAsDataURL(file);
    }
}

ale od razu dostaję komunikat:

'event.target' is possibly 'null'.

57         const file: File = event.target.files[0];

oraz:

Property 'files' does not exist on type 'EventTarget'.

57         const file: File = event.target.files[0];

Próbowałem również tak:

 onImageUpload(event: Event) {
    if (event.target) {
        const file: File = event.target.files[0];
        if (file) {
            const fileReader = new FileReader();
            fileReader.onload = () => {
                this.imageDisplay = fileReader.result;
            };
            fileReader.readAsDataURL(file);
        }
    }
}

Bardzo proszę o wyjaśnienie jak to napisać w strict mode.

0

Zapewne chodzi o coś podobnego

onImageUpload(e: Event & { target: HTMLInputElement }) {
  const files = e.target.files;

  // Tablica files jest pusta
  if (!files.length) {
    return;
  }

  // Operacje na podanych plikach
  // ...
}

tylko nie jestem pewien, czy Angular nie udostępnia jakiegoś gotowego typu do tego

0

Bardzo dziękuję za odpowiedź.
Natomiast teraz mam error w komponencie:

(change)="onImageUpload($event)
Argument of type 'Event' is not assignable to parameter of type 'Event & { target: HTMLInputElement; }'.
  Type 'Event' is not assignable to type '{ target: HTMLInputElement; }'.
    Types of property 'target' are incompatible.
      Type 'EventTarget | null' is not assignable to type 'HTMLInputElement'.
        Type 'null' is not assignable to type 'HTMLInputElement'.
1

Daj na początku

if (!(event.target instanceof HTMLInputElement)) return;
0

Niestety nie działa:

Argument of type 'Event' is not assignable to parameter of type 'Event & { target: HTMLInputElement; }'.
  Type 'Event' is not assignable to type '{ target: HTMLInputElement; }'.
    Types of property 'target' are incompatible.
0

No dobra a nie powinieneś się zapiąć na oninput a nie onchange?

1

@MichalPLW: Super, działa jak należy:

 onImageUpload(event: Event) {
        if (!(event.target instanceof HTMLInputElement)) return;
        const files = event.target.files;
        if (!files?.length) {
            return;
        }
        if (files[0]) {
            const fileReader = new FileReader();
            fileReader.onload = () => {
                this.imageDisplay = fileReader.result;
            };
            fileReader.readAsDataURL(files[0]);
        }
    }

Bardzo dziękuję za pomoc.

1 użytkowników online, w tym zalogowanych: 0, gości: 1