Upload Files to Firebase Cloud Storage with AngularFire storage uploadBytes
We want our users to have more power by uploading and downloading files to the tasks they create.
In this lesson, we'll start creating the functionality that will allow our users to upload files. I went ahead and created the UI and click handler for this feature so we can focus on the actual file uploading.
We'll use the browser's <input type="file"> to select files from our device and then we'll use Cloud Storage methods to upload the file to our storage bucket.
Instructor: [0:00] We're going to give a little bit more power to our users by allowing them to upload and download files into their tasks. To upload files, we are going to take advantage of the browser's input file, but with our own design. We are going to create an input type file. This hidden input class is adding a visibility hidden to the input.
[0:27] Then, we are going to have the label right here for attachments and we are going to have a button that's the one that's going to trigger everything. When the user clicks the button, it's going to call the add attachment function and it's going to pass the reference to this file input.
[0:46] In the class we can see that when we get the reference to the file input, we are going to do the fileinput.click to open the native file picker for the browser. Whenever there is a change event in our file picker, we are going to call the upload file function and we are going to pass that event.
[1:09] Here is where we are going to create the logic for uploading the file. We can get our file from the event from the target.files and this is an array of files we are going to get the first one because we are only allowing the user to attach one file at a time. Once we have the file, we are going to upload this file to Firebase Cloud storage.
[1:34] To do that, we are going to import storage and we are going to inject it into our constructor. Remember to import it from AngularFire. The upload process itself takes two steps.
[1:51] First, we are going to create a reference to our storage bucket. For this we are going to use the ref method importing it from AngularFire storage and this takes two parameters.
[2:04] The first parameter is going to be the current instance of storage. The second parameter is the path where we want to upload the file. For this, we can create folders by adding the slash. For this, I am going to have a parent folder that is going to be the user ID so that I can store all of the users' files in the same folder.
[2:30] Then, I am going to have the file name. Since there is a chance that the user saves files with the same name in different tasks, we don't want to overwrite those files so we are going to add some random string in the end of the name, in our case just the current date so that it has more context.
[2:48] Once we have the reference, we can call the uploadBytes function. This function takes two parameters. The first one is the reference and the second one is the file that we're going to upload.
[3:05] I can click save right here and we can do a test. If we go into the Firebase console, we are here in the storage bucket and we reload the page, we see that now we have a folder and this is my user ID. When I open the folder, I got here my picture and then you see that it's the date that we added and I can see my picture here in the console.