- Reusing the Ionic - Firebase Authentication App
- Taking a picture with Ionic and saving it to Firebase Storage
- Showing all pictures in a grid
You can find the sample project on my Github page: Ionic Firebase Image Upload
Before we start, a few words for this tutorial. In this tutorial we’re going to reuse the created application with the corresponding Firebase project we’ve created in the Ionic and Firebase Authentication article.
What does this mean?
We’ll in this article we’ve already created a new Ionic application, created a new Firebase project, added the Firebase and AngularFire2 SDKs and implemented the Firebase authentication.
So we now have a working Ionic application with a Firebase authentication to signup and/or login a user and detect them.
Okay fine, so what’s the actual status?
So our application has the option to logon and/or signup a new user:
If we’ve signed up or logged on with the Firebase authentication we where redirected to our
HomePage of the application:
Before we could start implementing the upload and taking the picture we need to add the camera plugin.
We need to run two commands from the command line. One for adding the Cordova plugin to our project and one for installing the
npm package of the Ionic Native plugin for the camera module.
And for the
Hint: To avoid build and publishing errors on iOS because of missing camera usage description we need to provide this info at our
config.xml for build times.
Search for the
plugin section where you can find the camera plugin. This should look like this:
Change it to:
Before we’re able to use the camera plugin inside our application we have to add it to our application module in
We’ve now successfully added the camera plugin to our application.
Before we’re able to take a picture and upload it, we should implement the image provider which should handle two things:
- Uploading a new image as Base64 string to the users spaces
- Getting a image list from the users space
For creating a new provider we’re using the Ionic CLI generator:
This generates a new
image-provider.ts file inside the
providers folder. Before we add the functions we’re adding the firebase SDK as an import and removing unnecessary things. The provider should now look like this:
Now we create three function we going to need:
- uploadImage which will have a base64 string and the user id as parameter
- getImage which will have the user id and the image id as parameter
- generateUUID as a private function for generating UUIDs as the image name
The implementation of the
generateUUID function is pretty simple. You just could copy this code:
Before we could show some images, we should implement the uploader for a image. If you have worked with the Firebase SDK before the handling of the storage should be familiar to you. Like using the authentication or the database we have to create a storage reference.
If we now want to create a new image on this storage within the users space we need two parameters for the image reference. The userId (which is a parameter of the
uploadImage function and a image name which will be a UUID.
Now we got our image reference on which we now put our image:
That’s it. The image upload is now implemented. This is how your upload function should look like:
For downloading the image we need to implement the
getImage function which needs the user id and the image id as parameter.
Like the upload function we have to create a storage reference and a reference to the existing image. On the image reference we call the
getDownloadURL function for getting the image URL. Your
getImage function should look like this:
That’s it for the
ImageProvider! We’re now able to upload images and show them inside your application.
Next is to take a picture and upload it.
Before we implement the function for taking a picture and uploading it, we need a new button to open the camera. For this switch to the
home.html file and add a new button and remove the other code inside the
The next step is to add the
takePicture function to our page component.
home.ts file we also need the dependency of the camera module. This should be added with an import statement and a dependency parameter inside the constructor. This is your
HomePage class we need an property for the camera options.
If we’ve created the camera options, we’re now able to implement the
takePicture function for taking the picture. Let’s start with the picture taking part:
It’s only three lines for taking the picture. For a working upload we now need the image data as a Base64 string, so wee need to extend the image data with the correct schema.
Now we create a new array for the image ids inside our
home.ts and also add the
ImageProvider to our
app.module.ts and the
If all imports and declarations successful, we could implement the upload into the
takePicture function and save the image name into the new image array. This array will be saved in the
That’s it! Image upload successfully implemented.
The last step will be used to create a grid for all the users images that already has been uploaded. First we need to load the already saved image names from the
localStorage inside our constructor of the
Next is to extend the template file (
home.html) with a grid for the images.
Inside the page component
HomePage we need to add the new array for the image urls.
Now we implement a new function
downloadImageUrls which iterates through the
images array and getting the right download URL for the image id. All these promises will be called and merged into an array with image urls:
This method should now called after uploading a new image and after it was added to the image id list inside the
Last we could add a second button for downloading the existing images without taking a new picture.
That’s it. This is how your application should look like.
You now have learn how to take a picture as a Base64 string and working with the Firebase Storage. You now able to write and read data from Firebase Storage and using it for larger files.
Now it’s on your own if you extend your app with even more Firebase functionality for example by storing the image ids inside the Firebase Database rather than inside the
As always you can find the sample code at the Github repository.
If you have any questions, let me now in the comment section below.