Sharing Top Content from the Angular-sphere.

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

  • You can get some basic information about each file before uploading it to a server using the $event object 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.
  • 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.
  • 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.

You can get some basic information about each file before uploading it to a server using the $event object 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.

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.

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.

&ltinput 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.

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 () { }…

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