title: Angular 2: Custom validation for file extensions
body: <p>I am new to angular. I want to create a custom validation for checking the file size and extension. I am using FormBuilder for validation and FileReader API for fetching file name and size of the input element field data.</p>
  
  <p>Problem: We are able to trigger custom validation on change event but could not fetch value of input type field.</p>
  
  <p>Please suggest how we can implement custom validation for file extensions and size in angular 2.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;input type="file" [formControl] = "formName.controls['thumbnailImg']" (change)="changeThumbFile($event)"&gt;
  </code></pre>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>//custom validation
  function validateExt(c: FormControl) {
      let extension = ['png', 'jpeg', 'gif'];
      return extension.indexOf(c.value)? null : { validateExt: { valid: false } }
  }
  
  this.form = this.formBuilder.group({
    'thumbnailImg': ['', validateExt],
  });
  changeThumbFile($event){
      var file: File = $event.target.files[0];
      var fReader: FileReader = new FileReader();
  
      var imgName = file.name;
      this.thumbnailName = imgName;
  
      this.formGp.controls['thumbnailImg'].updateValueAndValidity();
  }
  </code></pre>