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 }
Leave a Reply