Up next in 10
Build a React.js Drag and Drop Files With Live Preview and Size Using react- dropzone Library
Jan 9, 2025
Get the full source code of application here: https://gist.github.com/gauti123456/e385b9527d8c602d47fd347836bdda67
View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video we will look at a
0:04
package inside react GS which allows you
0:06
to drag and drop your files and it will
0:09
show you live preview of the file and
0:12
the size of the file as well so this is
0:14
actually the application very simple
0:16
example we have a drag and drop
0:18
interface either we can click or drag
0:20
and drop your files so we can select
0:23
these multiple image files so you will
0:25
see one by one it will show you a short
0:27
little preview of the image that you
0:29
select
0:30
then the file name and then the size of
0:32
the file also we have a remove Button as
0:34
well if you want to remove this file so
0:37
it basically shows you a list of files
0:40
so I have not styled this interface I'm
0:44
just using uh the say simple example you
0:47
can style this using bootstrap to
0:49
actually look good so then we can remove
0:51
any file as well from
0:53
this so the package name is uh react
0:57
drop zone so if you go to this
1:01
npmjs.com website and just search for
1:04
this package which is react drop so so
1:09
this is actually a simple HTML 5 drag
1:11
and
1:12
drop uh package inside react
1:16
CHS almost 3 million weekly downloads
1:20
are there so this is actually the
1:21
command
1:23
here so I have already installed this
1:26
package so now to get started just make
1:29
a simple functional component
1:32
and right here at the top we need to
1:36
import the use Drop Zone hook which is
1:39
available inside this
1:44
package so after this we need to have
1:47
some State variables first of all to
1:49
keep track of how many files are
1:50
selected so this will be a simple use
1:54
State empty array and then for keeping
1:58
track of any error so error set
2:02
error so again use state so we have
2:05
these two variables declared so this is
2:07
a files and this is
2:09
error so now in the interface we just
2:13
need a simple section where we allow the
2:16
user to drag and drop the
2:19
files so now to initialize this uh
2:22
package right
2:26
here we will be using this uh in the
2:29
curly bracket so inside this diff
2:33
section you will simply write here dot
2:37
dot dot and get root
2:42
props so this is actually a function
2:44
right
2:46
here so this function will be coming
2:49
from this package so
2:52
just get root props get input props and
2:58
also is dragged active
3:01
so all these three
3:04
properties methods will be coming from
3:06
this package so we just need to use drop
3:09
zone and initialize this uh drag and
3:12
drop
3:13
library on
3:16
drop so this basically means that we are
3:19
accepting the files to be drag and drop
3:23
and here you can accept any sort of
3:25
extension of the files so here you can
3:28
mention which files you will be
3:30
accepting so we will be accepting images
3:32
PDF Word document file text file and
3:36
here you can even provide the maximum
3:38
size that you will be accepting so this
3:41
will be 5 megabytes so I will just it's
3:45
uh this number is in bytes so this is
3:48
essentially 5 megabytes so we have
3:50
initialized the drag and drop Library by
3:53
providing these three properties and
3:55
then we are getting these methods which
3:57
we can directly use in the actual
4:01
HTML so in this way you can initialize
4:05
this in the input field we will be
4:08
having this get input props
4:18
method and then inside this we will
4:22
actually have the paragraph where we
4:23
will allow the user to drag and draft
4:27
the files so we will have this property
4:30
is dragged active so if this property
4:32
evolutes to true in that case we will be
4:35
changing the text to drop the files
4:38
here if the property is false in that
4:41
case we will
4:44
say drag and draw files here or you can
4:48
also click to select
4:50
files so if you refresh your browser you
4:53
will actually see
5:00
so it is saying that on drop is not
5:02
defined so this function that you see on
5:07
drop so we do need to Define this
5:09
function this function will execute as
5:12
soon as you put the file in the
5:15
interface so we just need to Define this
5:18
function it's a call back function so on
5:22
draw and we basically use this use
5:25
callback
5:26
hook so this callback function will have
5:29
the files that you select or rejected
5:37
files so if you just refresh your
5:39
browser you will see this heading right
5:40
here drag and drop files or you can
5:43
click it so we can select the
5:50
files so you can see uh the console log
5:53
statements let me just put some files
5:56
right
5:58
here so so if you open your browser
6:01
console you will see you will receive
6:03
this array which will contain all the
6:06
files that you
6:08
selected so with the information that
6:10
they have you can see file name
6:13
everything you can see the information
6:15
the size of the file the name of the
6:17
file the type it's a PNG image file so
6:21
all sort of information is available to
6:25
us so now we need to display this in the
6:28
browser so we will simply first of all
6:29
set the error to
6:36
nothing and this rejected files also
6:39
comes because if the file is not
6:41
accepted then it comes under rejected
6:44
files so we can even display that as
6:49
well simply the rejected files are there
6:52
in that case you will display a simple
6:55
message that your file is too large or
6:57
is of invalid type
7:00
or in the else block if the file is
7:02
valid in that case we will
7:05
set the files to the accepted
7:12
files and it will not be dependent upon
7:15
anything so just write these square
7:17
brackets right here so this completes
7:19
this call back function now we can
7:21
display these files which the user will
7:25
select right after this we can have this
7:29
files
7:31
length is greater than zero in that case
7:33
only display the files in
7:37
the we simply have a heading this is
7:41
your uploaded
7:45
files so we will use the map operator
7:49
and for each
7:52
file we will actually have a Alli tag
7:55
we'll be giving a key parameter to the
7:58
index and and inside this we will show
8:00
the property of the file so we will
8:02
basically
8:08
show so if the image type is an image
8:11
then only we'll show the image so we can
8:14
show the image in the image
8:17
tag so we can attach the source
8:19
parameter
8:20
to so here we'll be writing a simple
8:23
function where it will show the short
8:25
little preview of the file
8:33
this is your file
8:34
name and we will basically style it just
8:38
give it a image of Max width of 100
8:40
pixel and a Max height of 100 pixel so
8:45
now we need to Define this function
8:48
which will actually generate a simple
8:50
preview of the file that you
8:52
selected so this is generate preview
9:01
so in inside this function we just need
9:03
to display the image so it'll be
9:05
comparing that if the file is an image
9:08
then in that
9:12
case we need to return the URL so url.
9:16
create object URL so this will return
9:19
the base 64 code of the
9:24
image so if you just refresh your
9:26
browser and select a series of images
9:30
PNG or
9:35
jpg so is saying that the file at line
9:41
number so this file will be coming as an
9:44
argument to this function so we haven't
9:46
passed it so we will see we are passing
9:48
it so once again refresh and try to
9:52
select a series of
9:55
files so you'll see the images preview
9:58
will be
10:03
displayed so now you can even display
10:05
the size of the image the file name all
10:08
sort of
10:12
information so just after this in the
10:15
paragraph you can simply say the file
10:18
name like this
10:21
and then we can even get the size of the
10:24
file by the size property and we can get
10:29
it in kilobytes by dividing it by
10:38
1024 so if you refresh your browser now
10:41
you will see the file name and the size
10:43
as well you will see
10:45
that for each file that you select you
10:47
will see the file name short little
10:49
preview and the size of the file as
10:51
well so this is actually the library
10:54
react dropo you can integrate with any
10:57
project that you are building if you
11:00
want to receive files from the user it's
11:02
a great way by which you can receive it
11:04
either they can drag and drop or they
11:06
can select it from their file system so
11:10
thank you very much for watching this
11:11
video and do check out my website as
11:13
well freem mediat tools.com which
11:15
contains thousands of free tools
11:17
regarding audio video and image and I
11:20
will be seeing you in the next video
#Programming
#Web Design & Development