UPDATE Watch the latest store video here: https://youtu.be/wRWZQwiNFnM

Full Lesson: https://angularfirebase.com/lessons/angular-file-uploads-to-firebase-storage/

In this episode we are going to implement file uploads with Angular and Firebase Storage. File storage is currently unsupported in the AngularFire2 package, but it's still possible to use Firebase storage by interacting directly with the Firebase Web API. We're still going use AngularFire2 for saving information about file uploads to the realtime database, such as the file name and its URL location. 

Step 1 - Generate the Files

The structure of this feature is very similar to the Angular Firebase CRUD lesson, so make sure to check that out. It is just  form that accepts files, uploads them to the storage bucket, then renders the details to a list. 

ng g service uploads/shared/upload
ng g class uploads/shared/upload
ng g component uploads/uploads-list
ng g component uploads/upload-detail
ng g component uploads/upload-form

Step 2 - Define the Upload Class

The upload class will be used by the service. Notice it has a constructor for the `file` attribute, which has a type of `File`. This class is built into JavaScript and it defines files that are passed via HTML from inputs. 

Step 3 - Build the Upload Service

The service needs to upload the file to Firebase Storage then save details about the file to the realtime database. First let's add the necessary imports import, including the Firebase API, and declare the variables. 

Here's the push upload function works step-by-step. 

1. First, Establish a reference to the firebase storage bucket. 
2. Second, define the `uploadTask` as a promise to put the file in storage. 
3. Third, monitor the uploadTask event using the `.on` function. 
4. Last, handle the events of in progress, success, and error.

When the upload is in progress we will take a snapshot to get the number of bytes transferred. Using some simple math, we convert it to a percentage to display a progress bar for the user. 

When the upload is complete, we update the database.

Before moving to the components, we need a way to delete files. Deleting a file only requires a reference to its location. Because we saved the name of the file to the database, we can use it to locate the file in storage and delete it. Here's the code to delete files from both firebase storage and the realtime  database. 

Step 4 - Build the Upload Form Component

Now we need to give users a way to choose files and upload or delete them. Let’s start with the UploadFormComponent because that is where most of the action is happening. 

When a user selects files in an HTML file input, it fires the change event. Our template will listen the change event, then pass the event to our component, which contains the list of files the user is trying to upload. 

Now we can create methods to trigger the upload function from the service. I created separate functions for handling single files and multiple files that will be connected to buttons in the template. 

For the end user, we have a progress bar that changes its width based on the snapshot from the upload service. 

To trigger the upload, we use a regular HTML input that fires the `detectFiles` whenever a new file is entered. This will define the "selectedFiles" variable. Then the user can click Upload files to push the file to storage. 

That's it firebase file uploads, see you next time. 
Step 1 - Compile your App

Running the ng build command will compile and minify your code in a single package in the dist/ folder. You could drop the contents of this directory into virtually any static website hosting platform or even an S3 bucket and you’re site would be ready to serve traffic.

Step 2 - Install Firebase Tools

Firebase has a nice command line package for deployment. Install it with NPM, then log into your firebase account. 

Step 3 - Initialize your Project

Make sure you are in the top level directory of your angular app, then run firebase init. This will take you through a one-time configuration for your app. 

For the most part, you can stick with the default settings, except in the follow cases:

Choose hosting on the first question.
Change public folder to dist when asked (it defaults to public).
Configure as single page app? Yes
If firebase asks to overwrite your index.html file, respond with NO.

Step 4 - Deploy

Now your app should be ready to deploy. Run the firebase deploy command, then check your project URL to make sure everything looks good. 

