Saving Photos to the Filesystem
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.
Filesystem API
Fortunately, saving them to the filesystem only takes a few steps. Begin by opening the usePhotoGallery
function (src/composables/usePhotoGallery.ts
).
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:
const convertBlobToBase64 = (blob: Blob) =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onerror = reject;
reader.onload = () => {
resolve(reader.result);
};
reader.readAsDataURL(blob);
});