typescript - Sett verdien av filinnput i Angular 6

Jeg bruker Angular 6 og jeg vil få bildet som slippes i en div og sette det som en verdi i input type="file" til et skjema.

Så, brukeren slipper et bilde i div, filinngangen får det bildet som en verdi, og deretter kan jeg sende inn skjemaet.

Dette er koden

<form [formGroup]="imageUpload" (ngSubmit)="imageUploadSubmitted()">
  <div id="imageDrop" (drop)="drop($event)" (dragover)="allowDrop($event)" #imageDrop></div> 

  <input type="file" formControlName="imageInput" required #imageInput id="imageInput"  >
  <label>
    <input type="text" formControlName="imageName" placeholder="name" required >
  </label>                      

  <button type="submit" [disabled]="!imageUpload.valid">Submit</button>
</form>

og komponenten er

  allowDrop(e) {
    e.preventDefault();
  }

  drop(e) {
    e.preventDefault();  
    this.imageUpload.controls.imageInput.reset();  
    this.imageDrop.innerHTML="";    
    let input = this.imageUpload.controls.imageInput as any;
    input.value = e.dataTransfer.files[0];  
    this.readfiles(e.dataTransfer.files);
  }

  readfiles(files){
    const reader = new FileReader();
    let image = new Image();
    reader.onload =  (event) =>{
      this.imageDrop.nativeElement.innerHTML="";                
      let fileReader = event.target as FileReader;
      image.src = fileReader.result;
      image.width = 150; 
      this.imageDrop.nativeElement.appendChild(image);  
      /*if (this.imageUpload.controls.imageInput.value==null) {                
        let input = this.imageUpload.controls.imageInput as any;        
        input.value = event.target.result;  
      }  */
    };
    reader.readAsDataURL(files[0]);    

  }

Verdien til input.value i drop har alltid en verdi, men jeg antar at det er feil type verdi. Send-knappen på skjemaet er ikke aktiv.

Da trenger jeg kanskje å lese bildet for å sette det som en verdi, så jeg vil overføre logikken til readfiles - sjekk den kommenterte koden. Dette fungerer ikke, siden jeg får en feil på result av input.value=event.target.result;. Feilen er Property result does not exist on type EventTarget

Hvordan kan jeg fikse dette og sette bildet som en filinnstastningsverdi?

Takk

PS, her er stackblitz

Svar #1

hva vil du finne som verdi i imageInput formControl?

En måte å få det til å fungere på er å endre input.value til

input.setValue(e.dataTransfer.files[0]);

På denne måten vil formControl være korrekt oppdatert og ikke lenger UGYLDIG... MEN siden du bruker en input-fil vil det ikke fungere (det vil fortelle deg at han vil ha et filnavn)

Men egentlig bruker du ikke input-filen som en input-fil, så du kan endre input i HTML ved å fjerne type="file" og skjemaet ditt bør fungere ;)

her kan du finne en bildevelger av min egen som fungerer med ngModel eller formControlName og som kan initieres med base 64: https://github.com/xrobert35/asi-ngtools/tree/angular6-compatibility/src/components/asi-image-chooser og en fungerende demo her: https://ng-tools.asi.fr/views/showroom/asi-ngtools/components/asi-image-chooser