https://angularfirebase.com/lessons/drag-and-drop-file-uploads-to-firebase-storage/

Learn how to create a dropzone-style file uploading feature in your Angular 4 app to Firebase Storage on the backend.
2024-02-04T08:32:50.031Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
9b71c286-4e8c-4b7f-ba03-8a23224b8d1a
10812b600ac833e1abc18a9826f1cdc76282f854d0a5fe249ed259a547ae4cc1
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In this episode, we're going to build a drag and drop file upload feature that uploads the file to Firebase Storage.
There's already several file upload packages for Angular 4 and Angular 2, such as dropzone.
Js and others, But none of them tie in easily with Firebase Storage, and it's relatively straightforward to do the entire thing from scratch, which I'll show you how to do in this lesson.
Let's get started by building the service.
I have another lesson that goes through Firebase file uploads in more detail.
For now, I'm just gonna run through the bare minimum code that's needed to get Angular working with Firebase Storage.
First, we define an upload Class that models the data we want to send to the database.
In this example, we build the object by sending it a JavaScript file object to the constructor.
In the upload service, we import this class as well as the AngularFire 2 package.
And we also need to import the entire Firebase SDK because file uploads aren't supported at this point by the AngularFire 2 package.
Now we create a function to handle the upload task.
It's going to use the Firebase API to create a Promise which we can use to monitor the status of the upload itself.
When the upload task is complete, it'll save some information about the file to the real time database, most importantly, the download URL, which we can use to access the file.
Now we can start building the attribute directive.
In this case, we go with an attribute directive over and because the functionality itself doesn't need an actual HTML template.
Inside the directive, we're gonna use event emitter, Host listener and output.
We use a combination of output and EventEmitter to create our own Custom events that we can send to other components in the app.
In this case, we create a files dropped event, which will send a JavaScript file list object to a parent component.
The file list is just the raw files that the user had dropped into that element.
We can use host listener to tie in to regular JavaScript events.
In this case, we're interested in listening to the drop event, which will occur anytime a user drops files onto the host element.
It's important that we tell the event to prevent the default behavior because otherwise, it's gonna try to redirect to the local URL of that file.
The event has a data transfer attribute that we can use to obtain the file list.
Once we have this file list in a variable, we can just Emit it through our event emitter.
Now we also wanna create a separate custom event that will tell us whether or not the user is hovering files over the file upload zone.
We need this information because we wanna add a different CSS class whenever the user has files hovered over the element.
So we'll start by adding 2 more host listeners for the drag leave and the drag enter events.
And And on the drag enter event, you also wanna prevent the default behavior.
A separate custom event called files hovered is created, which We'll just emit a boolean value, true or false, whenever the user is hovering files over the element.
Now that we have the directive emitting the files, we need to have the parent component listen for those events, and then handle the file uploads with the service.
We're using Lodash to help loop over files with less JavaScript.
Our function simply loops over the file list and for each file in that list, it will trigger the upload in the service to send that file to Firebase storage.
We also declare a separate variable and function to keep track of whether or not files are hovered over the drops on at any given point.
In the template, we start by adding a basic progress bar, which was covered in more detail in my first file upload video.
Then we add the attribute directive to a div.
From there, we can listen to the custom events that We define in the directive, and when those events occur, we trigger the functions that were defined in the component.
So in this case when the user drops files onto the directive it's going to trigger that handle upload function and that's gonna sequentially Actually, upload those files to Firebase storage.
When the fileshovered event occurs, we just toggle that Boolean variable, And then we can use the ng class directive to display a conditional class whenever the files are hovered.
In this case, the div just turns from a dashed border to a solid bright blue border.
That covers the basics of drag and drop file uploads.
Some other things you might consider are limiting the file size.
For example, throwing an error if the user tries to upload a really large file or limiting the file uploads to only certain types, for example, if you only wanted to have images uploaded to your app.
That's it for this episode.
If you found the video helpful, please like and subscribe.
And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com.
For just a few bucks a month, you'll get access view exclusive content as well as free 1 on 1 project consulting.
Thanks for watching, and I'll see you next time.

