Use the Native Filesystem to Store Photos

Use the Native Filesystem to Store Photos

In the previous lesson, we already started implementing a way to trigger different behaviour depending on whether the application is running on the web or natively on iOS/Android.

Our ultimate goal here is to use simple data URLs for photos while testing on the web/desktop, but when we are running the application on iOS/Android we want to use actual files stored on the device. More specifically, we also want to make sure to move those photo files to permanent storage on the users device. That is what we are going to be tackling in this lesson.

This lesson will only be relevant if you are running your application natively on iOS/Android. However, even if you don’t intend to run this application natively right now, you can still add this code to your application.

Remember, one of the key benefits of Ionic/Capacitor is that we can run the same code on multiple platforms, and we aren’t going to break our web code by adding this functionality.

Let’s get started.

Configuring the Filesystem plugin:

Action

Install the Filesystem plugin:

npm install @capacitor/filesystem
npx cap sync

Important

You will need to run ionic build at least once before npx cap sync will work

As with the Camera plugin, this plugin also requires native configuration which you can find here. However, if you have already performed the configuration for the Camera plugin then you should already have the permissions required for the Filesystem plugin.

Moving Files to Permanent Storage

We already have the basic structure for taking photos in our PhotoService. Now we are going to extend what happens in the add$ reducer. Not only do we need to get a photo from the Camera which is an asynchronous operation, we also need to then use the Filesystem to store that photo on the devices file system as well as still returning the photo data.

Again, have a think about how we might modify our reducer to accomplish yet. Don’t worry about the specifics of the Filesystem API, just know that we will need to call some Promise based methods to get the job done. See if you can add some pseudo-code for the general approach before continuing.

Click here to reveal solution

Solution

Action

Add the following helper method to the PhotoService class: