Upload Files from Angular to Firebase Storage

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

Full Lesson: https://angularfirebase.com/le....ssons/angular-file-u

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.