That's all for firebase deployment, see you next time.
2024-02-04T08:38:59.911Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
eece344a-11ac-490f-abf3-8b7db5a07fef
e7b7afa378352701af20a105709b6e4a266de7f292a4396c7153c0b95d9d1d72
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In this episode, we're going to implement file uploads with Angular and Firebase storage.
File storage is currently unsupported in the AngularFire 2 package, but it's still possible to use Firebase storage by inter interacting directly with the Firebase web API.
We're still going to use AngularFire 2 for saving information about file uploads to the real time database such as the file's name and its URL location.
The structure of this feature is very similar to the Angular Firebase CRUD lesson, so make sure to check that out also.
It's basically just a form that accepts files, uploads them to a storage bucket, then renders the details to a list.
The upload class will be used by the service.
This.
Notice it has a constructor for the file attribute, which has a class type of file.
This class is built into JavaScript, and it defines files that are passed via HTML form inputs.
The service needs to upload the file to file based storage.
Then save the details about the file to the real time database.
First, let's add the necessary imports, including the Firebase API.
Here's how the push upload function works step by step.
1st, establish a reference to the Firebase storage bucket.
Second, define the upload task as a promise to put the file in storage.
3rd, monitor the upload task event using the on function.
And last, we'll handle the events of in progress, success, end error.
When the upload is in progress, we will take a snapshot to get the number of bytes transferred.
Using some simple math, we convert this to a percentage to display a progress bar for the end user.
When the upload is complete, we just do a simple database update with the file information.
And then we can also catch errors here as well.
Before moving on to the components, we need a way to delete files.
Deleting a file only requires a reference to its location.
Because we save the name of the file to the database, we can use it to locate the file in storage and just go ahead and delete it.
Here's the code to delete files from both file based storage and from the real time database.
Now we need a way for users to choose files, then upload and delete them.
Let's start with the the upload form component because that's where most of the action is going to happen.
When a user selects files in an HTML file input, it fires the change event.
Our template's going to listen for this event, then pass the event to our component, which contains a list of files that the user is trying to upload.
Now we can create methods to trigger the upload function from the service.
I created separate functions for handling single files and multiple files that will be connected to buttons in the template itself.
In the template, we have a progress bar that changes width based on the snapshot from the service.
To trigger the upload, mode.
We use a regular HTML input that fires the detect files function whenever a new file is entered.
This will define the selected files variable in the component.
Then the user can click the upload files button to actually push the file to storage.
That's it for Firebase file uploads.
See you next time.
Audio

Speaker 0: In this episode, we're going to implement file uploads with Angular and Firebase storage. File storage is currently unsupported in the AngularFire 2 package, but it's still possible to use Firebase storage by inter interacting directly with the Firebase web API. We're still going to use AngularFire 2 for saving information about file uploads to the real time database such as the file's name and its URL location. The structure of this feature is very similar to the Angular Firebase CRUD lesson, so make sure to check that out also. It's basically just a form that accepts files, uploads them to a storage bucket, then renders the details to a list.

The upload class will be used by the service. This. Notice it has a constructor for the file attribute, which has a class type of file. This class is built into JavaScript, and it defines files that are passed via HTML form inputs. The service needs to upload the file to file based storage.

Then save the details about the file to the real time database. First, let's add the necessary imports, including the Firebase API. Here's how the push upload function works step by step. 1st, establish a reference to the Firebase storage bucket. Second, define the upload task as a promise to put the file in storage.

3rd, monitor the upload task event using the on function. And last, we'll handle the events of in progress, success, end error. When the upload is in progress, we will take a snapshot to get the number of bytes transferred. Using some simple math, we convert this to a percentage to display a progress bar for the end user. When the upload is complete, we just do a simple database update with the file information.

And then we can also catch errors here as well. Before moving on to the components, we need a way to delete files. Deleting a file only requires a reference to its location. Because we save the name of the file to the database, we can use it to locate the file in storage and just go ahead and delete it. Here's the code to delete files from both file based storage and from the real time database.

Now we need a way for users to choose files, then upload and delete them. Let's start with the the upload form component because that's where most of the action is going to happen. When a user selects files in an HTML file input, it fires the change event. Our template's going to listen for this event, then pass the event to our component, which contains a list of files that the user is trying to upload. Now we can create methods to trigger the upload function from the service.

I created separate functions for handling single files and multiple files that will be connected to buttons in the template itself. In the template, we have a progress bar that changes width based on the snapshot from the service. To trigger the upload, mode. We use a regular HTML input that fires the detect files function whenever a new file is entered. This will define the selected files variable in the component.

