Microsoft Graph API - Read Office 365 SharePoint L

Question

Refrencing the following post: Microsoft Graph API - Office 365 Access SharePoint Nested Folder Items

I'm able to get a list of Images via the Graph API. I have an MVC Azure App where I'm making these Graph API calls.

However when I try to access the Image via the webUrl property, I get access denied.

I've been able to get around this by using the @microsoft.graph.downloadUrl property which I can access, download it via HttpClient convert to Byte Array and transform into a Thumbnail.

However ideally I would just be able to use my MVC site to slice and dice the graph endpoint, then just pipe out webUrl so I don't have to handle resizing or storing the image byte data.

First, why is webUrl return Access Denied?

Second, what would the best approach to just pipe the Image URL through my MVC App? I don't want to be responsible for housing/transforming the image. The data needs to be accessed publicly.

Answer 1

There are a couple of ways to do this but given that you're looking to show a thumbnail, I'd take a look at /thumbnails endpoint:

GET /sites/{site-id}/drive/items/{item-id}/thumbnails

You can use this in conjunction with the /content endpoint to retrieve the binary itself:

GET /me/drive/items/{item-id}/thumbnails/{thumb-id}/{size}/content

As for what to do with the binary result, I typically Base64 encode it on the backend and return a Data URL to the client. You can also cache this result and have your method simply check for a valid cached copy before making a new request to Graph.

This works particularly well with Profile Photos and Thumbnails where the data is pretty small.

An example of how you might do this in C# using the .NET Graph Client SDK:

var imageStream = await graphClient.Me
    .Photo
    .Content
    .Request()
    .GetAsync();

using (var memoryStream = new MemoryStream())
{
    imageStream.CopyTo(memoryStream);
    var base64pic = Convert.ToBase64String(memoryStream.ToArray());
    return "data:image;base64," + base64pic;
}