Skip to content

docs(your-first-app): update code to match tutorial gallery repositories #4656

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brandyscarney merged 2 commits into from
Aug 20, 2026
Merged

docs(your-first-app): update code to match tutorial gallery repositories #4656

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8ea7d49
docs(vue): update code to match tutorial gallery
brandyscarney Aug 20, 2026
0ef7b4e
docs(tutorial): update readFile code to reflect tutorials
brandyscarney Aug 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/angular/your-first-app/4-loading-photos.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,13 +105,13 @@ export class PhotoService {
// CHANGE: Display the photo by reading into base64 format
for (const photo of photos) {
// Read each saved photo's data from the Filesystem
const readFile = await Filesystem.readFile({
const file = await Filesystem.readFile({
path: photo.filepath,
directory: Directory.Data,
});

// Web platform only: Load the photo as base64 data
photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
}

// CHANGE: Set the signal so the gallery view updates
Expand Down Expand Up @@ -196,13 +196,13 @@ export class PhotoService {

for (const photo of photos) {
// Read each saved photo's data from the Filesystem
const readFile = await Filesystem.readFile({
const file = await Filesystem.readFile({
path: photo.filepath,
directory: Directory.Data,
});

// Web platform only: Load the photo as base64 data
photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
}

this.photos.set(photos);
Expand Down
8 changes: 4 additions & 4 deletions docs/angular/your-first-app/5-adding-mobile.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,13 +160,13 @@ public async loadSaved() {
// If running on the web...
if (!this.platform.is('hybrid')) {
for (const photo of photos) {
const readFile = await Filesystem.readFile({
const file = await Filesystem.readFile({
path: photo.filepath,
directory: Directory.Data
});

// Web platform only: Load the photo as base64 data
photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
}
}

Expand Down Expand Up @@ -278,12 +278,12 @@ export class PhotoService {
// If running on the web...
if (!this.platform.is('hybrid')) {
for (const photo of photos) {
const readFile = await Filesystem.readFile({
const file = await Filesystem.readFile({
path: photo.filepath,
directory: Directory.Data,
});
// Web platform only: Load the photo as base64 data
photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
}
}

Expand Down
8 changes: 4 additions & 4 deletions docs/react/your-first-app/4-loading-photos.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,11 +106,11 @@ export function usePhotoGallery() {

// CHANGE: Display the photo by reading into base64 format
for (const photo of photosInPreferences) {
const readFile = await Filesystem.readFile({
const file = await Filesystem.readFile({
path: photo.filepath,
directory: Directory.Data,
});
photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
}

setPhotos(photosInPreferences);
Expand Down Expand Up @@ -143,11 +143,11 @@ export function usePhotoGallery() {
const photosInPreferences = (photoList ? JSON.parse(photoList) : []) as UserPhoto[];

for (const photo of photosInPreferences) {
const readFile = await Filesystem.readFile({
const file = await Filesystem.readFile({
path: photo.filepath,
directory: Directory.Data,
});
photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
}

setPhotos(photosInPreferences);
Expand Down
16 changes: 8 additions & 8 deletions docs/react/your-first-app/5-adding-mobile.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,10 @@ const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> =
// CHANGE: Add platform check
// "hybrid" will detect mobile - iOS or Android
if (isPlatform('hybrid')) {
const readFile = await Filesystem.readFile({
const file = await Filesystem.readFile({
path: photo.path!,
});
base64Data = readFile.data;
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!);
Expand Down Expand Up @@ -93,11 +93,11 @@ const loadSaved = async () => {
// If running on the web...
if (!isPlatform('hybrid')) {
for (const photo of photosInPreferences) {
const readFile = await Filesystem.readFile({
const file = await Filesystem.readFile({
path: photo.filepath,
directory: Directory.Data,
});
photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
}
}

Expand Down Expand Up @@ -131,11 +131,11 @@ export function usePhotoGallery() {
// If running on the web...
if (!isPlatform('hybrid')) {
for (const photo of photosInPreferences) {
const readFile = await Filesystem.readFile({
const file = await Filesystem.readFile({
path: photo.filepath,
directory: Directory.Data,
});
photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
}
}

Expand Down Expand Up @@ -167,10 +167,10 @@ export function usePhotoGallery() {
let base64Data: string | Blob;
// "hybrid" will detect mobile - iOS or Android
if (isPlatform('hybrid')) {
const readFile = await Filesystem.readFile({
const file = await Filesystem.readFile({
path: photo.path!,
});
base64Data = readFile.data;
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!);
Expand Down
12 changes: 6 additions & 6 deletions docs/vue/your-first-app/4-loading-photos.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,11 +117,11 @@ export const usePhotoGallery = () => {

// CHANGE: Display the photo by reading into base64 format
for (const photo of photosInPreferences) {
const readFile = await Filesystem.readFile({
const file = await Filesystem.readFile({
path: photo.filepath,
directory: Directory.Data,
});
photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
}

photos.value = photosInPreferences;
Expand Down Expand Up @@ -207,11 +207,11 @@ export const usePhotoGallery = () => {
const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];

for (const photo of photosInPreferences) {
const readFile = await Filesystem.readFile({
const file = await Filesystem.readFile({
path: photo.filepath,
directory: Directory.Data,
});
photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
}

photos.value = photosInPreferences;
Expand Down Expand Up @@ -305,11 +305,11 @@ export const usePhotoGallery = () => {
const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];

for (const photo of photosInPreferences) {
const readFile = await Filesystem.readFile({
const file = await Filesystem.readFile({
path: photo.filepath,
directory: Directory.Data,
});
photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
}

photos.value = photosInPreferences;
Expand Down
20 changes: 10 additions & 10 deletions docs/vue/your-first-app/5-adding-mobile.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,10 @@ const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> =
// CHANGE: Add platform check
// "hybrid" will detect mobile - iOS or Android
if (isPlatform('hybrid')) {
const readFile = await Filesystem.readFile({
const file = await Filesystem.readFile({
path: photo.path!,
});
base64Data = readFile.data;
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!);
Expand Down Expand Up @@ -98,10 +98,10 @@ const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> =
// CHANGE: Add platform check
// "hybrid" will detect mobile - iOS or Android
if (isPlatform('hybrid')) {
const readFile = await Filesystem.readFile({
const file = await Filesystem.readFile({
path: photo.path!,
});
base64Data = readFile.data;
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!);
Expand Down Expand Up @@ -145,12 +145,12 @@ const loadSaved = async () => {
// If running on the web...
if (!isPlatform('hybrid')) {
for (const photo of photosInPreferences) {
const readFile = await Filesystem.readFile({
const file = await Filesystem.readFile({
path: photo.filepath,
directory: Directory.Data,
});
// Web platform only: Load the photo as base64 data
photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
}
}

Expand Down Expand Up @@ -195,10 +195,10 @@ export const usePhotoGallery = () => {
let base64Data: string | Blob;
// "hybrid" will detect mobile - iOS or Android
if (isPlatform('hybrid')) {
const readFile = await Filesystem.readFile({
const file = await Filesystem.readFile({
path: photo.path!,
});
base64Data = readFile.data;
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!);
Expand Down Expand Up @@ -253,12 +253,12 @@ export const usePhotoGallery = () => {
// If running on the web...
if (!isPlatform('hybrid')) {
for (const photo of photosInPreferences) {
const readFile = await Filesystem.readFile({
const file = await Filesystem.readFile({
path: photo.filepath,
directory: Directory.Data,
});
// Web platform only: Load the photo as base64 data
photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
}
}

Expand Down
2 changes: 1 addition & 1 deletion docs/vue/your-first-app/7-live-reload.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ Wrap each image in a `<button>` element with a click handler. When the app user

<ion-grid>
<ion-row>
<ion-col size="6" v-for="(photo, index) in photos" :key="photo">
<ion-col size="6" v-for="(photo, index) in photos" :key="index">
<!-- CHANGE: Wrap the image in a button element and add a click event listener -->
<button @click="showActionSheet(photo)">
<img :src="photo.webviewPath" :alt="`Photo ${index + 1}`" loading="lazy" />
Expand Down