From 5c42353202bdbf182ced0909d7bde12e0c05d0af Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Fri, 21 Aug 2026 11:58:42 -0400 Subject: [PATCH] docs(your-first-app): use base64FromPath function --- .../angular/your-first-app/3-saving-photos.md | 34 +++++++++++-------- .../your-first-app/4-loading-photos.md | 15 ++++---- .../angular/your-first-app/5-adding-mobile.md | 26 ++++++-------- docs/react/your-first-app/3-saving-photos.md | 34 +++++++++++-------- docs/react/your-first-app/4-loading-photos.md | 15 ++++---- docs/react/your-first-app/5-adding-mobile.md | 20 +++++------ docs/vue/your-first-app/3-saving-photos.md | 34 +++++++++++-------- docs/vue/your-first-app/4-loading-photos.md | 24 +++++++++---- docs/vue/your-first-app/5-adding-mobile.md | 25 ++++++-------- 9 files changed, 128 insertions(+), 99 deletions(-) diff --git a/docs/angular/your-first-app/3-saving-photos.md b/docs/angular/your-first-app/3-saving-photos.md index 2986081b7f4..4eb1fdfef95 100644 --- a/docs/angular/your-first-app/3-saving-photos.md +++ b/docs/angular/your-first-app/3-saving-photos.md @@ -90,7 +90,7 @@ We'll use the Capacitor [Filesystem API](../../native/filesystem.md) to save the Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object. -For now, create a new helper method, `convertBlobToBase64()`, to implement the necessary logic for running on the web. +Create a new helper method, `base64FromPath()`, to implement the necessary logic for running on the web: ```ts import { Injectable } from '@angular/core'; @@ -107,10 +107,7 @@ export class PhotoService { // CHANGE: Update the `savePicture()` method private async savePicture(photo: Photo) { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - const base64Data = (await this.convertBlobToBase64(blob)) as string; + const base64Data = await this.base64FromPath(photo.webPath!); // Write the file to the data directory const fileName = Date.now() + '.jpeg'; @@ -128,13 +125,19 @@ export class PhotoService { }; } - // CHANGE: Add the `convertBlobToBase64` method - private convertBlobToBase64(blob: Blob) { + // CHANGE: Add the `base64FromPath()` method + private async base64FromPath(path: string): Promise { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); @@ -176,10 +179,7 @@ export class PhotoService { } private async savePicture(photo: Photo) { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - const base64Data = (await this.convertBlobToBase64(blob)) as string; + const base64Data = await this.base64FromPath(photo.webPath!); // Write the file to the data directory const fileName = Date.now() + '.jpeg'; @@ -197,12 +197,18 @@ export class PhotoService { }; } - private convertBlobToBase64(blob: Blob) { + private async base64FromPath(path: string): Promise { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); diff --git a/docs/angular/your-first-app/4-loading-photos.md b/docs/angular/your-first-app/4-loading-photos.md index bf14ebd7380..ad47f2bbdf1 100644 --- a/docs/angular/your-first-app/4-loading-photos.md +++ b/docs/angular/your-first-app/4-loading-photos.md @@ -157,10 +157,7 @@ export class PhotoService { } private async savePicture(photo: Photo) { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - const base64Data = (await this.convertBlobToBase64(blob)) as string; + const base64Data = await this.base64FromPath(photo.webPath!); // Write the file to the data directory const fileName = Date.now() + '.jpeg'; @@ -178,12 +175,18 @@ export class PhotoService { }; } - private convertBlobToBase64(blob: Blob) { + private async base64FromPath(path: string): Promise { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); diff --git a/docs/angular/your-first-app/5-adding-mobile.md b/docs/angular/your-first-app/5-adding-mobile.md index 21d10528ae1..2ac9768a4b8 100644 --- a/docs/angular/your-first-app/5-adding-mobile.md +++ b/docs/angular/your-first-app/5-adding-mobile.md @@ -65,10 +65,7 @@ private async savePicture(photo: Photo) { }); base64Data = file.data; } else { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - base64Data = await this.convertBlobToBase64(blob) as string; + base64Data = await this.base64FromPath(photo.webPath!); } // Write the file to the data directory @@ -116,10 +113,7 @@ private async savePicture(photo: Photo) { }); base64Data = file.data; } else { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - base64Data = await this.convertBlobToBase64(blob) as string; + base64Data = await this.base64FromPath(photo.webPath!); } // Write the file to the data directory @@ -228,11 +222,7 @@ export class PhotoService { base64Data = file.data; } else { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - - base64Data = (await this.convertBlobToBase64(blob)) as string; + base64Data = await this.base64FromPath(photo.webPath!); } // Write the file to the data directory @@ -259,12 +249,18 @@ export class PhotoService { } } - private convertBlobToBase64(blob: Blob) { + private async base64FromPath(path: string): Promise { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); diff --git a/docs/react/your-first-app/3-saving-photos.md b/docs/react/your-first-app/3-saving-photos.md index f68985fb3cc..b8fa334d414 100644 --- a/docs/react/your-first-app/3-saving-photos.md +++ b/docs/react/your-first-app/3-saving-photos.md @@ -97,7 +97,7 @@ We'll use the Capacitor [Filesystem API](../../native/filesystem.md) to save the Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object. -For now, create a new helper method, `convertBlobToBase64()`, to implement the necessary logic for running on the web. +Create a new helper method, `base64FromPath()`, to implement the necessary logic for running on the web: ```ts import { useState } from 'react'; @@ -111,10 +111,7 @@ export function usePhotoGallery() { // CHANGE: Update the `savePicture()` method const savePicture = async (photo: Photo, fileName: string): Promise => { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - const base64Data = (await convertBlobToBase64(blob)) as string; + const base64Data = await base64FromPath(photo.webPath!); const savedFile = await Filesystem.writeFile({ path: fileName, @@ -130,13 +127,19 @@ export function usePhotoGallery() { }; }; - // CHANGE: Add `convertBlobToBase64()` method - const convertBlobToBase64 = (blob: Blob) => { + // CHANGE: Add `base64FromPath()` method + const base64FromPath = async (path: string): Promise => { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); @@ -182,10 +185,7 @@ export function usePhotoGallery() { }; const savePicture = async (photo: Photo, fileName: string): Promise => { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - const base64Data = (await convertBlobToBase64(blob)) as string; + const base64Data = await base64FromPath(photo.webPath!); const savedFile = await Filesystem.writeFile({ path: fileName, @@ -201,12 +201,18 @@ export function usePhotoGallery() { }; }; - const convertBlobToBase64 = (blob: Blob) => { + const base64FromPath = async (path: string): Promise => { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); diff --git a/docs/react/your-first-app/4-loading-photos.md b/docs/react/your-first-app/4-loading-photos.md index aebbfbaf6a6..030909b452c 100644 --- a/docs/react/your-first-app/4-loading-photos.md +++ b/docs/react/your-first-app/4-loading-photos.md @@ -175,10 +175,7 @@ export function usePhotoGallery() { }; const savePicture = async (photo: Photo, fileName: string): Promise => { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - const base64Data = (await convertBlobToBase64(blob)) as string; + const base64Data = await base64FromPath(photo.webPath!); const savedFile = await Filesystem.writeFile({ path: fileName, @@ -194,12 +191,18 @@ export function usePhotoGallery() { }; }; - const convertBlobToBase64 = (blob: Blob) => { + const base64FromPath = async (path: string): Promise => { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); diff --git a/docs/react/your-first-app/5-adding-mobile.md b/docs/react/your-first-app/5-adding-mobile.md index a3c6f48d78c..72fe336cef9 100644 --- a/docs/react/your-first-app/5-adding-mobile.md +++ b/docs/react/your-first-app/5-adding-mobile.md @@ -51,10 +51,7 @@ const savePicture = async (photo: Photo, fileName: string): Promise = }); base64Data = typeof file.data === 'string' ? file.data : await file.data.text(); } else { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - base64Data = (await convertBlobToBase64(blob)) as string; + base64Data = await base64FromPath(photo.webPath!); } const savedFile = await Filesystem.writeFile({ @@ -172,10 +169,7 @@ export function usePhotoGallery() { }); base64Data = typeof file.data === 'string' ? file.data : await file.data.text(); } else { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - base64Data = (await convertBlobToBase64(blob)) as string; + base64Data = await base64FromPath(photo.webPath!); } const savedFile = await Filesystem.writeFile({ @@ -200,12 +194,18 @@ export function usePhotoGallery() { } }; - const convertBlobToBase64 = (blob: Blob) => { + const base64FromPath = async (path: string): Promise => { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); diff --git a/docs/vue/your-first-app/3-saving-photos.md b/docs/vue/your-first-app/3-saving-photos.md index 2fd905d6d66..c674e7c7d1a 100644 --- a/docs/vue/your-first-app/3-saving-photos.md +++ b/docs/vue/your-first-app/3-saving-photos.md @@ -96,7 +96,7 @@ We'll use the Capacitor [Filesystem API](../../native/filesystem.md) to save the Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object. -For now, create a new helper method, `convertBlobToBase64()`, to implement the necessary logic for running on the web. +Create a new helper method, `base64FromPath()`, to implement the necessary logic for running on the web: ```ts import { ref } from 'vue'; @@ -110,10 +110,7 @@ export const usePhotoGallery = () => { // CHANGE: Update the `savePicture()` method const savePicture = async (photo: Photo, fileName: string): Promise => { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - const base64Data = (await convertBlobToBase64(blob)) as string; + const base64Data = await base64FromPath(photo.webPath!); const savedFile = await Filesystem.writeFile({ path: fileName, @@ -129,13 +126,19 @@ export const usePhotoGallery = () => { }; }; - // CHANGE: Add `convertBlobToBase64()` method - const convertBlobToBase64 = (blob: Blob) => { + // CHANGE: Add `base64FromPath()` method + const base64FromPath = async (path: string): Promise => { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); @@ -180,10 +183,7 @@ export const usePhotoGallery = () => { }; const savePicture = async (photo: Photo, fileName: string): Promise => { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - const base64Data = (await convertBlobToBase64(blob)) as string; + const base64Data = await base64FromPath(photo.webPath!); const savedFile = await Filesystem.writeFile({ path: fileName, @@ -199,12 +199,18 @@ export const usePhotoGallery = () => { }; }; - const convertBlobToBase64 = (blob: Blob) => { + const base64FromPath = async (path: string): Promise => { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); diff --git a/docs/vue/your-first-app/4-loading-photos.md b/docs/vue/your-first-app/4-loading-photos.md index 8c8544840f7..8b12cee24c9 100644 --- a/docs/vue/your-first-app/4-loading-photos.md +++ b/docs/vue/your-first-app/4-loading-photos.md @@ -168,7 +168,7 @@ export const usePhotoGallery = () => { // Fetch the photo, read as a blob, then convert to base64 format const response = await fetch(photo.webPath!); const blob = await response.blob(); - const base64Data = (await convertBlobToBase64(blob)) as string; + const base64Data = await base64FromPath(photo.webPath!); const savedFile = await Filesystem.writeFile({ path: fileName, @@ -184,12 +184,18 @@ export const usePhotoGallery = () => { }; }; - const convertBlobToBase64 = (blob: Blob) => { + const base64FromPath = async (path: string): Promise => { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); @@ -266,7 +272,7 @@ export const usePhotoGallery = () => { // Fetch the photo, read as a blob, then convert to base64 format const response = await fetch(photo.webPath!); const blob = await response.blob(); - const base64Data = (await convertBlobToBase64(blob)) as string; + const base64Data = await base64FromPath(photo.webPath!); const savedFile = await Filesystem.writeFile({ path: fileName, @@ -282,12 +288,18 @@ export const usePhotoGallery = () => { }; }; - const convertBlobToBase64 = (blob: Blob) => { + const base64FromPath = async (path: string): Promise => { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); diff --git a/docs/vue/your-first-app/5-adding-mobile.md b/docs/vue/your-first-app/5-adding-mobile.md index 0ef2f5bdcf3..47f70db31d6 100644 --- a/docs/vue/your-first-app/5-adding-mobile.md +++ b/docs/vue/your-first-app/5-adding-mobile.md @@ -52,10 +52,7 @@ const savePicture = async (photo: Photo, fileName: string): Promise = }); base64Data = typeof file.data === 'string' ? file.data : await file.data.text(); } else { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - base64Data = (await convertBlobToBase64(blob)) as string; + base64Data = await base64FromPath(photo.webPath!); } const savedFile = await Filesystem.writeFile({ @@ -103,10 +100,7 @@ const savePicture = async (photo: Photo, fileName: string): Promise = }); base64Data = typeof file.data === 'string' ? file.data : await file.data.text(); } else { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - base64Data = (await convertBlobToBase64(blob)) as string; + base64Data = await base64FromPath(photo.webPath!); } const savedFile = await Filesystem.writeFile({ @@ -200,10 +194,7 @@ export const usePhotoGallery = () => { }); base64Data = typeof file.data === 'string' ? file.data : await file.data.text(); } else { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - base64Data = (await convertBlobToBase64(blob)) as string; + base64Data = await base64FromPath(photo.webPath!); } const savedFile = await Filesystem.writeFile({ @@ -228,12 +219,18 @@ export const usePhotoGallery = () => { } }; - const convertBlobToBase64 = (blob: Blob) => { + const base64FromPath = async (path: string): Promise => { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); });