Speaker 0: In this episode, we're going to build a drag and drop file upload feature that uploads the file to Firebase Storage. There's already several file upload packages for Angular 4 and Angular 2, such as dropzone. Js and others, But none of them tie in easily with Firebase Storage, and it's relatively straightforward to do the entire thing from scratch, which I'll show you how to do in this lesson. Let's get started by building the service. I have another lesson that goes through Firebase file uploads in more detail.

For now, I'm just gonna run through the bare minimum code that's needed to get Angular working with Firebase Storage. First, we define an upload Class that models the data we want to send to the database. In this example, we build the object by sending it a JavaScript file object to the constructor. In the upload service, we import this class as well as the AngularFire 2 package. And we also need to import the entire Firebase SDK because file uploads aren't supported at this point by the AngularFire 2 package.

Now we create a function to handle the upload task. It's going to use the Firebase API to create a Promise which we can use to monitor the status of the upload itself. When the upload task is complete, it'll save some information about the file to the real time database, most importantly, the download URL, which we can use to access the file. Now we can start building the attribute directive. In this case, we go with an attribute directive over and because the functionality itself doesn't need an actual HTML template.

Inside the directive, we're gonna use event emitter, Host listener and output. We use a combination of output and EventEmitter to create our own Custom events that we can send to other components in the app. In this case, we create a files dropped event, which will send a JavaScript file list object to a parent component. The file list is just the raw files that the user had dropped into that element. We can use host listener to tie in to regular JavaScript events.

In this case, we're interested in listening to the drop event, which will occur anytime a user drops files onto the host element. It's important that we tell the event to prevent the default behavior because otherwise, it's gonna try to redirect to the local URL of that file. The event has a data transfer attribute that we can use to obtain the file list. Once we have this file list in a variable, we can just Emit it through our event emitter. Now we also wanna create a separate custom event that will tell us whether or not the user is hovering files over the file upload zone.

We need this information because we wanna add a different CSS class whenever the user has files hovered over the element. So we'll start by adding 2 more host listeners for the drag leave and the drag enter events. And And on the drag enter event, you also wanna prevent the default behavior. A separate custom event called files hovered is created, which We'll just emit a boolean value, true or false, whenever the user is hovering files over the element. Now that we have the directive emitting the files, we need to have the parent component listen for those events, and then handle the file uploads with the service.

We're using Lodash to help loop over files with less JavaScript. Our function simply loops over the file list and for each file in that list, it will trigger the upload in the service to send that file to Firebase storage. We also declare a separate variable and function to keep track of whether or not files are hovered over the drops on at any given point. In the template, we start by adding a basic progress bar, which was covered in more detail in my first file upload video. Then we add the attribute directive to a div.

From there, we can listen to the custom events that We define in the directive, and when those events occur, we trigger the functions that were defined in the component. So in this case when the user drops files onto the directive it's going to trigger that handle upload function and that's gonna sequentially Actually, upload those files to Firebase storage. When the fileshovered event occurs, we just toggle that Boolean variable, And then we can use the ng class directive to display a conditional class whenever the files are hovered. In this case, the div just turns from a dashed border to a solid bright blue border. That covers the basics of drag and drop file uploads.

Some other things you might consider are limiting the file size. For example, throwing an error if the user tries to upload a really large file or limiting the file uploads to only certain types, for example, if you only wanted to have images uploaded to your app. That's it for this episode. If you found the video helpful, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com.

