web-dev-qa-db-fra.com

Comment utiliser le fichier de type d’entrée dans angular material

Comment utiliser le fichier de type d’entrée dans angular angulaire

Bonjour, j’utilise angular du matériel de conception. Quand je passe angular le site matériel n’a pas d’élément de fichier de type de saisie. Tout le monde le sait.

angularangular-materialmaterial-design
14
Hariom Singh

Matériel angulaire ne prend pas encore en charge une solution de contournement pour le téléchargement de fichier. Il existe une alternative pour résoudre ce problème. par exemple, en utilisant des bibliothèques externes.

angular-material-fileupload : lien vers le paquet npm

Fonctions prises en charge:

  • Glisser déposer
  • téléchargements communs
  • barre de progression
  • taille de fichier et plus ...

ngx-material-file-input : lien vers le référentiel

Fonctions prises en charge:

  • ngx-mat-file-input composant, à utiliser à l'intérieur Angular Material mat-form-field
  • un FileValidator avec maxContentSize, pour limiter la taille du fichier
  • a ByteFormatPipe pour formater la taille du fichier dans un format lisible par l'homme
  • et plus de petites fonctionnalités mineures ...

Mettre à jour

Voir la réponse ici si vous avez juste besoin d'une solution de contournement sans bibliothèque externe https://stackoverflow.com/a/53546417/6432698

11
billyjov

Voici une solution de contournement si tout ce que vous voulez est un bouton d’entrée de fichier bien affiché.

Html

<button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
<input hidden (change)="onFileSelected()" #fileInput type="file" id="file">

Composant

onFileSelected() {
  const inputNode: any = document.querySelector('#file');

  if (typeof (FileReader) !== 'undefined') {
    const reader = new FileReader();

    reader.onload = (e: any) => {
      this.srcResult = e.target.result;
    };

    reader.readAsArrayBuffer(inputNode.files[0]);
  }
}

Inspiré par ce Angular Material Github Issue comment https://github.com/angular/material2/issues/3262#issuecomment-309000588

27
JackMorrissey