Get File Info like Size, Name and Type from Multiple File Input in Angular 4

Angular allows you upload multiple files from your application. I have recently shared a post explaining how to use the Post method in Angular 4 to upload multiple files. However, sometimes it is necessary to do some checks on the files. You can get some basic information about each file before uploading it to a server using the $event object in Angular 4.

Get File Size, Name and Type in Angular 4

You can easily bind the $event object in Angular to an element, say a file input element, and pass the event information to your component event handler. This helps in understanding the type, name, size etc. of the files, before you use the files in your application.

Adding $event Object to File Input Element (app.component.html)

I want to show some information (like the name, size and type) of each file immediately after the user selects a file. Therefore, I need to bind the $event object to the file input elements change event. This is how my code looks in my applications template.

<input type="file" id="file" multiple 
    (change)="getFileDetails($event)" 
    style="margin: 8px;
        padding: 8px 5px;
        color: #333;
        width: auto;
        cursor: pointer;"
>

The code above listens to the change event and passes the information (via $event object) as parameter to a function named getFileDetails(), which I have written in my component class.

My Component Class (app.component.ts)

The function getFileDetails() inside my component class looks like this.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngOnInit () {  }

  getFileDetails (event) {
    for (var i = 0; i < event.target.files.length; i++) { 
      var name = event.target.files[i].name;
      var type = event.target.files[i].type;
      var size = event.target.files[i].size;
      var modifiedDate = event.target.files[i].lastModifiedDate;
      
      console.log ('Name: ' + name + "\n" + 
        'Type: ' + type + "\n" +
        'Last-Modified-Date: ' + modifiedDate + "\n" +
        'Size: ' + Math.round(size / 1024) + " KB");
    }
  }
}

The $event object provides some predefined properties that I have used to get the info. In this way you can check the file size, type etc. before uploading or doing anything with files.

← PreviousNext →