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..." 

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:

// 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


Review this article
User Review
0 (0 votes)

About Matthias 33 Articles
I am a Software Engineer from Houston, TX who love to write codes that brings great ideas to live. In my professional life, I have created software for different industries including Oil & Gas, Finance, Service Provider, Cloud Computing and Embedded Systems. When not writting codes, i enjoy travelling, good music and photography. You can reach me at

Be the first to comment

Leave a Reply

Your email address will not be published.