web-dev-qa-db-fra.com

Angular 5 upload de fichier: Impossible de définir la propriété 'value' sur 'HTMLInputElement'

J'ai un formulaire pour télécharger un fichier dans une application 5 angulaire, et comme je l'ai copié exactement à partir d'un code que j'avais écrit il y a quelque temps, je peux jurer que cela avait déjà fonctionné. 

Voici mon code HTML:

<form [formGroup]="form" (ngSubmit)="onSubmit()">
        <div class="form-group">
            <label>File:</label>
            <input #theFile type="file" (change)="onFileChange($event)" accept=".png" class="form-control" 
                    formControlName="content" />
            <input type="hidden" name="fileHidden" formControlName="imageInput"/>

                    <!-- [(ngModel)]="model.content" -->

            <div class="alert alert-danger" *ngIf="!form.prestine && form.controls.content.errors?.noFile">
                Please provide a photo.
            </div>
            <div class="alert alert-danger" *ngIf="form.controls.content.errors?.fileTooBig">
                The file is too big and won't uploaded. Maximum allowed size is 500kb.
            </div>
        </div>
        <div class="form-group">
            <label>Notes</label>
            <textarea type="text" class="form-control" formControlName="notes" [(ngModel)]="model.notes" > </textarea>
        </div>
        <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Submit</button>
        <button class="btn btn-default" type="button" (click)="close(false);">Cancel</button>
    </form>

Voici la méthode "onFileChange" utilisée dans le contrôle fileUpload:

onFileChange($event)
  {
    if ($event.target.files.length > 0)
    {
        let ftu: File = null;
        ftu = $event.target.files[0];
        this.form.controls['content'].setValue(ftu);
        this.model.content = $event.target.files[0];
    }
  }

et voici le code du validateur personnalisé que j'ai écrit et utilisé:

import {FormControl} depuis '@ angular/forms';

export class SekaniRootImageValidators
{
    static sizeTooBig(control: FormControl)
    {
        if (!control.value)
        {
            return { noFile : true }
        }
        else  if (control.value[0].size > 505000)
        {
            return { fileTooBig: true}
        }
        return null;

    }
}

Maintenant, le problème est que dès que je sélectionne un fichier dans le contrôle d'entrée, je reçois ce message d'erreur dans la console:

ERROR DOMException: Impossible de définir la propriété 'value' sur 'HTMLInputElement': Cet élément d'entrée accepte un nom de fichier qui peut contenir être uniquement programmé sur la chaîne vide.

Ce code a déjà fonctionné, alors je ne sais pas par où commencer. Toute aide est appréciée!

ATTENTION: Voici un lien vers une réponse efficace: Angular2: la validation pour <input type = "fichier" /> ne se déclenchera pas lors de la modification du fichier à télécharger

htmlangularformsinputangular5
1
behrooz dalvandi

Comme le dit l'erreur, vous ne pouvez définir une chaîne vide que sur une valeur d'entrée de fichier pour effacer la sélection. Sinon, cela pourrait entraîner des risques pour la sécurité. Je ne peux pas imaginer comment ce code aurait pu fonctionner. Peut-être dans un navigateur non standard (mauvais)? 

Ce code ne devrait-il pas fonctionner si vous supprimez simplement la ligne, pourquoi devez-vous définir la même valeur pour l'entrée déjà existante?

Edit: semble qu'un ValueAccessor personnalisé est nécessaire pour valider les entrées de fichier. Solution dans une autre réponse: Angular2: la validation de <input type = "file" /> ne se déclenchera pas lors de la modification du fichier à télécharger

3
funkizer