Ngx-file-parser NPM

ngx-file-parser

Simple component to parse files with extensions

CSV
JSON

To be implemented: XML....

See demo

Dependencies

Angular >= 9.1.9
Angular Material >= 9.2.4

Installation

1.

NPM: npm install ngx-file-parser --save

Yarn: yarn add ngx-file-parser

2.

Import the NgxFileParserModule to provide the necessary components and directives.

import { NgxFileParserModule } from 'ngx-file-parser';

@NgModule({
  ...
  imports: [ NgxFileParserModule ],
  ...
})
export class AppModule { }

Usage

Declare NgxFileParserConfig object to provide to the directive

`NgxFileParserConfig` has the following properties

Property	Description	Default
btnText	Text to be displayed on button	Choose file
btnIcon	Material icon to be displayed on button	backup
btnColor*	Color accent to the button	transparent
accepts	Array of file name extensions	'.csv'
csvNamedProperties	If parsed CSV file should be returned as array of objects with named properties	false

*See Angular Material buttons for accents

Example

import { NgxFileParserConfig } from "ngx-file-parser";

ngxFileParserConfig: NgxFileParserConfig = {
  btnText: "Upload",
  btnIcon: "backup",
  btnColor: "primary",
  accepts: [".csv"],
  csvNamedProperties: true,
};

Use the ngx-file-btn directive and provide the needed config object and event listener function to handle the parsed object

<ngx-file-btn
  [(config)]="ngxFileParserConfig"
  (parsedFile)="handleParsedFile($event)"
></ngx-file-btn>

`ngx-file-btn` has the following output events

Event	Description	Type
parsedFile	The result of the parsed file.	INgxResult
processing	If the file is being processed	boolean

export interface INgxResult {
  extension: string;
  result: INgxCsv | INgxJson | INgxComplexCsv;
}

Returns

All parsed object is returned as INgxResult with the extension of the file and a result object and is emitted to this event listener with the \$event containing the parsed object

  handleParsedFile(parsedFileObj: INgxResult) {
    this.parsedFile = parsedFileObj.result as INgxCsv | INgxJson | INgxComplexCsv;
  }

CSV

Returns the interface INgxCsv with properties | Property | Description | | -------- | ----------------| | headers | Array of strings | | data | Array of arrays of string |

CSV Named Properties

Returns the interface INgxComplexCsv with properties | Property | Description | | -------- | ----------------| | key: string: string; | Property as definied in the upload CSV |