Skip to content

Commit

Permalink
Update Photos to support dimensions
Browse files Browse the repository at this point in the history
Adding Photos w/ Dimension support

Adding Photos to User, Group
Adding Photo to Teams
Updating Docs
  • Loading branch information
bcameron1231 committed Dec 11, 2023
1 parent 1b3b6fa commit 80abf33
Show file tree
Hide file tree
Showing 6 changed files with 104 additions and 6 deletions.
67 changes: 66 additions & 1 deletion docs/graph/photos.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,23 @@ const blobUrl = url.createObjectURL(photoValue);
document.getElementById("photoElement").setAttribute("src", blobUrl);
```

## Current User Photo by Size

This example shows the getBlob() endpoint, there is also a getBuffer() endpoint to support node.js

```TypeScript
import { graphfi } from "@pnp/graph";
import "@pnp/graph/users";
import "@pnp/graph/photos";

const graph = graphfi(...);

const photoValue = await graph.me.photos.getBySize("48x48").getBlob();
const url = window.URL || window.webkitURL;
const blobUrl = url.createObjectURL(photoValue);
document.getElementById("photoElement").setAttribute("src", blobUrl);
```

## Current Group Photo

This example shows the getBlob() endpoint, there is also a getBuffer() endpoint to support node.js
Expand All @@ -42,6 +59,40 @@ const blobUrl = url.createObjectURL(photoValue);
document.getElementById("photoElement").setAttribute("src", blobUrl);
```

## Current Group Photo by Size

This example shows the getBlob() endpoint, there is also a getBuffer() endpoint to support node.js

```TypeScript
import { graphfi } from "@pnp/graph";
import "@pnp/graph/groups";
import "@pnp/graph/photos";

const graph = graphfi(...);

const photoValue = await graph.groups.getById("7d2b9355-0891-47d3-84c8-bf2cd9c62177").photos.getBySize("120x120").getBlob();
const url = window.URL || window.webkitURL;
const blobUrl = url.createObjectURL(photoValue);
document.getElementById("photoElement").setAttribute("src", blobUrl);
```

## Current Team Photo

This example shows the getBlob() endpoint, there is also a getBuffer() endpoint to support node.js

```TypeScript
import { graphfi } from "@pnp/graph";
import "@pnp/graph/teams";
import "@pnp/graph/photos";

const graph = graphfi(...);

const photoValue = await graph.teams.getById("7d2b9355-0891-47d3-84c8-bf2cd9c62177").photo.getBlob();
const url = window.URL || window.webkitURL;
const blobUrl = url.createObjectURL(photoValue);
document.getElementById("photoElement").setAttribute("src", blobUrl);
```

## Set User Photo

```TypeScript
Expand All @@ -67,5 +118,19 @@ const graph = graphfi(...);

const input = <HTMLInputElement>document.getElementById("thefileinput");
const file = input.files[0];
await graph.me.photo.setContent(file);
await graph.groups.getById("7d2b9355-0891-47d3-84c8-bf2cd9c62177").photo.setContent(file);
```

## Set Team Photo

```TypeScript
import { graphfi } from "@pnp/graph";
import "@pnp/graph/teams";
import "@pnp/graph/photos";

const graph = graphfi(...);

const input = <HTMLInputElement>document.getElementById("thefileinput");
const file = input.files[0];
await graph.teams.getById("7d2b9355-0891-47d3-84c8-bf2cd9c62177").photo.setContent(file);
```
5 changes: 4 additions & 1 deletion packages/graph/photos/groups.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import { addProp } from "@pnp/queryable";
import { _Group } from "../groups/types.js";
import { Photo, IPhoto } from "./types.js";
import { Photo, IPhoto, IPhotos, Photos } from "./types.js";

declare module "../groups/types" {
interface _Group {
readonly photo: IPhoto;
readonly photos: IPhotos;
}
interface IGroup {
readonly photo: IPhoto;
readonly photos: IPhotos;
}
}

addProp(_Group, "photo", Photo);
addProp(_Group, "photos", Photos);
1 change: 1 addition & 0 deletions packages/graph/photos/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import "./groups.js";
import "./users.js";
import "./teams.js";

export {
IPhoto,
Expand Down
14 changes: 14 additions & 0 deletions packages/graph/photos/teams.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { addProp } from "@pnp/queryable";
import { _Team } from "../teams/types.js";
import { Photo, IPhoto } from "./types.js";

declare module "../teams/types" {
interface _Team {
readonly photo: IPhoto;
}
interface ITeam {
readonly photo: IPhoto;
}
}

addProp(_Team, "photo", Photo);
18 changes: 15 additions & 3 deletions packages/graph/photos/types.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { _GraphQueryableInstance, graphInvokableFactory } from "../graphqueryable.js";
import { _GraphQueryableCollection, _GraphQueryableInstance, graphInvokableFactory } from "../graphqueryable.js";
import { BlobParse, BufferParse } from "@pnp/queryable";
import { Photo as IPhotoType } from "@microsoft/microsoft-graph-types";
import { ProfilePhoto as IProfilePhotoType } from "@microsoft/microsoft-graph-types";
import { defaultPath } from "../decorators.js";
import { graphPatch } from "../operations.js";

@defaultPath("photo")
export class _Photo extends _GraphQueryableInstance<IPhotoType> {
export class _Photo extends _GraphQueryableInstance<IProfilePhotoType> {
/**
* Gets the image bytes as a blob (browser)
*/
Expand All @@ -31,3 +31,15 @@ export class _Photo extends _GraphQueryableInstance<IPhotoType> {
}
export interface IPhoto extends _Photo { }
export const Photo = graphInvokableFactory<IPhoto>(_Photo);

@defaultPath("photos")
export class _Photos extends _GraphQueryableCollection<IProfilePhotoType[]> {
/**
* Gets the image reference by size. 48x48, 64x64, 96x96, 120x120, 240x240, 360x360, 432x432, 504x504, and 648x648.
*/
public getBySize(size: string): IPhoto {
return Photo(this, `/${size}`);
}
}
export interface IPhotos extends _Photos { }
export const Photos = graphInvokableFactory<IPhotos>(_Photos);
5 changes: 4 additions & 1 deletion packages/graph/photos/users.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import { addProp } from "@pnp/queryable";
import { _User } from "../users/types.js";
import { Photo, IPhoto } from "./types.js";
import { Photo, IPhoto, IPhotos, Photos } from "./types.js";

declare module "../users/types" {
interface _User {
readonly photo: IPhoto;
readonly photos: IPhotos;
}
interface IUser {
readonly photo: IPhoto;
readonly photos: IPhotos;
}
}

addProp(_User, "photo", Photo);
addProp(_User, "photos", Photos);

0 comments on commit 80abf33

Please sign in to comment.