Save and Display Tasks Files Utilizing Firebase Cloud Storage getDownloadUrl
Now that file uploading works, we want to actually show that a task has files associated with it. To do this we will need to update the task object with a file property that we'll push files too.
In this lesson, we'll use Cloud Storage methods like getDownloadUrl() to get the file's download URL from our bucket.
Then we'll add that file's information to our task and persist it in the database to show the list of files in a task to the user.
While we do this, you'll see how we can easily add a spinner when files are being uploaded using Ionic loadingController.
Instructor: [0:00] We want to give a visual indicator to our users that a file is uploading. For that, I'm going to use a loading spinner, and right where this function is going to run I'm going to use ionic Loading Controller to create a loading spinner.
[0:16] Then I'm going to display that spinner. Once the file finishes uploading, I'm going to dismiss the loading spinner. Now we can see this in action here on our page. Then I'm going to upload another file using the spinner and then it's done. If I go back to the console, the file should be here.
[0:39] You see, this is the new picture. We also want the user to be able to see those files here on the screen. For that, we are going to edit our Task model one bit and we are going to add a new property called attachments. It's going to be of type attachment.
[0:57] The attachment interface is going to be a few properties. The name of the file, the size of the file, the type if it's an image or a file, and the URL where we can download that file. If I save here, I need to go back here and add the attachment. Once we have that, we want to do two things.
[1:19] First, once we finish uploading our file, we want to get that file's download URL from Firebase storage. A file's download URL is the URL with the token so that with just that URL I can easily access my file and render it on the screen.
[1:38] We can get that URL with a function called getDownloadUrl and we import that one from AngularFire storage. This function takes only one parameter and it's the reference to the storage object. Once we have our URL, we are going to then create a variable for all of the files that our Task has.
[2:04] We are going to push this new file that we are uploading to this array. We have the URL here. The name is going to come from file.name. The size is also going to come from our file object. Same for the type.
[2:22] Once we have that, we are going to assign a new value to our Task object. This is going to be the Object previous value and the new attachments array that we created. Now to test that this is working, I'm going to go to our Task page and after the upload file, I'm going to create an item for the file that we just uploaded.
[2:53] Since a Task can have multiple files, we are going to look through those files here in this item. The item is going to have an icon and in the label we are going to add some information about the file like the file name, the file size -- this is the size in bytes -- and lastly, the file type.
[3:21] If I save this and reload, we can add a new file. Once it's done, we can see it here in an application. I made a small mistake here. Now if I save, remember that was in memory, I can click +, add it again. I can see the icon. I can see the data, and I can save my task.
[3:45] Now if I go back into the Task and reload the page, you see that this is saved right now. This is persisted in the database.