Jakiego typu jest $event w <input (change)

Jakiego typu jest $event w <input (change)

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

MichalPLW
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Lidzbark Warmiński
  • Postów: 13
0

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

Mam proste zdarzenie:
W widoku HTML (Angular):

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

Następnie w Component:

Kopiuj
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.

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

Robię tak:

Kopiuj
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:

Kopiuj
'event.target' is possibly 'null'.

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

oraz:

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

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

Próbowałem również tak:

Kopiuj
 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.

Xarviel
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 847
0

Zapewne chodzi o coś podobnego

Kopiuj
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

MichalPLW
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Lidzbark Warmiński
  • Postów: 13
0

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

Kopiuj
(change)="onImageUpload($event)
Kopiuj
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'.
mamrzeczy.pl
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 25
1

Daj na początku

Kopiuj
if (!(event.target instanceof HTMLInputElement)) return;
MichalPLW
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Lidzbark Warmiński
  • Postów: 13
0

Niestety nie działa:

Kopiuj
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.
RJ
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 480
0

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

MichalPLW
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Lidzbark Warmiński
  • Postów: 13
1

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

Kopiuj
 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.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.