Then the user can click the upload files button to actually push the file to storage. That's it for Firebase file uploads. See you next time. Audio
In this episode, we're going to implement file uploads with Angular and Firebase storage. File storage is currently unsupported in the AngularFire 2 package, but it's still possible to use Firebase storage by inter interacting directly with the Firebase web API. We're still going to use AngularFire 2 for saving information about file uploads to the real time database such as the file's name and its URL location. The structure of this feature is very similar to the Angular Firebase CRUD lesson, so make sure to check that out also. It's basically just a form that accepts files, uploads them to a storage bucket, then renders the details to a list. The upload class will be used by the service. This. Notice it has a constructor for the file attribute, which has a class type of file. This class is built into JavaScript, and it defines files that are passed via HTML form inputs. The service needs to upload the file to file based storage. Then save the details about the file to the real time database. First, let's add the necessary imports, including the Firebase API. Here's how the push upload function works step by step. 1st, establish a reference to the Firebase storage bucket. Second, define the upload task as a promise to put the file in storage. 3rd, monitor the upload task event using the on function. And last, we'll handle the events of in progress, success, end error. When the upload is in progress, we will take a snapshot to get the number of bytes transferred. Using some simple math, we convert this to a percentage to display a progress bar for the end user. When the upload is complete, we just do a simple database update with the file information. And then we can also catch errors here as well. Before moving on to the components, we need a way to delete files. Deleting a file only requires a reference to its location.
Because we save the name of the file to the database, we can use it to locate the file in storage and just go ahead and delete it. Here's the code to delete files from both file based storage and from the real time database. Now we need a way for users to choose files, then upload and delete them.
databases
data management
Let's start with the the upload form component because that's where most of the action is going to happen. When a user selects files in an HTML file input, it fires the change event. Our template's going to listen for this event, then pass the event to our component, which contains a list of files that the user is trying to upload. Now we can create methods to trigger the upload function from the service. I created separate functions for handling single files and multiple files that will be connected to buttons in the template itself. In the template, we have a progress bar that changes width based on the snapshot from the service. To trigger the upload, mode. We use a regular HTML input that fires the detect files function whenever a new file is entered. This will define the selected files variable in the component. Then the user can click the upload files button to actually push the file to storage.
That's it for Firebase file uploads. See you next time. Audio
In this episode, we're going to implement file uploads with Angular and Firebase storage. File storage is currently unsupported in the AngularFire 2 package, but it's still possible to use Firebase storage by inter interacting directly with the Firebase web API. We're still going to use AngularFire 2 for saving information about file uploads to the real time database such as the file's name and its URL location. The structure of this feature is very similar to the Angular Firebase CRUD lesson, so make sure to check that out also. It's basically just a form that accepts files, uploads them to a storage bucket, then renders the details to a list. The upload class will be used by the service. This. Notice it has a constructor for the file attribute, which has a class type of file. This class is built into JavaScript, and it defines files that are passed via HTML form inputs. The service needs to upload the file to file based storage. Then save the details about the file to the real time database. First, let's add the necessary imports, including the Firebase API. Here's how the push upload function works step by step. 1st, establish a reference to the Firebase storage bucket. Second, define the upload task as a promise to put the file in storage. 3rd, monitor the upload task event using the on function. And last, we'll handle the events of in progress, success, end error. When the upload is in progress, we will take a snapshot to get the number of bytes transferred. Using some simple math, we convert this to a percentage to display a progress bar for the end user. When the upload is complete, we just do a simple database update with the file information. And then we can also catch errors here as well. Before moving on to the components, we need a way to delete files. Deleting a file only requires a reference to its location. Because we save the name of the file to the database, we can use it to locate the file in storage and just go ahead and delete it. Here's the code to delete files from both file based storage and from the real time database. Now we need a way for users to choose files, then upload and delete them. Let's start with the the upload form component because that's where most of the action is going to happen. When a user selects files in an HTML file input, it fires the change event. Our template's going to listen for this event, then pass the event to our component, which contains a list of files that the user is trying to upload. Now we can create methods to trigger the upload function from the service. I created separate functions for handling single files and multiple files that will be connected to buttons in the template itself. In the template, we have a progress bar that changes width based on the snapshot from the service. To trigger the upload, mode. We use a regular HTML input that fires the detect files function whenever a new file is entered. This will define the selected files variable in the component. Then the user can click the upload files button to actually push the file to storage. That's it for Firebase file uploads. See you next time. Audio
In
in
this
this
episode,
episode
we're
we're
going
going
to
to
implement
implement
file
file
uploads
uploads
with
with
Angular
angular
and
and
Firebase
firebase
storage.
storage
File
file
storage
storage
is
is
currently
currently
unsupported
unsupported
in
in
the
the
AngularFire
angularfire
2
2
package,
package
but
but
it's
it's
still
still
possible
possible
to
to
use
use
Firebase
firebase
storage
storage
by
by
inter
inter
interacting
interacting
directly
directly
with
with
the
the
Firebase
firebase
web
web
API.
api
We're
we're
still
still
going
going
to
to
use
use
AngularFire
angularfire
2
2
for
for
saving
saving
information
information
about
about
file
file
uploads
uploads
to
to
the
the
real
real
time
time
database
database
such
such
as
as
the
the
file's
file's
name
name
and
and
its
its
URL
url
location.
location
The
the
structure
structure
of
of
this
this
feature
feature
is
is
very
very
similar
similar
to
to
the
the
Angular
angular
Firebase
firebase
CRUD
crud
lesson,
lesson
so
so
make
make
sure
sure
to
to
check
check
that
that
out
out
also.
also
It's
it's
basically
basically
just
just
a
a
form
form
that
that
accepts
accepts
files,
files
uploads
uploads
them
them
to
to
a
a
storage
storage
bucket,
bucket
then
then
renders
renders
the
the
details
details
to
to
a
a
list.
list
The
the
upload
upload
class
class
will
will
be
be
used
used
by
by
the
the
service.
service
This.
this
Notice
notice
it
it
has
has
a
a
constructor
constructor
for
for
the
the
file
file
attribute,
attribute
which
which
has
has
a
a
class
class
type
type
of
of
file.
file
This
this
class
class
is
is
built
built
into
into
JavaScript,
javascript
and
and
it
it
defines
defines
files
files
that
that
are
are
passed
passed
via
via
HTML
html
form
form
inputs.
inputs
The
the
service
service
needs
needs
to
to
upload
upload
the
the
file
file
to
to
file
file
based
based
storage.
storage
Then
then
save
save
the
the
details
details
about
about
the
the
file
file
to
to
the
the
real
real
time
time
database.
database
First,
first
let's
let's
add
add
the
the
necessary
necessary
imports,
imports
including
including
the
the
Firebase
firebase
API.
api
Here's
here's
how
how
the
the
push
push
upload
upload
function
function
works
works
step
step
by
by
step.
step
1st,
1st
establish
establish
a
a
reference
reference
to
to
the
the
Firebase
firebase
storage
storage
bucket.
bucket
Second,
second
define
define
the
the
upload
upload
task
task
as
as
a
a
promise
promise
to
to
put
put
the
the
file
file
in
in
storage.
storage
3rd,
3rd
monitor
monitor
the
the
upload
upload
task
task
event
event
using
using
the
the
on
on
function.
function
And
and
last,
last
we'll
we'll
handle
handle
the
the
events
events
of
of
in
in
progress,
progress
success,
success
end
end
error.
error
When
when
the
the
upload
upload
is
is
in
in
progress,
progress
we
we
will
will
take
take
a
a
snapshot
snapshot
to
to
get
get
the
the
number
number
of
of
bytes
bytes
transferred.
transferred
Using
using
some
some
simple
simple
math,
math
we
we
convert
convert
this
this
to
to
a
a
percentage
percentage
to
to
display
display
a
a
progress
progress
bar
bar
for
for
the
the
end
end
user.
user
When
when
the
the
upload
upload
is
is
complete,
complete
we
we
just
just
do
do
a
a
simple
simple
database
database
update
update
with
with
the
the
file
file
information.
information
And
and
then
then
we
we
can
can
also
also
catch
catch
errors
errors
here
here
as
as
well.
well
Before
before
moving
moving
on
on
to
to
the
the
components,
components
we
we
need
need
a
a
way
way
to
to
delete
delete
files.
files
Deleting
deleting
a
a
file
file
only
only
requires
requires
a
a
reference
reference
to
to
its
its
location.
location
Because
because
we
we
save
save
the
the
name
name
of
of
the
the
file
file
to
to
the
the
database,
database
we
we
can
can
use
use
it
it
to
to
locate
locate
the
the
file
file
in
in
storage
storage
and
and
just
just
go
go
ahead
ahead
and
and
delete
delete
it.
it
Here's
here's
the
the
code
code
to
to
delete
delete
files
files
from
from
both
both
file
file
based
based
storage
storage
and
and
from
from
the
the
real
real
time
time
database.
database
Now
now
we
we
need
need
a
a
way
way
for
for
users
users
to
to
choose
choose
files,
files
then
then
upload
upload
and
and
delete
delete
them.
them
Let's
let's
start
start
with
with
the
the
the
the
upload
upload
form
form
component
component
because
because
that's
that's
where
where
most
most
of
of
the
the
action
action
is
is
going
going
to
to
happen.
happen
When
when
a
a
user
user
selects
selects
files
files
in
in
an
an
HTML
html
file
file
input,
input
it
it
fires
fires
the
the
change
change
event.
event
Our
our
template's
template's
going
going
to
to
listen
listen
for
for
this
this
event,
event
then
then
pass
pass
the
the
event
event
to
to
our
our
component,
component
which
which
contains
contains
a
a
list
list
of
of
files
files
that
that
the
the
user
user
is
is
trying
trying
to
to
upload.
upload
Now
now
we
we
can
can
create
create
methods
methods
to
to
trigger
trigger
the
the
upload
upload
function
function
from
from
the
the
service.
service
I
i
created
created
separate
separate
functions
functions
for
for
handling
handling
single
single
files
files
and
and
multiple
multiple
files
files
that
that
will
will
be
be
connected
connected
to
to
buttons
buttons
in
in
the
the
template
template
itself.
itself
In
in
the
the
template,
template
we
we
have
have
a
a
progress
progress
bar
bar
that
that
changes
changes
width
width
based
based
on
on
the
the
snapshot
snapshot
from
from
the
the
service.
service
To
to
trigger
trigger
the
the
upload,
upload
mode.
mode
We
we
use
use
a
a
regular
regular
HTML
html
input
input
that
that
fires
fires
the
the
detect
detect
files
files
function
function
whenever
whenever
a
a
new
new
file
file
is
is
entered.
entered
This
this
will
will
define
define
the
the
selected
selected
files
files
variable
variable
in
in
the
the
component.
component
Then
then
the
the
user
user
can
can
click
click
the
the
upload
upload
files
files
button
button
to
to
actually
actually
push
push
the
the
file
file
to
to
storage.
storage
That's
that's
it
it
for
for
Firebase
firebase
file
file
uploads.
uploads
See
see
you
you
next
next
time.
time
Audio
audio
success
The speaker explains that file uploads with Angular and ante storage are currently unsupported, but files can be uploaded through theRx web API. The file structure is similar to the Angular MSL lesson, and the service needs to upload the file to a storage bucket and save details. The speaker then explains how to delete files and how to trigger the upload process in the template.
Upload Files from Angular to Firebase Storage
In this episode, we're going to implement file uploads with Angular and Firebase storage. File storage is currently unsupported in the AngularFire 2 package, but it's still possible to use Firebase storage by inter interacting directly with the Firebase web API. We're still going to use AngularFire 2 for saving information about file uploads to the real time database such as the file's name and its URL location. The structure of this feature is very similar to the Angular Firebase CRUD lesson, so make sure to check that out also. It's basically just a form that accepts files, uploads them to a storage bucket, then renders the details to a list. The upload class will be used by the service. This. Notice it has a constructor for the file attribute, which has a class type of file. This class is built into JavaScript, and it defines files that are passed via HTML form inputs. The service needs to upload the file to file based storage. Then save the details about the file to the real time database. First, let's add the necessary imports, including the Firebase API. Here's how the push upload function works step by step. 1st, establish a reference to the Firebase storage bucket. Second, define the upload task as a promise to put the file in storage. 3rd, monitor the upload task event using the on function. And last, we'll handle the events of in progress, success, end error. When the upload is in progress, we will take a snapshot to get the number of bytes transferred. Using some simple math, we convert this to a percentage to display a progress bar for the end user. When the upload is complete, we just do a simple database update with the file information. And then we can also catch errors here as well. Before moving on to the components, we need a way to delete files. Deleting a file only requires a reference to its location. Because we save the name of the file to the database, we can use it to locate the file in storage and just go ahead and delete it. Here's the code to delete files from both file based storage and from the real time database. Now we need a way for users to choose files, then upload and delete them. Let's start with the the upload form component because that's where most of the action is going to happen. When a user selects files in an HTML file input, it fires the change event. Our template's going to listen for this event, then pass the event to our component, which contains a list of files that the user is trying to upload. Now we can create methods to trigger the upload function from the service. I created separate functions for handling single files and multiple files that will be connected to buttons in the template itself. In the template, we have a progress bar that changes width based on the snapshot from the service. To trigger the upload, mode. We use a regular HTML input that fires the detect files function whenever a new file is entered. This will define the selected files variable in the component. Then the user can click the upload files button to actually push the file to storage. That's it for Firebase file uploads. See you next time. Audio
The speaker explains that file uploads with Angular and ante storage are currently unsupported, but files can be uploaded through theRx web API. The file structure is similar to the Angular MSL lesson, and the service needs to upload the file to a storage bucket and save details. The speaker then explains how to delete files and how to trigger the upload process in the template.