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 hook (
src/hooks/usePhotoGallery.ts), and get access to the
writeFile method from the
We will use the
writeFilemethod initially, but we will use the others coming up shortly, so we'll go ahead and import them now.
Next, create a couple of new functions in
The base64FromPath method is a helper util imported from "@ionic/react-hooks/filesystem". It downloads a file from the supplied path and returns a base64 representation of that file.
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
savePicture and pass in the cameraPhoto object and filename directly underneath the call to
setPhotos in the
takePhoto method. Here is the full method:
There we go! Each time a new photo is taken, it’s now automatically saved to the filesystem.