In this lecture, the objective is to upload the file to Firebase.
Firebase offers a service for hosting uploaded files from users.
It's absolutely free to get started if you find yourself needing more storage, you can always upgrade
to a premium plan for our project.
The free version will be enough by default.
This service is enabled for our project.
We can get started right away.
We are using the angular fire package to help us communicate with Firebase.
It comes with a module that export services for interacting with Firebase Cloud storage.
We're going to need to import this module into our app and your editor.
Open the app module file.
Next, import the angular fire storage module from the angular slash fire slash compat slash storage
package.
Lastly, we can add this module to the imports array.
We're ready to start uploading files, switch over to the upload component class after importing this
module, we can inject one of its services to upload a file at the top of the file.
We will import the angular via storage service from the angular slash forms package.
Next, in the constructor function in Jet, this service with the name storage.
The service should be private.
We don't need to access these storage methods from the template.
Let's begin using this service to initiate and upload in the upload function.
We are going to create a variable to point to the file.
Define a variable called clip path.
Its value will be the following clips slash this dot file dot name.
File organizations should always be a top priority.
We're not going to directly store the file in the storage.
We will allocate clips to a specific folder called clips.
This step is optional but recommended.
If a directory doesn't exist within the storage service, Firebase will create it for you.
Alternatively, we have the option of creating the folder manually in the Firebase console will let
Firebase handle it.
There's one problem with the path you may be tempted to use the file name in the path.
However, that introduces headaches.
Firebase does not check for duplicate files.
If one user uploads a file with the same name, the second file would override the first file.
Conflicting file names can cause issues.
Firebase does not provide a solution out of the box.
It's up to us to implement a solution.
There are different ways to tackle this issue.
I think the easiest solution would be to generate a unique file name.
In the resource section of this lecture, I provide a link to a package called UID.
The EU aid package exports a set of functions for generating a unique ID rather than generating the
ID ourselves.
We will outsource this action to a third party package.
It's super simple to use and install.
Let's give it a try.
First, we need to install it.
Switch over to the command line.
Run the following command 21:00 i you.you ID at type's slash you.you ID.
We're installing two packages first.
We're installing the you.You ID package, the second package contains Typekit for the functions defined
by the UUA ID package.
It's always considered good practice to download packages that have type support.
Otherwise, we may encounter issues with type scripts.
It's an optional package to download, but recommend it back in the upload component class.
Let's import the V for function from the you.You ID package.
I'm not a fan of the name for the function.
Let's create an alias for it.
The alias will be called ID.
Next, scroll down to the upload application above the clip path variable defined a variable called
clip file name assigned to the you.You ID function.
This function will always return a random, unique ID.
Let's replace the file name property with the file name variable.
In addition to the ID, we will need to have fixed the file extension.
The extension is called MP for.
We can proceed to upload the file after the path variable.
We will call the following function this dot storage dot upload.
As you might suspect, this function will upload a file.
It has two arguments.
The first argument is the name of the file we can pass in our clip path variable.
It's perfectly acceptable to add the path in the file name.
Firebase will understand we want to store the file in a subdirectory called clips.
The second argument is the file object.
Let's pass in the Vestact file property.
This function will initialize the upload process we're finished with writing the code for uploading
a file to Firebase.
Let's try giving things a test in the application.
Try uploading an AMP for file when you're on the second step in the form.
Press submit to initiate the upload.
We can't verify if the file was uploaded because we haven't handled the response.
We'll take care of that in another lecture.
Let's verify the file was uploaded by viewing the console.
Open the Firebase console in your browser.
On the sidebar, navigate to storage, if you're already on this page, you will need to refresh the
page to view the files uploaded to the bucket.
Great.
The files have been successfully uploaded to Firebase.
If you upload a file that's not an MP for, you shouldn't see it in the storage.
We're finished with uploading the file.
The user doesn't know if the upload was a success or not.
In the next couple of lectures will work on handling the response.