How to get file content and other details in AngularJS? Last Updated : 25 Jul, 2022 Comments Improve Suggest changes Like Article Like Report We can get the file content by using some basic angular functions and other details like the name and size of the file in AngularJS. To understand it look into the below example where both HTML and JS files are implemented. Note: Consider below two files are of same component in angular. app.module.html: html <!-- Script for display data in particular format --> <!DOCTYPE html> <html> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <body ng-app="myApp"> <div ng-controller="MyCtrl"> <input type="file" id="myFileInput" /> <button ng-click="submit()"> Submit</button> <br /><br /> <h1> Filename: {{ fileName }} </h1> <h2> File size: {{ fileSize }} Bytes </h2> <h2> File Content: {{ fileContent }} </h2> </div> </body> </html> Output: In the above HTML file we have simply made a structure to how it should be looked on the webpage. For that, we have used some angular stuff like 'ng-controller' and also doubly curly brackets which we will implement in the below javascript code. app.module.ts: javascript import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatInputModule } from '@angular/material/input'; import { MatDialogModule } from '@angular/material/dialog'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatIconModule } from '@angular/material/icon'; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, FormsModule, BrowserAnimationsModule, MatInputModule, MatFormFieldModule, MatIconModule, MatDialogModule, ], bootstrap: [AppComponent] }) export class AppModule { } app.component.ts: javascript // Code to get file content // and other data import { Component, OnInit } from '@angular/core'; // Imports import { FormGroup, FormControl, } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { constructor() { } ngOnInit() { } var myApp = angular.module('myApp', []); myApp.controller('MyCtrl', function ($scope) { // Initially declaring empty string // and assigning size to zero $scope.fileContent = ''; $scope.fileSize = 0; $scope.fileName = ''; // Implementing submit function $scope.submit = function () { var file = document.getElementById("myFileInput") .files[0]; if(file) { var Reader = new FileReader(); Reader.readAsText(file, "UTF-8"); Reader.onload = function (evt) { // Getting required result // of the file $scope.fileContent = Reader.result; $scope.fileName = document.getElementById( "myFileInput").files[0].name; $scope.fileSize = document.getElementById( "myFileInput").files[0].size;; } // Printing error if data //is not proper Reader.onerror = function (evt) { $scope.fileContent = "error"; } } } } }); Output: Comment More infoAdvertise with us Next Article How to get file content and other details in AngularJS? dadimadhav Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Misc Similar Reads How to create the dynamic forms in AngularJS ? In AngularJS, we need to create dynamic forms to make the user interact. We can create and apply different behaviors to the forms to represent and accept the data from the user. We can create dynamic forms using ng-repeat and ng-show in AngularJS. In this article, we will see how we can create dynam 6 min read How to fetch the details using ng-repeat in AngularJS ? In this article, we will see how to fetch the details with the help of the ng-repeat directive in Angular, along with understanding its implementation through the illustrations. AngularJS contains various types of pre-defined Directives, where most of the directives start with ng which denotes Angul 2 min read How to create a custom pipe in AngularJS ? In this article, we will learn how to generate custom pipe other than using built-in pipe in Angular & also explore its implementation. The Pipe is a function that is used to modify the data before rendering it to the user. Some of the pre-built pipes are date, uppercase, lowercase, currency, de 6 min read How to use AngularJS to Display HTML content value ? The ng-bind-html Directive is used to bind the innerHTML of an HTML element to application data and remove dangerous code from the HTML string. The $sanitize service is a must for the ng-bind-html directive. It is supported by all HTML elements. Syntax: <element ng-bind-html="expression"> Cont 2 min read How to create nested controllers in Angular.js ? A controller in AngularJS is a JavaScript object created with the help of a JavaScript object constructor. A controller can contain properties and functions. Controllers are used for controlling the application data of an AngularJS application. In this article, we will see the nested controllers in 4 min read How to make an http call in angular Angular, with its robust framework and extensive ecosystem, offers you powerful tools for building modern web applications. One such tool is the HttpClient module, which provides a seamless way to make HTTP calls and interact with RESTful APIs or backend services. In this article, we'll explore maki 3 min read How to filter by object property in AngularJS? Filtering by object property in AngularJS is the concept of choosing the specific objects from the data array which is based on the individual properties. In creating a web application, this is the most common task that deals with the data that needs to be sorted and then displayed to the user. Deve 6 min read How to call an AngularJS Function inside HTML ? A Function is a set of statements that takes input, does some specific computation, and produces output. In this article, we will learn How to Call an AngularJS function inside HTML. To achieve this, we can use {{...}} to call the function from HTML. We can also pass arguments and return the result 3 min read How to get original element from ng-click in AngularJS ? In AngularJS, we can get the original DOM element that fired the ng-click event using the event's currentTarget property. Getting the event's currentTarget can be useful when we want to track an element's activity, in this case, whether and how many times a particular element is clicked, or we want 3 min read How to get the current URL using AngularJS ? In this article, we will see how to get the current URL with the help of AngularJS, along with knowing its basic implementation through the examples. This task can be accomplished in 2 ways, i.e., by implementing the $location.absURL() method to get the complete URL of the current page, & the 2n 2 min read Like