web-dev-qa-db-fra.com

La propriété 'fichiers' n'existe pas sur l'erreur de type 'EventTarget' dans le texte

J'essaie d'accéder à la valeur du fichier d'entrée à partir de mon application ionic 2 mais je suis toujours confronté au problème des fichiers de propriétés qui n'existent pas sur le type 'EventTarget' . Comme il fonctionne correctement dans js mais pas dans TypeScript . Le code est donné ci-dessous:

  document.getElementById("customimage").onchange= function(e?) {
            var files: any = e.target.files[0]; 
              EXIF.getData(e.target.files[0], function() {
                  alert(EXIF.getTag(this,"GPSLatitude"));
              });
          }

S'il vous plaît, aidez-moi à résoudre ce problème car il ne construit pas mon application ionique 2. 

angulartypescriptionic2exif-js
21
Chirag Chaudhari

Le type de propriété e.target dépend de l'élément que vous renvoyez sur getElementById(...). files est une propriété de input élément: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

Dans ce cas, le compilateur TypeScript ne sait pas que vous retournez un élément input et nous n'avons pas de classe Event spécifique à cet effet. Donc, vous pouvez en créer un comme le code suivant:

interface HTMLInputEvent extends Event {
    target: HTMLInputElement & EventTarget;
}

document.getElementById("customimage").onchange = function(e?: HTMLInputEvent) {
    let files: any = e.target.files[0]; 
    //...
}
22
Diullei

Vous pouvez le convertir en HTMLInputElement :

document.getElementById("customimage").onchange= function(e: Event) {
    let file = (<HTMLInputElement>e.target).files[0];
    //rest of your code...
}
27
soroush gholamzadeh

La solution la plus simple est de déclarer e comme any

par exemple

document.getElementById('customimage').onchange = (e: any) => {
    let files = e.target.files[0];
    ...
};

Mais vous perdez des informations de type. Une approche plus sûre pourrait consister à déclarer votre propre type FileEvent en fonction de https://developer.mozilla.org/en-US/docs/Web/API/FileReader/onload .

8
shusson

C'est plus de lignes, mais je pense que c'est le plus clair.

const onChange = (event: Event) => {
  const target= event.target as HTMLInputElement;
  const file: File = (target.files as FileList)[0];
  /** do something with the file **/
};
1
Devin Clark

J'ai trouvé que:

<input type="file"  accept="image/*" 
(change)="upload($event)">

et

<ion-input type="file"  accept="image/*" 
(change)="upload($event)"><ion-input>  or (ionChange)

ne gère pas l'événement de la même manière. Par conséquent, event.target est composé de différents paramètres. 

Je n'ai donc pas utilisé la balise ion-input, mais la balise angulaire <input> normale avec le déclencheur (change)="upload($event)".

Cela a fonctionné pour moi sur Ionic 4.

0
Tiaan Oosthuizen