1
votes

échec de la définition de la propriété 'value' sur 'HTMLInputElement' sous forme réactive

Sous la forme d'un enregistrement de données, je télécharge une image, l'image sera téléchargée dans un dossier du serveur et son nom sera stocké dans la base de données.

dans ce formulaire d'édition, j'obtiens le nom du fichier du serveur et j'ai besoin de remplir <input type="file"> dans ce formulaire. en utilisant la forme réactive en angular6.

c'est mon code dans le fichier ts:

<form [formGroup]="EditForm">
    <input type="file" #file formControlName="imageName">
</form>

en html:

   ngOnInit() {
  this.EditForm=this.fb.group({
  imageName:['',Validators.compose([Validators.required])]
})
this.SetForm(this.dat)
}

  SetForm(dt:data){
   this.EditForm.setValue({imageName:[dt.imageName]});
  }

et voici mon code: stackblitz

Je n'ai pas d'idée pour ce problème, et j'ai 3 jours de problème, veuillez consulter mon code et le modifier pour résoudre ce problème.

javascript typescript angular angular6

1 commentaires

Juste pour vérifier, pouvez-vous télécharger le fichier en premier lieu? Ou avez-vous seulement besoin d'aide pour "renommer" le fichier après le téléchargement?

4 Réponses :

1
votes

Pour des raisons de sécurité, il est possible de définir par programme uniquement une chaîne vide sur une valeur d'entrée de fichier pour effacer la sélection. Si vous définissez une valeur à saisir avec un fichier de type, vous obtiendrez une erreur du type:

changeFileName() {
  const dataTransfer = new ClipboardEvent('').clipboardData || new DataTransfer();
  dataTransfer.items.add(new File(['my-file'], 'new-file-name'));
  const inputElement: HTMLInputElement = document.getElementById('my-input') as HTMLInputElement

  inputElement.files = dataTransfer.files;
}

Comme solution de contournement pour les navigateurs modernes, DataTransfer peut être utilisé pour modifier la valeur d'entrée du fichier:

HTML (basé sur stackblitz ):

<form [formGroup]="EditForm">
  <input id="my-input" type="file">
</form>

<button (click)="changeFileName()">Change File Name</button>

Composant:

ERROR DOMException: Failed to set the 'value' property on 'HTMLInputElement': 
This input element accepts a filename, which may only be programmatically set 
to the empty string.

2 commentaires

oui ça me montre cette erreur. mais comment puis-je résoudre cette erreur?

J'ai créé une solution de contournement basée sur votre code, en utilisant DataTransfer stackblitz.com/edit/ ... , mais cela ne fonctionnera que dans les navigateurs modernes

0
votes

Vous pouvez renommer votre fichier image avec cette astuce:

Sur votre component.html, vous ajoutez l'écouteur d'événements pour écouter les change :

onFileChange(event) {
  //console.log(event.target.files[0].name)
  var blob = event.target.files[0].slice(0, event.target.files[0].size, 'image/png'); 

  const newFile = new File([blob], this.dat.imageName, {type: 'image/png'})
  //console.log(newFile)
}

Et sur votre component.ts, cela créera un nouveau fichier avec le nom de fichier mis à jour

<input type="file" (change)="onFileChange($event)" #file formControlName="imageName">

Cela conserve le nom du fichier d'origine en input , mais vous pouvez utiliser newFile dans votre demande de post / put à envoyer au backend.

2 commentaires

mon problème pour ne pas télécharger de fichier. mon problème pour définir la valeur à modifier

Cela crée un nouveau fichier avec le nom que vous avez indiqué sur le stackblitz. Vous pouvez le console.log et il imprime réellement le fichier avec le nom mis à jour

0
votes

Cela fonctionne pour moi;

changeFileName() {
  const inputElement: HTMLInputElement = document.getElementById('my-input') as HTMLInputElement
  inputElement.files = null;
}

0 commentaires

0
votes

supprimer formControlName = "image" et le remplacer par (change) = "onChangeImage ()"

0 commentaires