We’re now able to take multiple photos and display them in a photo gallery on the second tab of our app. These photos, however, are not currently being stored permanently, so when the app is closed, they will be lost.
Fortunately, saving them to the filesystem only takes a few steps. Begin by opening the
usePhotoGallery function (
src/composables/usePhotoGallery.ts), and extract the
Next, create a couple of new functions. The Filesystem API requires that files written to disk are passed in as base64 data, so this helper function will be used in a moment to assist with that:
Next, add a function to save the photo to the filesystem. We pass in the
cameraPhoto object, which represents the newly captured device photo, as well as the fileName, which will provide a path for the file to be stored to.
Next we use the Capacitor Filesystem API to save the photo to the filesystem. We start by converting the photo to base64 format, then feed the data to the Filesystem’s
Last, update the
takePhoto function to call
savePicture. Once the photo has been saved, insert it into the front of reactive
There we go! Each time a new photo is taken, it’s now automatically saved to the filesystem.