Vfrdtyky

i want to import CSV in angular 4, and store data in my database.

<input type="file" name="importCSV">

<button type="submit" class="btn btn-primary">Submit</button>

while i click on the Submit button i want to store data in my Table.

here is the html code.

<input type="file" #fileImportInput name="File Upload" (change)="csvChanged($event)" id="txtFileUpload">

below is my component code

const CSVConstants = {

   tokenDelimeter: ",",

   isHeaderPresentFlag: true,

   validateHeaderAndRecordLengthFlag: true,

   valildateFileExtenstionFlag: true,

}



public csvChanged(event) {

    var files = event.target.files;



    if (CSVConstants.validateHeaderAndRecordLengthFlag) {

        if (!this.fileUtil.isCSVFile(files[0])) {

            this.utilService.showToastMsg("error", "Please import valid .csv file");

            this.fileReset();

            return;

        }

    }



    var input = event.target;

    var reader = new FileReader();

    reader.readAsText(input.files[0]);



    reader.onload = (data) => {

        let csvData: any = reader.result;

        let csvRecordsArray = csvData.split(/rn|n/);



        var headerLength = -1;

        if (CSVConstants.isHeaderPresentFlag) {

            let headersRow = this.fileUtil.getHeaderArray(csvRecordsArray, CSVConstants.tokenDelimeter);

            headerLength = headersRow.length;

        }



        this.csvRecords = this.fileUtil.getDataRecordsArrayFromCSVFile(csvRecordsArray,

            headerLength, CSVConstants.validateHeaderAndRecordLengthFlag, CSVConstants.tokenDelimeter);



        if (this.csvRecords == null) {

            //If control reached here it means csv file contains error, reset file.

            this.fileReset();

        }



        /* Remove the file so that user can upload same one after making changes, otherwise change event

            will not be called */

        this.clearFile();



        /* Remove the first header row */

        this.csvRecords.splice(0, 1);



        this.csvRecords.map((record: any) => {

            this.external_contacts_arr.push({

                email: record[0],

                first_name: record[1],

                last_name: record[2],

                designation: record[3],

            })

        });

        this.removeBlankRecords();

        //document.getElementById(`${this.uniquePrefix}-other-tab`).click();

    }



    reader.onerror = () => {

        this.utilService.showToastMsg("error", 'Unable to read ' + input.files[0]);

    };

}

You can use the below custom function to do the needful :

private extractData(data) { // Input csv data to the function



    let csvData = data;

    let allTextLines = csvData.split(/rn|n/);

    let headers = allTextLines[0].split(',');

    let lines = ;



    for ( let i = 0; i < allTextLines.length; i++) {

        // split content based on comma

        let data = allTextLines[i].split(',');

        if (data.length == headers.length) {

            let tarr = ;

            for ( let j = 0; j < headers.length; j++) {

                tarr.push(data[j]);

            }

            lines.push(tarr);

        }

    }

    console.log(lines); //The data in the form of 2 dimensional array.

  }

You can read the file inside the file listener function like this:

function handleFileSelect(evt) {

      var files = evt.target.files; // FileList object

      var file = files[0];

      var reader = new FileReader();

      reader.readAsText(file);

      reader.onload = function(event){

        var csv = event.target.result; // Content of CSV file

        this.extractData(csv); //Here you can call the above function.

      }



}

Inside html use below code:

<input type="file" (change)="handleFileSelect($event)"/>