[Quick Guide] Parse CSV File in React JS and Next JS [With Code]

in our last video we have designed the UI for our CSV file selector and now in this video we are going to see how we can pass that CSV file after it is selected by the user I have also added an example folder in our project which will be available to you through GitHub it has two CSV files first one is the error test file which you can test if the CSV file selector is working perfectly fine or not and the proper error message is being displayed or not second file is an example CSV file that should work perfectly fine it also has RFC compliance I won't go deeper into what is RFC compliant you can simply Google it if you want to learn more about it but this is an RFC compliant CSV file so let's now get back to our component let's go to components and inside a header.jsx we'll create a function and call it constant on file change Handler it will receive an argument event so when user will select a file the file will be transferred to this function on file change Handler through our event and we will pass the CSV file through this event so let's now add this event handler to our input by going to our input and writing on change and we'll add this function over here click on Save and in order to test if the file is being selected or not what we can do is simply lock the event now since there will be lot of details on our event as well as on our Target we won't be logging everything in the event what we can log is event.target dot files this will have list of all the files that we can select but since we don't have multi select we only have a single file selection we'll use zero index of this file and log it to see if the file is being selected or not let's save this now and before we make any changes let's start our development server and I'll simply Run npm Run start with this we have our application running I'll simply inspect it and go to console to see what is the console log when I select a file now I'll go to file Chooser and open the file selector I'm inside my file selector and over here as you can see I can go to example folder where I have my CAC files I'll check this error test file later but right now I'll select this RFC compliant CSV file and as you can see the file has been logged over here file has several properties logged over here such as last modified timestamp last modified date file name size type and related information which we cannot see over here but if you noticed when I was selecting the file there were a lot of files being shown for selection such as JavaScript and HTML as well to limit that we will add accept property to our input element so that it only accepts CSV file or XLS or related file types in order to find the acceptable file types I'll simply use Google in order to find those file types which should be acceptable for CSV file now going back to our code what I'll do is I'll create a constant and name it acceptable CSV file types and I'll add accept property to our input and I'll add this constant over here I am doing this so that I don't have to make changes in j6 which can lead us to a lot of Errors at runtime or we might miss something while editing it in j6 so it's good practice to use constants now I'll just use the file types that I have copied from Google for acceptable CSC file types it supports Excel spreadsheets and other type formats I'll also add dot CSC over here in case it doesn't recognize it by default I'll save it and I'll get back to our browser refresh this and now if I select my files you can see when the file browser opens up the csvx file is not able to select but I can still select my CSU file so that's a good thing that we can do right now and I click on open and go to inspect I can see the file is being logged so that works perfectly fine first next thing that we need to do is we need to pass the file that we have just uploaded and to do that we'll be using a third party Library called Papa parser to do that you can go to Papa parts.com or you can simply Google the page or you can find the npm documentation I'll be going through papaparts.com as you can see this Library makes a work lot easier you can pass a CSV file or you can convert your data to CSV file and reduce your additional work it can also handle large files and pass them in stream format where you will receive data in chunks as you can see over here each step you will receive a chunk of data but we don't have this big of file we will be simply using this one and let's also open the documentation for it to see how we can begin with this you can simply go into more details of how to advance this Papa passer but still I will be beginning with installation step first and let's find the installation command on their home page if you go to the bottom of screen you will find two commands first one is to install Papa bars using npm install or you can use power as well you can even use yarn if you want to install Papa Parts even though the command is not listed over here I'll simply copy the First Command and if you have installed Papa pass and now if I get back to my visual studio code I'll stop the server first and then paste the command that I've copied and click on enter I'll start my server once again so our application still runs fine now I'll go to Papa pass official website and I'll copy the command where I can parse the CSV file so we have this command Papa dot parse let's copy this command and going back to my code inside our own file change Handler I'll add this command over here but we still don't have this Papa passer over here so I'll just import it from Papa parser all right so we have this over here and I'll pass the file to it by simply copying the file that we have logged I'll use a constant CSV file and then I'll pass this CSC file constant to our Papa pass let's save this also I can remove this log now and once again let's check our UI and select the CSC file so I'm on my application browser and if I select a CSV file now let's open the inspect element first go to console and now if I select the CSV file you can see the file data has been passed if you see the data carefully you will see that we have a row with empty data so in order to avoid empty lines what you can do is go to Papa pass documentation and in the unparse config option you will find a property skip empty lines this is an option which you can use in order to skip the empty lens so let's copy this and just above our complete function call we'll add Skip empty lines and make it true let's save this now and check if the file selection Works without any empty lines or not so if I get back to my application and select a CSV file now and open it as you can see now we don't have the fourth empty row which is the beauty of using Papa pass if you want to go into the deeper site you can write your own code to pass CSV file using file as well as read text file and other functions that are available through file but if you do so you will have to go into every error handling and other file handling method yourself and this third party Library makes our work lot easier as you can see everything in this file is passed just like an array of each row even the header itself like I have certain properties first name last name email phone number title and occupation in my header and what if I wanted to have this entire CSV file pass like a Json object I can do it simply by going back to my code editor and if I add a configuration option with header and make it true let's save this and if I get back to my application and refresh this now and select a CSV file you can see our headers are now our keys as well as are each row after the header is now a separate value so in this way you can easily pass your file in Json format or in the format of arrays so that's it for this video and in our next video we will prepare the UI in order to show a table and show this data over there

Channel: Developers Hive

Views: 4,006

Keywords: parse csv react, read csv file in react, csv, reactjs, import csv file in react js, upload csv file in react js, react csv importer, react csv to table, react csv file upload, react csv, papaparse react, papaparse csv to json, react, javascript

Id: 3jDCr_nhUO0

Length: 8min 22sec (502 seconds)

Published: Fri May 12 2023