title: Angular 5 file upload: Failed to set the 'value' property on 'HTMLInputElement'
body: <p>I have a form for uploading a file in an angular 5 app, and as I have copied it exactly from a code I had written a while ago, I can swear it had worked before.</p>
  <p>Here is my HTML code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;form [formGroup]=&quot;form&quot; (ngSubmit)=&quot;onSubmit()&quot;&gt;
          &lt;div class=&quot;form-group&quot;&gt;
              &lt;label&gt;File:&lt;/label&gt;
              &lt;input #theFile type=&quot;file&quot; (change)=&quot;onFileChange($event)&quot; accept=&quot;.png&quot; class=&quot;form-control&quot; 
                      formControlName=&quot;content&quot; /&gt;
              &lt;input type=&quot;hidden&quot; name=&quot;fileHidden&quot; formControlName=&quot;imageInput&quot;/&gt;
  
                      &lt;!-- [(ngModel)]=&quot;model.content&quot; --&gt;
              
              &lt;div class=&quot;alert alert-danger&quot; *ngIf=&quot;!form.prestine &amp;&amp; form.controls.content.errors?.noFile&quot;&gt;
                  Please provide a photo.
              &lt;/div&gt;
              &lt;div class=&quot;alert alert-danger&quot; *ngIf=&quot;form.controls.content.errors?.fileTooBig&quot;&gt;
                  The file is too big and won't uploaded. Maximum allowed size is 500kb.
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-group&quot;&gt;
              &lt;label&gt;Notes&lt;/label&gt;
              &lt;textarea type=&quot;text&quot; class=&quot;form-control&quot; formControlName=&quot;notes&quot; [(ngModel)]=&quot;model.notes&quot; &gt; &lt;/textarea&gt;
          &lt;/div&gt;
          &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot; [disabled]=&quot;!form.valid&quot;&gt;Submit&lt;/button&gt;
          &lt;button class=&quot;btn btn-default&quot; type=&quot;button&quot; (click)=&quot;close(false);&quot;&gt;Cancel&lt;/button&gt;
      &lt;/form&gt;
  </code></pre>
  <p>Here is the &quot;onFileChange&quot; method used in the fileUpload control:</p>
  <pre class="lang-ts prettyprint-override"><code>onFileChange($event)
    {
      if ($event.target.files.length &gt; 0)
      {
          let ftu: File = null;
          ftu = $event.target.files[0];
          this.form.controls['content'].setValue(ftu);
          this.model.content = $event.target.files[0];
      }
    }
  </code></pre>
  <p>and here is the code for the custom validator I have written and used:</p>
  <pre class="lang-ts prettyprint-override"><code>import { FormControl } from '@angular/forms';
  
  export class SekaniRootImageValidators
  {
      static sizeTooBig(control: FormControl)
      {
          if (!control.value)
          {
              return { noFile : true }
          }
          else  if (control.value[0].size &gt; 505000)
          {
              return { fileTooBig: true}
          }
          return null;
  
      }
  }
  </code></pre>
  <p>Now the issue is as soon as I select a file in the input control, I get this error message in the console:</p>
  <blockquote>
  <p>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.</p>
  </blockquote>
  <p>This code has worked before, so I have no idea where to even start. Any help is appreciated!</p>
  <p><strong>ATTENTION:</strong> Here is a link to a working answer: <a href="https://stackoverflow.com/questions/41889384/angular2-validation-for-input-type-file-wont-trigger-when-changing-the-fi/41938495#41938495">Angular2: validation for &lt;input type=&quot;file&quot;/&gt; won&#39;t trigger when changing the file to upload</a></p>