In today’s post we’ll see how to read a CSV file and display its content using Lightning web components(lwc).

Below is the code for the lwc component:

in the below code we are initializing lightning-file-upload standard file upload component to get the csv file. In another div we are displaying the data in columns using lightning-datatable.

    <lightning-card icon-name="custom:custom19" title='Read CSV File Demo In LWC'>
        <div style="margin-left: 3%">
            <lightning-file-upload accept={acceptedFormats} 
                                   label="Attach CSV" 
        <div if:true={error}>

        <div if:true={data}>
            <lightning-datatable columns={columns} 

import { LightningElement, track, api } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import readCSV from '@salesforce/apex/lwnReadCsvFileController.readCSVFile';

const columns = [
    { label: 'Name', fieldName: 'Name' }, 
    { label: 'Industry', fieldName: 'Industry' },
    { label: 'Rating', fieldName: 'Rating'}, 
    { label: 'Type', fieldName: 'Type'}, 
    { label: 'Website', fieldName: 'Website', type:'url'}

export default class lwcReadCsvFile extends LightningElement {
    @api recordId;
    @track error;
    @track columns = columns;
    @track data;

    // accepted parameters
    get acceptedFormats() {
        return ['.csv'];
    handleUploadFinished(event) {
        // Get the list of uploaded files
        const uploadedFiles = event.detail.files;

        // calling apex class
        readCSV({idContentDocument : uploadedFiles[0].documentId})
        .then(result => {
            window.console.log('result ===> '+result);
   = result;
                new ShowToastEvent({
                    title: 'Success!!',
                    message: 'Accounts are created based CSV file!!!',
                    variant: 'success',
        .catch(error => {
            this.error = error;
                new ShowToastEvent({
                    title: 'Error!!',
                    message: JSON.stringify(error),
                    variant: 'error',

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="" fqn="lwcReadCsvFile">
public inherited sharing class lwnReadCsvFileController {
    public static list<Account> readCSVFile(Id idContentDocument){
        list<Account> lstAccsToInsert = new list<Account>();
        if(idContentDocument != null) {
            // getting File Data based on document id 
            ContentVersion objVersion = [SELECT Id, VersionData FROM ContentVersion WHERE ContentDocumentId =:idContentDocument];
            // split the file data
            list<String> lstCSVLines = objVersion.VersionData.toString().split('\n');

            for(Integer i = 1; i < lstCSVLines.size(); i++){
                Account objAcc = new Account();
                list<String> csvRowData = lstCSVLines[i].split(',');
                System.debug('csvRowData====> '+csvRowData);
                objAcc.Name = csvRowData[0]; // accName
                objAcc.Industry = csvRowData[1];
                objAcc.Rating = csvRowData[2];
                objAcc.Type = csvRowData[3];
                objAcc.Website = csvRowData[4];

                if(!lstAccsToInsert.isEmpty()) {
                    insert lstAccsToInsert;
            catch (Exception ex) {
                throw new AuraHandledException(ex.getMessage());
        return lstAccsToInsert;    


LWC Read Csv file component | The Nerd Vibe
CSV Content View | The Nerd Vibe

for any other salesforce related post click here.

To add-on or point out correction on my post or any suggestion of topics, Please fell free to add comments in the comments section.


Please enter your comment!
Please enter your name here