Up next in 10
Get the full source code of application here:
https://gist.github.com/gauti123456/1671e6639dfadf3143beda86a0e7aa96
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video we will look to build out
0:04
a mh2 base 64 converter web application
0:07
inside react chase you can see on your
0:10
screen this is actually the demo I'm
0:12
running it on Local
0:13
Host environment we have a choose file
0:16
button where you can select your jpg or
0:18
PNG image file as I select my image you
0:21
will see the image will be encoded into
0:23
Bas 64 code and it will be embedded
0:26
inside this text area and then you can
0:28
simply copy this
0:30
or you can clear it once again select
0:34
any other image so it will give you this
0:36
base 64 code it's a very simple
0:39
application all the source code will be
0:41
given in the description so now to get
0:43
started for building the user interface
0:46
I'm just using some bootstrap just
0:49
install this package bootstrap and react
0:54
bootstrap so this is actually the
0:56
command so simply install this
1:01
I have already installed these packages
1:02
so I will start the development server
1:05
so right here you'll be having a simple
1:07
functional component
1:09
and I will just include
1:12
bootstrap by the import statements so
1:15
you will see bootstrap has been
1:17
successfully included now we need to
1:19
have two State variables inside react CH
1:23
to keep track of the base 64 code so
1:26
base 64 set Bas 64 initially value we'll
1:31
be using the UST State hook it will be
1:33
nothing and secondly for keep track of
1:36
which file is selected by the user so
1:38
image file set image file initial value
1:43
will be
1:44
null so now we need to construct the
1:48
user interface so for the inside your
1:51
jsx we will use the
1:54
container element and we'll be giving a
1:57
bootstrap class of margin top
2:01
five so we'll use the call
2:08
module assigning the medium to
2:13
six align it it in the center position
2:16
text Center we're having a simple
2:19
heading which will say
2:21
image2 base
2:23
64
2:27
converter and we'll be giving a class
2:29
name name to it margin bottom
2:34
4 so if you just refresh your
2:37
application it will look something like
2:46
this uh then we need have a simple form
2:49
which where we will be allowing the user
2:51
to Simply select their image so form
2:55
label we having a simple
2:57
label select an image to convert
3:01
to base
3:04
64 then we will have a simple input
3:07
field so form
3:09
control so here the type will be of file
3:13
so we will allow the user to Simply
3:15
select any file so you'll only be
3:18
accepting image files so accepting we'll
3:20
say image/
3:24
star and we'll be binding an onchange
3:27
event handler so whenever you select any
3:29
file this event will fire
3:31
automatically so I will write a custom
3:33
function which will be handle image
3:37
change so we assign this on change event
3:40
handler so we just need to Define this
3:46
function so e parameter will
3:48
automatically be passed into it if you
3:52
refresh your browser you will see this
3:54
choose file button and then after this
3:57
we just need to have a
4:00
text area but before that we
4:03
also that's all that we need inside this
4:06
handle image we just need to get the
4:09
file that the user has selected by e.
4:12
target. files this will get access to
4:16
the file the user has selected and then
4:18
if it's a valid file then in that case
4:21
we need to convert this
4:23
into base 64 so set image file we set
4:26
the input file using the function of UST
4:30
State then we'll read this
4:33
file so we can use the file reader API
4:36
which is a very common way in JavaScript
4:39
how to load files we have this onload
4:43
and function so when the image is loaded
4:46
this call back function and here we will
4:51
simply use this set base
4:57
64 we will set the base 64 for whatever
5:00
is your result so reader. result so in
5:03
this way it will convert your image to
5:05
base
5:06
64 and just outside this we will say
5:11
reader dot read as data URL so this
5:14
function actually converts your image to
5:17
base 64 code we are providing the actual
5:19
image as an
5:21
argument now we can display this base 64
5:24
code which is present in this variable
5:27
which is uh base 64
5:30
so in a text area so right after your
5:33
form group ends right here you'll say
5:36
condition the Bas 64 code is available
5:39
in that case we just need to display
5:44
it so be giving a class name to it of
5:48
margin top three and inside this we will
5:51
have a label and it will simply say base
5:57
64 encoded a image
6:00
[Music]
6:01
and we'll have a simple text
6:06
area so here it will be as text
6:12
area and row I will
6:14
say 8 on
6:18
10 the size of your text area then the
6:20
value we simply say the base
6:23
64 variable and then it will only be
6:26
read only that's all and if you refresh
6:29
now now select any image and
6:32
uh you will see
6:35
that
6:36
the you can just expand
6:47
this so that base 64 code is showing
6:50
right here and uh in this
6:57
way you can build this simple
7:00
application
7:02
so thank you very much for watching this
7:05
video and
7:06
uh do check out my website as well free
7:09
mediat tools.com which contains thousand
7:12
of tools regarding audio video and image
7:15
and I will be seeing you in the next
7:16
video
#Online Media
#Other
#Other