title: Angular - Clear File Input
body: <p>I have a component that allows a user to fill out some fields as well as choose a profile picture. After submitting the form, I am trying to clear it so they could add another entry.</p>
  
  <p><strong>Component HTML:</strong></p>
  
  <pre><code>&lt;input type="file" #userPhoto name="userPhoto" id="userPhoto" (change)="onFileChange($event)" /&gt;
  </code></pre>
  
  <p><strong>Component TS:</strong></p>
  
  <pre><code>@ViewChild('userPhoto') userPhoto: any;
  
  ...
  
  private prepareSave(value): any {
   const Image = this.userPhoto.nativeElement;
   if (Image.files &amp;&amp; Image.files[0]) {
     this.userPhoto = Image.files[0];
   }
   const ImageFile: File = this.userPhoto;
   const formData: FormData = new FormData();
   formData.append('ParentUserID', value.parentUserID);
   formData.append('FirstName', value.firstName);
   formData.append('LastName', value.lastName);
   formData.append('Age', value.age);
   formData.append('Photo', ImageFile, ImageFile.name);
   return formData;
  }
  
  ...
  
  &lt;Submit Form&gt;
  clearSelectedPhoto() {
    this.userPhoto.nativeElement.value = null;
  }
  </code></pre>
  
  <p>Now, I think the issue is that my <code>viewChild</code> is using <code>any</code> instead of <code>ElementRef</code>. However, when I change this, typescript complains about my line in the <code>prepareSave</code> method:</p>
  
  <pre><code>const ImageFile: File = this.userPhoto;
  </code></pre>
  
  <p>[ts]
  Type 'ElementRef' is not assignable to type 'File'.
    Property 'lastModified' is missing in type 'ElementRef'.</p>
  
  <p>How can I use <code>ElementRef</code> for my <code>viewChild</code> as well as assigning the photo to <code>File</code> later on?</p>
  
  <p>I tried to cast it in my reset method but doesn't look like thats working either.</p>
  
  <pre><code>   clearSelectedPhoto() {
       (&lt;ElementRef&gt;this.userPhoto).nativeElement.value = null;
      }
  </code></pre>
  
  <p>Throws: ERROR Error: Uncaught (in promise): TypeError: Cannot set property 'value' of undefined</p>