Skip to content

docs(your-first-app): use base64FromPath function #4659

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

Open
brandyscarney wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs(your-first-app): use base64FromPath function #4659

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
34 changes: 20 additions & 14 deletions docs/angular/your-first-app/3-saving-photos.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand All @@ -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<string> {
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);
});
Expand Down Expand Up @@ -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';
Expand All @@ -197,12 +197,18 @@ export class PhotoService {
};
}

private convertBlobToBase64(blob: Blob) {
private async base64FromPath(path: string): Promise<string> {
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);
});
Expand Down
15 changes: 9 additions & 6 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 @@ -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';
Expand All @@ -178,12 +175,18 @@ export class PhotoService {
};
}

private convertBlobToBase64(blob: Blob) {
private async base64FromPath(path: string): Promise<string> {
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);
});
Expand Down
26 changes: 11 additions & 15 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 @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -259,12 +249,18 @@ export class PhotoService {
}
}

private convertBlobToBase64(blob: Blob) {
private async base64FromPath(path: string): Promise<string> {
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);
});
Expand Down
34 changes: 20 additions & 14 deletions docs/react/your-first-app/3-saving-photos.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -111,10 +111,7 @@ export function usePhotoGallery() {

// CHANGE: Update the `savePicture()` method
const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
// 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,
Expand All @@ -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<string> => {
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);
});
Expand Down Expand Up @@ -182,10 +185,7 @@ export function usePhotoGallery() {
};

const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
// 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,
Expand All @@ -201,12 +201,18 @@ export function usePhotoGallery() {
};
};

const convertBlobToBase64 = (blob: Blob) => {
const base64FromPath = async (path: string): Promise<string> => {
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);
});
Expand Down
15 changes: 9 additions & 6 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 @@ -175,10 +175,7 @@ export function usePhotoGallery() {
};

const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
// 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,
Expand All @@ -194,12 +191,18 @@ export function usePhotoGallery() {
};
};

const convertBlobToBase64 = (blob: Blob) => {
const base64FromPath = async (path: string): Promise<string> => {
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);
});
Expand Down
20 changes: 10 additions & 10 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 @@ -51,10 +51,7 @@ const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> =
});
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({
Expand Down Expand Up @@ -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({
Expand All @@ -200,12 +194,18 @@ export function usePhotoGallery() {
}
};

const convertBlobToBase64 = (blob: Blob) => {
const base64FromPath = async (path: string): Promise<string> => {
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);
});
Expand Down
34 changes: 20 additions & 14 deletions docs/vue/your-first-app/3-saving-photos.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -110,10 +110,7 @@ export const usePhotoGallery = () => {

// CHANGE: Update the `savePicture()` method
const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
// 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,
Expand All @@ -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<string> => {
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);
});
Expand Down Expand Up @@ -180,10 +183,7 @@ export const usePhotoGallery = () => {
};

const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
// 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,
Expand All @@ -199,12 +199,18 @@ export const usePhotoGallery = () => {
};
};

const convertBlobToBase64 = (blob: Blob) => {
const base64FromPath = async (path: string): Promise<string> => {
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);
});
Expand Down
Loading