Upload Files from Angular to Firebase Storage

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