For just a few bucks a month, you'll get access view exclusive content as well as free 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
In this episode, we're going to build a drag and drop file upload feature that uploads the file to Firebase Storage. There's already several file upload packages for Angular 4 and Angular 2, such as dropzone. Js and others, But none of them tie in easily with Firebase Storage, and it's relatively straightforward to do the entire thing from scratch, which I'll show you how to do in this lesson. Let's get started by building the service. I have another lesson that goes through Firebase file uploads in more detail. For now, I'm just gonna run through the bare minimum code that's needed to get Angular working with Firebase Storage. First, we define an upload Class that models the data we want to send to the database. In this example, we build the object by sending it a JavaScript file object to the constructor. In the upload service, we import this class as well as the AngularFire 2 package. And we also need to import the entire Firebase SDK because file uploads aren't supported at this point by the AngularFire 2 package. Now we create a function to handle the upload task. It's going to use the Firebase API to create a Promise which we can use to monitor the status of the upload itself. When the upload task is complete, it'll save some information about the file to the real time database, most importantly, the download URL, which we can use to access the file. Now we can start building the attribute directive. In this case, we go with an attribute directive over and because the functionality itself doesn't need an actual HTML template. Inside the directive, we're gonna use event emitter, Host listener and output. We use a combination of output and EventEmitter to create our own Custom events that we can send to other components in the app. In this case, we create a files dropped event, which will send a JavaScript file list object to a parent component. The file list is just the raw files that the user had dropped into that element. We can use host listener to tie in to regular JavaScript events. In this case, we're interested in listening to the drop event, which will occur anytime a user drops files onto the host element. It's important that we tell the event to prevent the default behavior because otherwise, it's gonna try to redirect to the local URL of that file. The event has a data transfer attribute that we can use to obtain the file list. Once we have this file list in a variable, we can just Emit it through our event emitter. Now we also wanna create a separate custom event that will tell us whether or not the user is hovering files over the file upload zone. We need this information because we wanna add a different CSS class whenever the user has files hovered over the element. So we'll start by adding 2 more host listeners for the drag leave and the drag enter events. And And on the drag enter event, you also wanna prevent the default behavior. A separate custom event called files hovered is created, which We'll just emit a boolean value, true or false, whenever the user is hovering files over the element. Now that we have the directive emitting the files, we need to have the parent component listen for those events, and then handle the file uploads with the service. We're using Lodash to help loop over files with less JavaScript. Our function simply loops over the file list and for each file in that list, it will trigger the upload in the service to send that file to Firebase storage. We also declare a separate variable and function to keep track of whether or not files are hovered over the drops on at any given point. In the template, we start by adding a basic progress bar, which was covered in more detail in my first file upload video. Then we add the attribute directive to a div. From there, we can listen to the custom events that We define in the directive, and when those events occur, we trigger the functions that were defined in the component. So in this case when the user drops files onto the directive it's going to trigger that handle upload function and that's gonna sequentially Actually, upload those files to Firebase storage. When the fileshovered event occurs, we just toggle that Boolean variable, And then we can use the ng class directive to display a conditional class whenever the files are hovered. In this case, the div just turns from a dashed border to a solid bright blue border. That covers the basics of drag and drop file uploads. Some other things you might consider are limiting the file size. For example, throwing an error if the user tries to upload a really large file or limiting the file uploads to only certain types, for example, if you only wanted to have images uploaded to your app.
That's it for this episode. If you found the video helpful, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. For just a few bucks a month, you'll get access view exclusive content as well as free 1 on 1 project consulting.
youtube
streaming
podcasts
Thanks for watching, and I'll see you next time.
In this episode, we're going to build a drag and drop file upload feature that uploads the file to Firebase Storage. There's already several file upload packages for Angular 4 and Angular 2, such as dropzone. Js and others, But none of them tie in easily with Firebase Storage, and it's relatively straightforward to do the entire thing from scratch, which I'll show you how to do in this lesson. Let's get started by building the service. I have another lesson that goes through Firebase file uploads in more detail. For now, I'm just gonna run through the bare minimum code that's needed to get Angular working with Firebase Storage. First, we define an upload Class that models the data we want to send to the database. In this example, we build the object by sending it a JavaScript file object to the constructor. In the upload service, we import this class as well as the AngularFire 2 package. And we also need to import the entire Firebase SDK because file uploads aren't supported at this point by the AngularFire 2 package. Now we create a function to handle the upload task. It's going to use the Firebase API to create a Promise which we can use to monitor the status of the upload itself. When the upload task is complete, it'll save some information about the file to the real time database, most importantly, the download URL, which we can use to access the file. Now we can start building the attribute directive. In this case, we go with an attribute directive over and because the functionality itself doesn't need an actual HTML template. Inside the directive, we're gonna use event emitter, Host listener and output. We use a combination of output and EventEmitter to create our own Custom events that we can send to other components in the app. In this case, we create a files dropped event, which will send a JavaScript file list object to a parent component. The file list is just the raw files that the user had dropped into that element. We can use host listener to tie in to regular JavaScript events. In this case, we're interested in listening to the drop event, which will occur anytime a user drops files onto the host element. It's important that we tell the event to prevent the default behavior because otherwise, it's gonna try to redirect to the local URL of that file. The event has a data transfer attribute that we can use to obtain the file list. Once we have this file list in a variable, we can just Emit it through our event emitter. Now we also wanna create a separate custom event that will tell us whether or not the user is hovering files over the file upload zone. We need this information because we wanna add a different CSS class whenever the user has files hovered over the element. So we'll start by adding 2 more host listeners for the drag leave and the drag enter events. And And on the drag enter event, you also wanna prevent the default behavior. A separate custom event called files hovered is created, which We'll just emit a boolean value, true or false, whenever the user is hovering files over the element. Now that we have the directive emitting the files, we need to have the parent component listen for those events, and then handle the file uploads with the service. We're using Lodash to help loop over files with less JavaScript. Our function simply loops over the file list and for each file in that list, it will trigger the upload in the service to send that file to Firebase storage. We also declare a separate variable and function to keep track of whether or not files are hovered over the drops on at any given point. In the template, we start by adding a basic progress bar, which was covered in more detail in my first file upload video. Then we add the attribute directive to a div. From there, we can listen to the custom events that We define in the directive, and when those events occur, we trigger the functions that were defined in the component. So in this case when the user drops files onto the directive it's going to trigger that handle upload function and that's gonna sequentially Actually, upload those files to Firebase storage. When the fileshovered event occurs, we just toggle that Boolean variable, And then we can use the ng class directive to display a conditional class whenever the files are hovered. In this case, the div just turns from a dashed border to a solid bright blue border. That covers the basics of drag and drop file uploads. Some other things you might consider are limiting the file size. For example, throwing an error if the user tries to upload a really large file or limiting the file uploads to only certain types, for example, if you only wanted to have images uploaded to your app. That's it for this episode. If you found the video helpful, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. For just a few bucks a month, you'll get access view exclusive content as well as free 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
In
in
this
this
episode,
episode
we're
we're
going
going
to
to
build
build
a
a
drag
drag
and
and
drop
drop
file
file
upload
upload
feature
feature
that
that
uploads
uploads
the
the
file
file
to
to
Firebase
firebase
Storage.
storage
There's
there's
already
already
several
several
file
file
upload
upload
packages
packages
for
for
Angular
angular
4
4
and
and
Angular
angular
2,
2
such
such
as
as
dropzone.
dropzone
Js
js
and
and
others,
others
But
but
none
none
of
of
them
them
tie
tie
in
in
easily
easily
with
with
Firebase
firebase
Storage,
storage
and
and
it's
it's
relatively
relatively
straightforward
straightforward
to
to
do
do
the
the
entire
entire
thing
thing
from
from
scratch,
scratch
which
which
I'll
i'll
show
show
you
you
how
how
to
to
do
do
in
in
this
this
lesson.
lesson
Let's
let's
get
get
started
started
by
by
building
building
the
the
service.
service
I
i
have
have
another
another
lesson
lesson
that
that
goes
goes
through
through
Firebase
firebase
file
file
uploads
uploads
in
in
more
more
detail.
detail
For
for
now,
now
I'm
i'm
just
just
gonna
gonna
run
run
through
through
the
the
bare
bare
minimum
minimum
code
code
that's
that's
needed
needed
to
to
get
get
Angular
angular
working
working
with
with
Firebase
firebase
Storage.
storage
First,
first
we
we
define
define
an
an
upload
upload
Class
class
that
that
models
models
the
the
data
data
we
we
want
want
to
to
send
send
to
to
the
the
database.
database
In
in
this
this
example,
example
we
we
build
build
the
the
object
object
by
by
sending
sending
it
it
a
a
JavaScript
javascript
file
file
object
object
to
to
the
the
constructor.
constructor
In
in
the
the
upload
upload
service,
service
we
we
import
import
this
this
class
class
as
as
well
well
as
as
the
the
AngularFire
angularfire
2
2
package.
package
And
and
we
we
also
also
need
need
to
to
import
import
the
the
entire
entire
Firebase
firebase
SDK
sdk
because
because
file
file
uploads
uploads
aren't
aren't
supported
supported
at
at
this
this
point
point
by
by
the
the
AngularFire
angularfire
2
2
package.
package
Now
now
we
we
create
create
a
a
function
function
to
to
handle
handle
the
the
upload
upload
task.
task
It's
it's
going
going
to
to
use
use
the
the
Firebase
firebase
API
api
to
to
create
create
a
a
Promise
promise
which
which
we
we
can
can
use
use
to
to
monitor
monitor
the
the
status
status
of
of
the
the
upload
upload
itself.
itself
When
when
the
the
upload
upload
task
task
is
is
complete,
complete
it'll
it'll
save
save
some
some
information
information
about
about
the
the
file
file
to
to
the
the
real
real
time
time
database,
database
most
most
importantly,
importantly
the
the
download
download
URL,
url
which
which
we
we
can
can
use
use
to
to
access
access
the
the
file.
file
Now
now
we
we
can
can
start
start
building
building
the
the
attribute
attribute
directive.
directive
In
in
this
this
case,
case
we
we
go
go
with
with
an
an
attribute
attribute
directive
directive
over
over
and
and
because
because
the
the
functionality
functionality
itself
itself
doesn't
doesn't
need
need
an
an
actual
actual
HTML
html
template.
template
Inside
inside
the
the
directive,
directive
we're
we're
gonna
gonna
use
use
event
event
emitter,
emitter
Host
host
listener
listener
and
and
output.
output
We
we
use
use
a
a
combination
combination
of
of
output
output
and
and
EventEmitter
eventemitter
to
to
create
create
our
our
own
own
Custom
custom
events
events
that
that
we
we
can
can
send
send
to
to
other
other
components
components
in
in
the
the
app.
app
In
in
this
this
case,
case
we
we
create
create
a
a
files
files
dropped
dropped
event,
event
which
which
will
will
send
send
a
a
JavaScript
javascript
file
file
list
list
object
object
to
to
a
a
parent
parent
component.
component
The
the
file
file
list
list
is
is
just
just
the
the
raw
raw
files
files
that
that
the
the
user
user
had
had
dropped
dropped
into
into
that
that
element.
element
We
we
can
can
use
use
host
host
listener
listener
to
to
tie
tie
in
in
to
to
regular
regular
JavaScript
javascript
events.
events
In
in
this
this
case,
case
we're
we're
interested
interested
in
in
listening
listening
to
to
the
the
drop
drop
event,
event
which
which
will
will
occur
occur
anytime
anytime
a
a
user
user
drops
drops
files
files
onto
onto
the
the
host
host
element.
element
It's
it's
important
important
that
that
we
we
tell
tell
the
the
event
event
to
to
prevent
prevent
the
the
default
default
behavior
behavior
because
because
otherwise,
otherwise
it's
it's
gonna
gonna
try
try
to
to
redirect
redirect
to
to
the
the
local
local
URL
url
of
of
that
that
file.
file
The
the
event
event
has
has
a
a
data
data
transfer
transfer
attribute
attribute
that
that
we
we
can
can
use
use
to
to
obtain
obtain
the
the
file
file
list.
list
Once
once
we
we
have
have
this
this
file
file
list
list
in
in
a
a
variable,
variable
we
we
can
can
just
just
Emit
emit
it
it
through
through
our
our
event
event
emitter.
emitter
Now
now
we
we
also
also
wanna
wanna
create
create
a
a
separate
separate
custom
custom
event
event
that
that
will
will
tell
tell
us
us
whether
whether
or
or
not
not
the
the
user
user
is
is
hovering
hovering
files
files
over
over
the
the
file
file
upload
upload
zone.
zone
We
we
need
need
this
this
information
information
because
because
we
we
wanna
wanna
add
add
a
a
different
different
CSS
css
class
class
whenever
whenever
the
the
user
user
has
has
files
files
hovered
hovered
over
over
the
the
element.
element
So
so
we'll
we'll
start
start
by
by
adding
adding
2
2
more
more
host
host
listeners
listeners
for
for
the
the
drag
drag
leave
leave
and
and
the
the
drag
drag
enter
enter
events.
events
And
and
And
and
on
on
the
the
drag
drag
enter
enter
event,
event
you
you
also
also
wanna
wanna
prevent
prevent
the
the
default
default
behavior.
behavior
A
a
separate
separate
custom
custom
event
event
called
called
files
files
hovered
hovered
is
is
created,
created
which
which
We'll
we'll
just
just
emit
emit
a
a
boolean
boolean
value,
value
true
true
or
or
false,
false
whenever
whenever
the
the
user
user
is
is
hovering
hovering
files
files
over
over
the
the
element.
element
Now
now
that
that
we
we
have
have
the
the
directive
directive
emitting
emitting
the
the
files,
files
we
we
need
need
to
to
have
have
the
the
parent
parent
component
component
listen
listen
for
for
those
those
events,
events
and
and
then
then
handle
handle
the
the
file
file
uploads
uploads
with
with
the
the
service.
service
We're
we're
using
using
Lodash
lodash
to
to
help
help
loop
loop
over
over
files
files
with
with
less
less
JavaScript.
javascript
Our
our
function
function
simply
simply
loops
loops
over
over
the
the
file
file
list
list
and
and
for
for
each
each
file
file
in
in
that
that
list,
list
it
it
will
will
trigger
trigger
the
the
upload
upload
in
in
the
the
service
service
to
to
send
send
that
that
file
file
to
to
Firebase
firebase
storage.
storage
We
we
also
also
declare
declare
a
a
separate
separate
variable
variable
and
and
function
function
to
to
keep
keep
track
track
of
of
whether
whether
or
or
not
not
files
files
are
are
hovered
hovered
over
over
the
the
drops
drops
on
on
at
at
any
any
given
given
point.
point
In
in
the
the
template,
template
we
we
start
start
by
by
adding
adding
a
a
basic
basic
progress
progress
bar,
bar
which
which
was
was
covered
covered
in
in
more
more
detail
detail
in
in
my
my
first
first
file
file
upload
upload
video.
video
Then
then
we
we
add
add
the
the
attribute
attribute
directive
directive
to
to
a
a
div.
div
From
from
there,
there
we
we
can
can
listen
listen
to
to
the
the
custom
custom
events
events
that
that
We
we
define
define
in
in
the
the
directive,
directive
and
and
when
when
those
those
events
events
occur,
occur
we
we
trigger
trigger
the
the
functions
functions
that
that
were
were
defined
defined
in
in
the
the
component.
component
So
so
in
in
this
this
case
case
when
when
the
the
user
user
drops
drops
files
files
onto
onto
the
the
directive
directive
it's
it's
going
going
to
to
trigger
trigger
that
that
handle
handle
upload
upload
function
function
and
and
that's
that's
gonna
gonna
sequentially
sequentially
Actually,
actually
upload
upload
those
those
files
files
to
to
Firebase
firebase
storage.
storage
When
when
the
the
fileshovered
fileshovered
event
event
occurs,
occurs
we
we
just
just
toggle
toggle
that
that
Boolean
boolean
variable,
variable
And
and
then
then
we
we
can
can
use
use
the
the
ng
ng
class
class
directive
directive
to
to
display
display
a
a
conditional
conditional
class
class
whenever
whenever
the
the
files
files
are
are
hovered.
hovered
In
in
this
this
case,
case
the
the
div
div
just
just
turns
turns
from
from
a
a
dashed
dashed
border
border
to
to
a
a
solid
solid
bright
bright
blue
blue
border.
border
That
that
covers
covers
the
the
basics
basics
of
of
drag
drag
and
and
drop
drop
file
file
uploads.
uploads
Some
some
other
other
things
things
you
you
might
might
consider
consider
are
are
limiting
limiting
the
the
file
file
size.
size
For
for
example,
example
throwing
throwing
an
an
error
error
if
if
the
the
user
user
tries
tries
to
to
upload
upload
a
a
really
really
large
large
file
file
or
or
limiting
limiting
the
the
file
file
uploads
uploads
to
to
only
only
certain
certain
types,
types
for
for
example,
example
if
if
you
you
only
only
wanted
wanted
to
to
have
have
images
images
uploaded
uploaded
to
to
your
your
app.
app
That's
that's
it
it
for
for
this
this
episode.
episode
If
if
you
you
found
found
the
the
video
video
helpful,
helpful
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
support
support
the
the
channel,
channel
consider
consider
becoming
becoming
a
a
pro
pro
subscriber
subscriber
at
at
angularfirebase.com.
angularfirebase.com
For
for
just
just
a
a
few
few
bucks
bucks
a
a
month,
month
you'll
you'll
get
get
access
access
view
view
exclusive
exclusive
content
content
as
as
well
well
as
as
free
free
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
The speaker explains how to build a drag and drop file upload feature in Angular 4.5, including importing files and creating a Promise to monitor the status of the upload. They also discuss creating a file drop event and limiting file size. The speaker provides information on how to access the file list and create a custom event to prevent file transfers.
Angular Drag-and-Drop File Uploads to Firebase Storage
In this episode, we're going to build a drag and drop file upload feature that uploads the file to Firebase Storage. There's already several file upload packages for Angular 4 and Angular 2, such as dropzone. Js and others, But none of them tie in easily with Firebase Storage, and it's relatively straightforward to do the entire thing from scratch, which I'll show you how to do in this lesson. Let's get started by building the service. I have another lesson that goes through Firebase file uploads in more detail. For now, I'm just gonna run through the bare minimum code that's needed to get Angular working with Firebase Storage. First, we define an upload Class that models the data we want to send to the database. In this example, we build the object by sending it a JavaScript file object to the constructor. In the upload service, we import this class as well as the AngularFire 2 package. And we also need to import the entire Firebase SDK because file uploads aren't supported at this point by the AngularFire 2 package. Now we create a function to handle the upload task. It's going to use the Firebase API to create a Promise which we can use to monitor the status of the upload itself. When the upload task is complete, it'll save some information about the file to the real time database, most importantly, the download URL, which we can use to access the file. Now we can start building the attribute directive. In this case, we go with an attribute directive over and because the functionality itself doesn't need an actual HTML template. Inside the directive, we're gonna use event emitter, Host listener and output. We use a combination of output and EventEmitter to create our own Custom events that we can send to other components in the app. In this case, we create a files dropped event, which will send a JavaScript file list object to a parent component. The file list is just the raw files that the user had dropped into that element. We can use host listener to tie in to regular JavaScript events. In this case, we're interested in listening to the drop event, which will occur anytime a user drops files onto the host element. It's important that we tell the event to prevent the default behavior because otherwise, it's gonna try to redirect to the local URL of that file. The event has a data transfer attribute that we can use to obtain the file list. Once we have this file list in a variable, we can just Emit it through our event emitter. Now we also wanna create a separate custom event that will tell us whether or not the user is hovering files over the file upload zone. We need this information because we wanna add a different CSS class whenever the user has files hovered over the element. So we'll start by adding 2 more host listeners for the drag leave and the drag enter events. And And on the drag enter event, you also wanna prevent the default behavior. A separate custom event called files hovered is created, which We'll just emit a boolean value, true or false, whenever the user is hovering files over the element. Now that we have the directive emitting the files, we need to have the parent component listen for those events, and then handle the file uploads with the service. We're using Lodash to help loop over files with less JavaScript. Our function simply loops over the file list and for each file in that list, it will trigger the upload in the service to send that file to Firebase storage. We also declare a separate variable and function to keep track of whether or not files are hovered over the drops on at any given point. In the template, we start by adding a basic progress bar, which was covered in more detail in my first file upload video. Then we add the attribute directive to a div. From there, we can listen to the custom events that We define in the directive, and when those events occur, we trigger the functions that were defined in the component. So in this case when the user drops files onto the directive it's going to trigger that handle upload function and that's gonna sequentially Actually, upload those files to Firebase storage. When the fileshovered event occurs, we just toggle that Boolean variable, And then we can use the ng class directive to display a conditional class whenever the files are hovered. In this case, the div just turns from a dashed border to a solid bright blue border. That covers the basics of drag and drop file uploads. Some other things you might consider are limiting the file size. For example, throwing an error if the user tries to upload a really large file or limiting the file uploads to only certain types, for example, if you only wanted to have images uploaded to your app. That's it for this episode. If you found the video helpful, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. For just a few bucks a month, you'll get access view exclusive content as well as free 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
The speaker explains how to build a drag and drop file upload feature in Angular 4.5, including importing files and creating a Promise to monitor the status of the upload. They also discuss creating a file drop event and limiting file size. The speaker provides information on how to access the file list and create a custom event to prevent file transfers.