Parsing a CSV file using a LWC

There are a couple of standard options to upload a CSV file and create records, but sometimes depending on the business requirements you will need to have a custom and intuitive solution to upload a file and run a custom process to create/update records. This post will cover how to upload a CSV, parse the contents of the file and create Account records, displaying some simple feedback for the user at the end. This is a really simple LWC to parse a CSV file and create records and it can be a starting point to a more robust solution.

The final result

I’ve seen some posts explaining how to parse CSV files and there were different solutions: parsing the CSV using an Apex method, aura components, LWC, Javascript methods doing some simple parse operations. In our case, we will use an existing library to parse the file and make our lives easier: Papa Parse. This library has good methods and configuration options to parse the CSV file. You can choose what is going to be the delimiter char, whether the file has a header or not, if the columns are quoted and by which char, and so on.

As this library accepts a File object as an input, we will use a lightning-input with the type “file” to get the file from the user. After selecting the file, the Papa parser will parse the file and return a list of objects, each object being a row from the file. To use the library, it’s necessary to upload the .js file as a static resource and import it to the LWC:

Here is the HTML part of the LWC:

When selecting the file, the following function will be executed to parse the CSV file:

The complete attribute is a callback function that receives an array of objects with the rows from the CSV file. With this, we have a getter to display the rows in a lightning-datatable so the user can have a preview of the rows. We are not limiting the number of records displayed, but consider doing this if you are going to deal with a large number of records. The getter:

Don’t mind the if(this.results[index]) as of now, its explanation comes later. There is a button to create the account records loaded from the CSV and displayed on the datatable. It will call the following function:

Here we are using the createRecord from the lightning/uiRecordApi to create the account records and a Promise.allSettled to have all the records created and get the results to be displayed on the datatable together with the records. You should have noticed that we are using (and defining) only two columns to create the records (Name and Description fields). You can change this part to accept more columns if necessary. I will improve this component in the future to have the columns configurable by the user.

We have defined a getter to transform the results in the way that we want and then use this info together with the rows so the data is displayed to the user. With the successfully created records, we display the record Ids. When there is an error, we display the error message.

Here is the entire JS controller:

In my next blog post, I will improve this component to dynamically get the fields from the Account object and let the user match the columns from the CSV file with the fields. Stay tuned!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Marco Almodova

Lead Salesforce Developer, Lightning Champion, 21x Salesforce Certified.