Getting anonymous thumbnails of SharePoint Online files with Microsoft Graph

If you are developing an application based on the Microsoft 365 platform which also uses files stored in SharePoint Online, chances are that you might want to make the file thumbnails available on a device (or client) without going through SharePoint authentication. It could be a mobile app or Microsoft Teams app which needs to show the thumbnails. In these cases, the end user has already signed into the app so might not be a good idea to ask them to sign in again to access files stored in SharePoint.

One thing which comes to mind straight away is to use the Data URLs of the thumbnail images. But data URLs can get fairly big as they are just the base 64 representation of the images. Also, if you have large images and you need to display a lot of them at the same time, the data travelling over the wire to your device can get fairly big.

Fortunately, the Microsoft Graph provides a great way to get the thumbnail of a file. It is also provided as an anonymously accessible link (which expires in 1 hour) so we don't have to worry about the user having to sign in again to SharePoint. More details on Microsoft docs:
https://docs.microsoft.com/en-us/graph/api/driveitem-list-thumbnails?view=graph-rest-1.0&tabs=http

This approach works for getting the thumbnails of any type of file stored in SharePoint Online. But in this post, I am going to focus only on modern pages.

First, let's see how the code for this looks in the Microsoft Graph .NET SDK:

	using Microsoft.Graph;
	using Microsoft.Identity.Client;
	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Net.Http.Headers;
	using System.Threading.Tasks;
	namespace Graph.SPO.Thumbnails
	{
	class Program
	{
	public static async Task Main(string[] args)
	{
	GraphServiceClient graphClient = await GetGraphClient();
	//Get the site object. You can use other ways to get the site object as well:
	//https://docs.microsoft.com/en-us/graph/api/site-get?view=graph-rest-1.0&tabs=http
	Site site = await graphClient.Groups["<your-office365-group-id>"].Sites["root"].Request().GetAsync();
	//Get the modern page thumbnails
	var queryOptions = new List<QueryOption>
	{
	new QueryOption("expand", "thumbnails"),
	new QueryOption("select", "thumbnails/large") //large, medium, small
	};
	var driveItem = await graphClient.Sites[site.Id].Lists["Site Pages"].Drive.Root.ItemWithPath($"/MySPOModernPage.aspx").Request(queryOptions).GetAsync();
	var thumbnail = driveItem.Thumbnails.First();
	Console.WriteLine(thumbnail?.Large?.Url);
	}
	private static async Task<GraphServiceClient> GetGraphClient()
	{
	var scopes = new string[] { "https://graph.microsoft.com/.default" };
	var clientID = "<client-id>";
	var clientSecret = "<client-secret>";
	var tenantID = "<tenant-id>";
	IConfidentialClientApplication clientApp = ConfidentialClientApplicationBuilder
	.Create(clientID)
	.WithClientSecret(clientSecret)
	.WithTenantId(tenantID)
	.Build();
	AuthenticationResult authResult = await clientApp.AcquireTokenForClient(scopes).ExecuteAsync();
	string accessToken = authResult.AccessToken;
	var graphClient = new GraphServiceClient(
	new DelegateAuthenticationProvider(
	requestMessage =>
	{
	requestMessage.Headers.Authorization = new AuthenticationHeaderValue("bearer", accessToken);
	return Task.CompletedTask;
	}));
	return graphClient;
	}
	}
	}

view raw Graph.Net.SDK.SPO.Thumbnail.cs hosted with ❤ by GitHub

This code translates to the following Graph REST API call:

https://graph.microsoft.com/v1.0/sites/your-site-id/lists/Site%20Pages/drive/root:/MySPOModernPage.aspx:?expand=thumbnails&select=thumbnails/large

view raw GraphThumbnails.md hosted with ❤ by GitHub

and the response:

(click to zoom)

The thumbnail url returned here can be used on any device, app or Adaptive Card to display the image without the need for authenticating to SharePoint. But bear in mind that this image url is only valid for 1 hour as there is an Azure AD access token attached to it. After that you might have to request a new url by making the same Microsoft Graph call.

Hope this helps!