Up next in 10
Build a React.js File Viewer to Render DOCX,PDF,Excel & CSV Using react-file-viewer in Browser
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/96b6704d0f83f9d60f0f480e53f21baf
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video we will talk about how
0:04
to render images videos doc files what
0:07
document files PDF files in the browser
0:10
using react chairs using a package react
0:13
file viewer this is actually the
0:15
application we will be building right
0:17
here you can see the demo right here we
0:19
have the choose file button where the
0:21
user can select either of these images
0:23
videos audio files or they can select
0:26
PDF or Word document files we have this
0:30
video button so depending upon which
0:31
file that you want to select you will
0:33
select it let's suppose I selected PDF
0:36
so now I can simply select a PDF file so
0:40
as soon as I select the PDF file you
0:42
will see the live preview it contains
0:44
two pages so this is the first page this
0:46
is the second page so in this way you
0:48
can renter the PDF documents and read
0:51
this in the browser and if same goes
0:54
with the word document if you select
0:55
Word document we can now select the word
0:59
document files and now the word document
1:01
file will show you can see it contains
1:04
uh formatting tables images as well so
1:09
you can just read the word document
1:11
files in the browser itself using this
1:14
uh package that I will show you in react
1:17
CHS and then same goes for the audio
1:20
file as well you can select any ex audio
1:23
file it will display like this same goes
1:26
with the video file you can display the
1:29
video file as
1:37
well so it will display the live preview
1:41
and same goes for images as
1:49
well so we will build out this
1:51
application and we will use a package
1:54
let me show you the package that is
1:57
there inside react is react viewer so if
2:01
you search for this package the very
2:04
first package which
2:08
comes this is actually the package here
2:10
react file viewer it's extendable file
2:13
viewer where you can supports multiple
2:15
extensions PDF CSV Excel file doc file
2:19
all such files are
2:21
supported alongside with the images as
2:26
well so extensible file viewer is that
2:29
and this command is really simple npmi
2:32
react file viewer I've already installed
2:34
this module so you can see 24,000 weekly
2:37
downloads so now to get started uh I
2:40
will write this from
2:41
scratch apart from that you also need to
2:44
install bootstrap I will be building the
2:47
user interface using the bootstrap so
2:49
react bootstrap and bootstrap so these
2:53
two packages are also required react
2:55
bootstrap and bootstrap so I've already
2:57
installed both these packages so I will
2:59
just start the development server
3:04
so so first of all we will make the
3:08
functional
3:09
component there is a shortcut which is
3:12
RFC so it will make this functional
3:14
component and if you see it will hoto
3:17
Auto reload and you will see if I make
3:19
changes it will automatically run so
3:22
first of all we do need to import the
3:24
base bootstrap CSS file so I've already
3:27
imported this at the top you'll see boot
3:30
CSS file and we also need to import
3:33
these components from react bootstrap
3:36
which is container class row class
3:39
column and form we have imported this
3:41
from react bootstrap so now we need to
3:44
in basically declare some two State
3:46
variables first variable will be
3:48
required for keeping track which
3:51
extension the user has selected so file
3:54
type set file type and we will be using
3:56
the UST State hook initial value will be
3:59
I will give this as image and the second
4:02
one is the actual file so what file the
4:04
user will select we need to keep track
4:06
of that also and for this also we will
4:08
have the UST State hook and initial
4:11
value here will be null so these two
4:13
variables we have declared right here
4:16
now coming back to the
4:19
jsx we need to render actually the
4:23
container class of bootstrap so we will
4:25
use that inside this we will have the
4:27
row tag
4:29
and inside we have the column we will
4:32
have simple heading here which will
4:34
simply say file
4:41
viewer
4:45
so after this we will have actually the
4:49
way by which the user can
4:53
select the files so we will have a file
4:56
input just attach these classes these
4:59
are also bootstrap classes margin
5:03
top four
5:05
and inside this we will have
5:10
column and then we will have the form
5:17
tag and then we will have the form label
5:20
here we will simply select the select
5:23
file type
5:35
so here after this label here uh we have
5:38
the div and we have this radio field so
5:43
we have checkbox here right here so you
5:45
will have different
5:48
choices so it should be in line so we
5:52
have put this attribute and label here
5:55
will be different choices given to the
5:58
user type will be of
6:01
radio and the value will be of
6:06
image
6:11
checked so if you refresh here you will
6:14
actually see a radio button appearing so
6:17
we can actually select this this is a
6:21
radio
6:24
button so we will basically attach a
6:28
condition right here it will only be
6:30
checked of the file type variable that
6:33
we declared if you see initial value we
6:36
have given is image so we are simply
6:38
checking that if the file type is triple
6:40
equal to image then only check this so
6:43
this will come out to be true because
6:45
the initial value that we put is image
6:48
so this condition will evaluate to true
6:50
so that's why it is checked and we will
6:53
also be binding an onchange event
6:55
handler so when you check this we will
6:57
execute this function this custom
6:59
function handle file type change we just
7:03
need to Define this function at the top
7:06
so we can simply say
7:13
here so when you basically hit the check
7:18
button this function will execute and
7:20
also e parameter will also be passed as
7:22
a argument
7:24
automatically so this we need to repeat
7:26
this
7:34
so we can
7:35
simply write like this and we can just
7:39
copy this and repeat
7:41
this for the video element audio and
7:45
then the PDF and the
7:51
talk so
7:55
this I can change here to video and uh
7:59
value will be
8:08
video and this one will be for
8:18
audio and this one will be for
8:26
PDF and last but not least we will have
8:29
for the word document file so
8:37
dox so if you refresh it now you will
8:40
see uh five radio buttons appearing side
8:43
by side uh initial initially the image
8:46
one will be selected by default and you
8:50
can actually select any of these buttons
8:53
but now we can't select you can see
8:55
there is a problem we need to Define
8:57
that function handle file type change we
9:01
haven't defined that function so what we
9:03
need to do inside this function whenever
9:06
user actually selects any of the element
9:09
we need to set that file type using that
9:12
hook function set file type and then we
9:15
need to whatever the user selects so we
9:17
can get this using e. target.
9:21
value and then if you just make this
9:26
change and now if you select
9:30
so now you can see you can select any of
9:32
these
9:34
choices so at one time you can only
9:36
select one element so this is actually
9:39
radio button so now this is perfectly
9:42
working so after selecting this we want
9:46
the user to upload a
9:48
file so that the they can see that file
9:52
in the
9:54
browser so for that we will have a input
9:58
field where user can select the file so
10:01
after it's ending right here we can
10:03
actually have a condition that if the
10:05
file type variable exist then only
10:10
display
10:14
this and inside this row we have the
10:18
column and inside this we will have the
10:21
form
10:26
tag we will again have a label
10:31
we'll simply say to the user that select
10:33
a
10:36
file and then form
10:41
control we will have different choices
10:43
here
10:47
type and here in the accept here we will
10:51
actually pass an object here we
10:54
can accept multiple file types so
11:00
so in order to mention that we need
11:04
to we have this
11:06
condition so this simply means that we
11:09
can accept all these extensions images
11:12
videos
11:19
PDF let me just paste
11:25
it so you can see we have this variable
11:28
we are checking it we are accepting
11:30
image video audio pdf and
11:33
Doc so after that we will attach a on
11:36
change to this also so when we select a
11:41
file this function will execute handle
11:44
file change so we just need to Define
11:46
this function
11:59
so here this e parameter will all uh
12:01
automatically be
12:08
passed and whatever the file is selected
12:12
by the
12:13
user e. Target
12:18
files and we will have if condition if
12:21
the file is valid in that case we need
12:24
to read the file so file
12:26
URL so we'll use this function url.
12:30
create object URL and then pass the
12:32
selected file and then here we'll be
12:34
setting the file using the hook
12:37
function file URL and here also when
12:42
they select the radio button we need to
12:44
reset the file set file to
12:48
null so this we need to do because they
12:52
are changing the extension by changing
12:54
the radio button that's why we need to
12:56
set the file to null in this hook
12:58
function and here we are setting the
13:01
hook function of the file to the file
13:05
URL so after you do this you will
13:09
actually
13:11
see so if you now select any image
13:15
file it is selected but when you
13:18
actually change it to R
13:22
Video it will be changed
13:29
so after this now to display this files
13:33
in the browser uh we now need to have
13:36
another rot
13:41
tag inside column we will
13:48
have the file
13:54
preview and inside this div tag we will
13:57
basically give a CSS prop property which
14:00
will
14:00
be border we'll give it a border here
14:04
which will be one pixel
14:08
solid this gray color and it'll also be
14:10
giving a padding of 10
14:16
pixel and inside this we will be
14:18
rendering
14:21
the we basically call this function
14:24
render file viewer and here we'll be
14:26
displaying the file so we need to Define
14:29
this function which will be responsible
14:32
for
14:34
displaying the files so render file
14:46
view so inside this we will first of all
14:49
check if the file is valid then only we
14:53
will if the file is not valid then in
14:56
that case we will simply return a
14:57
message to the user that that
15:01
please no file selected please upload a
15:05
file and here you will be simply be
15:08
having a condition if the file is either
15:11
PDF or
15:14
Doc in either of these cases so we
15:18
simply checking if it includes in the
15:20
file
15:22
type if the file is PDF or Word document
15:25
in that case we need to return
15:29
this file viewer you can directly use
15:31
this file
15:36
viewer this comes from the actual
15:40
library that we installed so we need to
15:42
import
15:44
this file
15:47
viewer and this comes
15:50
from react file viewer so this is
15:55
actually the library that we installed
15:57
and it contains this file viewer and we
15:59
are simply using
16:04
this and it
16:09
actually accept this parameter file type
16:13
and we'll be just be passing the file
16:15
type and the actual file path it takes
16:19
whatever file that you want to display
16:21
it is available in the file variable and
16:24
it also contains the error component as
16:27
well so here if any sort of error take
16:29
place we can display that
16:45
error uh so that's it and this handles
16:49
the cases for if your file is a PDF file
16:52
and if I just simply select a PDF file
16:56
you will see the PDF file will display
17:00
and if the file is the word document and
17:03
let me select that so you will see the
17:06
word document file will also display
17:08
right in the browser itself and you can
17:10
actually read the word document file so
17:13
in this way it handles the scenarios for
17:15
PDF and Doc now we will write the
17:17
scenarios for images videos and
17:21
audio 1 by one condition we will put
17:31
so by default this Library if I select
17:34
MH file right
17:37
here it doesn't support built-in
17:41
functionality for images so that's why
17:43
we need to
17:45
write explicitly we need to pass this
17:47
image tag and we are having a maximum
17:50
width of
17:52
100% so we are returning this image tag
17:55
right
17:57
here so now that image will
18:00
display same goes for video and audio as
18:06
well so in this way you
18:10
can return this video audio tag but
18:13
essentially this library that I showed
18:15
you is essentially for PDF and Word
18:17
document
18:19
files you can display video
18:23
audio essentially it is for PDF Doc and
18:27
CSV X as well so you can even display
18:30
CSV files and Excel files as
18:33
well if you have those files
18:40
available let me select uh let me
18:43
download a sample Excel file just to
18:46
show you Excel files as well
19:17
so in this way you can display using
19:20
this Library which is react file
19:23
Ur so thank you very much for watching
19:26
this video If you like this video then
19:28
please hit that like button subscribe
19:29
the channel and also do check out my
19:32
website as well free mediat tools.com
19:34
which contains thousands of free tools
19:36
regarding audio video and image and I
19:39
will be seeing you in the next video