File Reader

Light weight file reader angular component without external libraries/dependencies.

Demo

Checkout the demo on StackBlitz - https://file-reader.stackblitz.io

Features

1) Read contents of file from local system
2) Apply validations to read only specific file types. Example - '.txt' or any custom file extension
3) Directly parse JSON data from using file-reader

Adding the component in your project

Add Component in module

Import import { FileReaderComponent } from './file-reader/file-reader.component';

Declaration declarations: [ FileReaderComponent ]

Add selector in HTML

<file-reader (onFileRead)="readContents($event)"></file-reader>

Selector Events

Event onFileRead will return the contents of the file selected by user.

file-reader.component.ts

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

@Component({
  selector: 'file-reader',
  templateUrl: './file-reader.component.html',
  styleUrls: ['./file-reader.component.scss']
})
export class FileReaderComponent {
  file: any;
  tempFileData: any;
  @Output() onFileRead:EventEmitter<any> = new EventEmitter();
  openProject() {
    document.getElementById('my_file').click();
  }
  fileSelection(event) {
    this.file = event.target.files[0];
    console.log(this.file.name);
    //we can change these validations of file type as per our requirement
    if (this.file.name.split('.').pop() == 'txt') {
      let fileReader = new FileReader();
      fileReader.onload = (e) => {
        this.tempFileData = fileReader.result;
        this.onFileRead.emit(this.tempFileData);
      }
      fileReader.readAsBinaryString(this.file);
    }
    else {
      alert("Please choose a .txt file.");
      this.tempFileData = '';
      this.onFileRead.emit(this.tempFileData);
    }
  }
}

file-reader.component.html

<div class="file-container">
  <button class="file-button" (click)="openProject()">Open File</button>
  <input type="file" id="my_file" (change)="fileSelection($event)" class="file_exp_opener">
  <br>
</div>

file-reader.component.scss

.file-container{
    text-align: center;
  }
.file-button{
    outline: none;
    cursor: pointer;
    border: 1px solid #007bff;
    border-radius: 5px;
    background: #007bff;
    color: #fff;
    font-size: 15px;
    padding: 10px;
    margin: 5px 10px;
    min-width: 100px;
  }
.file-button:hover{
    background: #0069d9;
    border: 1px solid #0062cc;
  }
#my_file{
    display: none;
  }

Author

animesh.rawat20@gmail.com