Angular 4 – interact with file system

Angular 4 provides an easy and straight forward way of interacting with file system. Here is an example of how you can fire an event, whenever a file is selected using a file picker:

1. Create your html code. Here is an example that uses BootStrap form-group

  <div class="form-group">
     <input type="file" #file placeholder="Browse..." 
       (change)="onChange(file.files)"/>
  </div>

Note that we are calling the “onChange()” event whenever the file input changes, which is when a file is selected using the file picker.

2. In your controller, create the onChange() method:

onChange(files){
// do whatever you want with the file
  console.log(files[0]); // print array containing file metadata
  console.log(files[0].name); // print file name
  console.log(files[0].type) // print file type

  }