title: Set the value of file input in Angular 6
body: <p>I am using Angular 6 and I want to get the image that is dropped in a <code>div</code> and set it as a value in the <code>input type="file"</code> of a form. </p>
  
  <p>So, the user drops an image in the <code>div</code>, the file input gets that image as a value and then I can submit the form. </p>
  
  <p>This is the code</p>
  
  <pre><code>&lt;form [formGroup]="imageUpload" (ngSubmit)="imageUploadSubmitted()"&gt;
    &lt;div id="imageDrop" (drop)="drop($event)" (dragover)="allowDrop($event)" #imageDrop&gt;&lt;/div&gt; 
  
    &lt;input type="file" formControlName="imageInput" required #imageInput id="imageInput"  &gt;
    &lt;label&gt;
      &lt;input type="text" formControlName="imageName" placeholder="name" required &gt;
    &lt;/label&gt;                      
  
    &lt;button type="submit" [disabled]="!imageUpload.valid"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and the component is</p>
  
  <pre><code>  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) =&gt;{
        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]);    
  
    }
  </code></pre>
  
  <p>The <code>input.value</code> in the <code>drop</code> always has a value, but I guess is the wrog type of value.  The submit button of the form is not active.</p>
  
  <p>Then maybe I need to read the image to set it as a value, so I will transfer the logic in the <code>readfiles</code> - check the commented out code. This does not work, since I get an error no the <code>result</code> of the <code>input.value = event.target.result;</code> . The error is <code>Property result does not exist on type EventTarget</code></p>
  
  <p>How can I fix this and set the image as a file input value ? </p>
  
  <p>Thanks</p>
  
  <p>PS, here is the <a href="https://stackblitz.com/edit/angular-5gstwa?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">stackblitz</a> </p>