Up next in 10
Build a React.js PapaParse Project to Parse and Render CSV Files in Browser Using Javascript
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/77834b28357c9688edd51c019f7e6624
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video we'll be looking at how to
0:04
integrate the papa pars library of
0:08
CSV parsing and showing it a CSV Viewer
0:13
so in react CH we will integrate this
0:15
Library so if you search for this
0:17
package which is p a p a p a
0:21
r Papa pars this is actually a powerful
0:24
CSV parsel library for JavaScript and
0:27
we'll be integrating it inside uh react
0:29
chairs we have this application where we
0:31
allow the user to Simply select the CSV
0:34
file and we can simply display the
0:36
content of CSV file in the browser you
0:38
can see we have three columns right here
0:40
we have different rows we are displaying
0:42
this content of comma separated value
0:44
right here and we have just Library Papa
0:47
pass and we will be integrating this so
0:50
now to get started we need to install
0:52
the
0:54
package so this is actually the name of
0:57
the library Papa pass which is a
1:00
powerful in browser CSV
1:03
parcel and uh if you want to integrate
1:05
it inside react ches so for specific
1:08
react CH application we have this
1:11
Library this is actually the package
1:13
react popup pars so we will integrate
1:17
this so you can see it has got 137,000
1:23
weekly download so the command is very
1:26
simple npmi react this one and we are
1:30
also using bootstrap for building the
1:32
interface so now to get
1:34
started just create a very basic react
1:37
CH functional component so it will
1:41
be then we will be including the
1:46
bootstrap CSS file at the top and for
1:51
making the user interface we will be
1:53
using react bootstrap which contains
1:56
premade components for bootstrap
1:58
container form button table alert these
2:01
bootstrap is not required for this
2:03
tutorial so we are just using it for
2:05
Designing the user interface and now for
2:07
this application we need to keep track
2:09
of which CSV file is selected for for
2:12
that we actually have this variable
2:15
State variable use state will use make
2:17
it and initial value will be empty array
2:20
the second variable we will have for the
2:25
headers so as you know in CSV file we
2:28
have headers so we are keep keeping
2:30
track of that also initial value will be
2:32
empty array and then we if any sort of
2:34
error take place then we have the
2:36
variable for error we can show the error
2:39
the initial value will be empty now we
2:41
have these three state variables we are
2:43
using U State hook of react Chase now
2:46
coming back to the jsx we now need to
2:49
design the interface using
2:51
the components that we included at the
2:55
top container which is a bootstrap
2:57
component we will be giving some some
3:00
bootstrap classes as
3:02
well inside this we will have an heading
3:05
which will simply say CSV file viewer
3:08
and we'll be giving a class name to it
3:11
just to align it in the center position
3:13
so text Center and then we will actually
3:16
show a form to the user so that they can
3:20
actually upload a CSV file and we giving
3:24
an ID to it of CSV file and a class name
3:29
of
3:32
so here we will actually have the label
3:36
and we'll simply say to the user that
3:38
upload a CSV
3:42
file and then we'll be having a
3:46
control input where this will be of type
3:53
file and we will be
3:55
accepting CSV file and we'll also be
3:59
binding onchange event handler so when
4:01
the file is selected by the user this
4:03
function will be executed handle file
4:05
upload so now we need to Define this
4:08
function which is handle file upload
4:11
right here
4:16
so so e parameter will automatically be
4:20
passed so if you try to refresh your
4:22
application you will see this input
4:25
field choose AC CSV file and after this
4:31
we
4:32
will if any sort of error take place we
4:35
can after this form here we can show the
4:37
error message using jsx so if any sort
4:40
of error there we using the alert
4:41
component danger and we are showing the
4:43
error message so right in this uh
4:47
handled file upload function first of
4:49
all we need to read the content of the
4:51
file for reading the file we actually
4:54
get e. target. files you will get access
4:57
to the file which is selected by the
4:59
user then we will simply check in this
5:02
if condition that if the file is not
5:05
selected by the user then we will show a
5:07
alert message that no file selected and
5:10
if the file is not a CSV file then we
5:12
simply say to the user that please
5:14
upload a valid CSV file so if both the
5:17
conditions are false in that case the
5:20
file is correct and you will set the
5:22
error to nothing so what does this mean
5:25
so if you try to select uh another file
5:31
you will see the Ser message please
5:32
upload a valid CSV file so now we will
5:36
use the papa ours CSV
5:41
parser so for doing this we will include
5:44
this module so Papa you can see it is
5:57
included so we can act include this
6:00
package using the import statement at
6:03
the
6:09
top which is this package so we included
6:12
this and now we can simply use it right
6:15
here and this contains a function which
6:18
is pass and here we'll pass the actual
6:20
file and it contains an object here if
6:23
you want to read the headers you would
6:25
put true here and just skip the empty
6:28
lines we don't want to read the empty
6:31
lines so you will set this Boolean
6:33
parameter to true and when the passing
6:36
is complete this call back function will
6:38
execute and we will get this results and
6:41
this call back function and here we will
6:42
simply compare that if results dot data.
6:47
length is equal to zero if all the data
6:50
is passed then it will simply set a
6:54
error message that no the CSV file is
6:57
empty
7:01
but in the else block if the CSV file
7:04
does contain some data then we set the
7:06
headers using this function which is
7:09
object.
7:11
Keys whatever comes which is
7:15
uh results.
7:18
data so this will be the headers headers
7:20
simply mean the columns after set you're
7:23
reading the columns you will simply set
7:26
the CSV data which will be results. data
7:31
so if you just console log it you will
7:33
actually see when you read the CSV file
7:36
it returns this callback function which
7:38
contains the information related to the
7:41
CSV file so if you inspect element now
7:44
go to the console you will receive this
7:46
object which is read by Papa par CSV
7:49
parcel library and you will contain
7:51
three properties the data errors or meta
7:55
so inside data you can see we have all
7:57
the data about the CSV file and now we
8:00
can display this data very easily using
8:04
jsx in react JS so now we can Loop
8:07
through after this we can Loop through
8:11
you can have this conditional jsx if CSV
8:15
data length is there is greater than
8:18
zero in that case we need to show the
8:21
data in a tabular structure so you'll
8:23
use the bootstrap tables component and
8:27
we apply the stripe class bordered class
8:31
hover
8:33
responsive also be giving a class name
8:36
to it which
8:41
is so you have a table row tag and it
8:46
will Loop through the columns here like
8:53
this and for embedding The Columns we
8:56
use the table header CL table heading
8:59
element and we would provide a key
9:01
parameter which is
9:02
index and we provide this
9:05
header and then after embedding this
9:08
columns we come to the table body so we
9:10
have the table body tag and then
9:13
whatever is our C CSV data we map each
9:17
row we have these two variables row and
9:19
row
9:20
index and we use the table row tag and
9:23
we again provide the key parameter which
9:26
will be the row
9:28
index and we just embed the actual
9:32
row so
9:35
again we need to
9:38
map
9:39
inside these headers if you see headers
9:44
map so for each header we have the
9:47
column
9:49
index so we have the table data tag and
9:53
right here we
9:55
have the call
9:57
index and the actual
10:10
row so here we are having our data
10:14
inside table data tag so this completes
10:16
the application and if you refresh
10:19
select your CSV file and you will see
10:22
all the data of CSV is displaying in a
10:24
tableau structure so in this way you can
10:26
use this package react Papa ours package
10:29
package to actually read and pass the
10:32
content of a CSV file and display it in
10:34
the browser really easily I've shown a
10:36
complete example in react cheers so
10:39
thank you very much for watching this
10:40
video please hit that like button
10:42
subscribe the channel and do check out
10:44
my website as well free mediat tools.com
10:46
which contains thousands of free tools
10:48
regarding audio video and image and I
10:51
will be seeing you in the next video