How to get file content and other details in AngularJS?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- Script for display 
data in particular format -->
  
<!DOCTYPE html> 
<html>
<script src=
  </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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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 { } 

chevron_right


app.component.ts:

filter_none

edit
close

play_arrow

link
brightness_4
code

// 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) {
  
        // Intially 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";
            }
          }
       }
    }
});

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.