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

  }

Review this article
Sending
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 me@matthiasomisore.com.

Be the first to comment

Leave a Reply

Your email address will not be published.


*