Je suis très nouveau sur angularjs. Je n'ai pas pu trouver la solution en ligne. Je voudrais lire le texte d'un fichier. J'essayais de suivre cet exemple. FileReader ne charge pas correctement le fichier à l'aide d'AngularJS

Cependant, puisque j'utilise TypeScript, je reçois cette erreur pour cette ligne

document.getElementById('fileInput').files[0];

Erreur: la propriété «fichiers» n'existe pas sur le type «HTMLElement».

Veuillez me suggérer comment je peux caster pour utiliser les fichiers.

1
Sailoosha 5 mars 2016 à 04:14

3 réponses

Meilleure réponse

Cela devrait bien fonctionner à partir de cet exemple, peut-être que vous faites quelque chose de mal là-bas. Cependant, vous pouvez tester votre code comme ceci, remplacer fileChanged() par fileChanged(event) puis récupérer les fichiers par event.target.files

function fileChanged(event) {
  var target = event.target || event.srcElement;
  console.log(target.files);
  console.log(document.getElementById('fileInput').files);
}
<div>
  <input ng-model="csv"
            onchange="fileChanged(event)"
            type="file" id="fileInput"/>
</div>
3
Ammar Hasan 5 mars 2016 à 02:24

Vous devez le caster sur HTMLInputElement. Cette interface a le champ .files défini pour être FileList

/**
 * Returns a FileList object on a file type input object.
 */
readonly files: FileList | null;

interface FileList {
    readonly length: number;
    item(index: number): File;
    [index: number]: File;
}
2
Steve 1 janv. 2018 à 04:58

Une autre façon que j'ai trouvée autour de l'erreur dans la question est de remplacer:

document.getElementById('fileInput').files[0];

Avec

var input: any = document.getElementById('fileInput');
var file = input.files[0];

En définissant l'entrée comme type "any", le compilateur Typescript ne déclenche plus l'erreur.

12
mutex 17 mars 2016 à 01:30