Imagine that we need to display image which is stored e.g. in Style library doclib of Sharepoint Online site collection (SiteA) on another site collection (SiteB) and that users from SiteB may not have permissions on SiteA. One solution is to return this image in binary form from Azure function (which in turn will read it via CSOM and app permissions) and display in SPFx web part in base64 format. With this approach way we can avoid SPO permissions limitation (assuming that Azure functions are secured via AAD: Call Azure AD secured Azure functions from C#).
At first we need to implement http-triggered Azure function (C#) which will return requested image (we will send image url in query string param). It may look like this (for simplicity I removed errors handling):
[FunctionName("GetImage")]
public static async Task<HttpResponseMessage> Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)]HttpRequestMessage req, TraceWriter log)
{
string url = req.GetQueryNameValuePairs().FirstOrDefault(q => string.Compare(q.Key, "url", true) == 0).Value;
var bytes = ImageHelper.GetImage(url);
var content = new StreamContent(new MemoryStream(bytes));
content.Headers.ContentType = new MediaTypeHeaderValue(ImageHelper.GetMediaTypeByFileUrl(url));
return new HttpResponseMessage(HttpStatusCode.OK)
{
Content = content
};
}
Here 2 helper functions are used: one which gets actual image as bytes array and another which returns media type based on file extension:
public static class ImageHelper
{
public static byte[] GetImage(string url)
{
using (var ctx = ...) // get ClientContext
{
var web = ctx.Web;
var file = web.GetFileByServerRelativeUrl(new Uri(url).AbsolutePath);
ctx.Load(file);
var fileStream = file.OpenBinaryStream();
ctx.ExecuteQuery();
byte[] bytes = new byte[fileStream.Value.Length];
fileStream.Value.Read(bytes, 0, (int)fileStream.Value.Length);
return bytes;
}
}
public static string GetMediaTypeByFileUrl(string url)
{
string ext = url.Substring(url.LastIndexOf(".") + 1);
switch (ext.ToLower())
{
case "jpg":
return "image/jpeg";
case "png":
return "image/png";
... // enum all supported media types here
default:
return string.Empty;
}
}
}
Now we can call this AF from SPFx:
return await this.httpClient.get(url, SPHttpClient.configurations.v1,
{
headers: ..., // add necessary headers to request
method: "get"
}
).then(async (result: SPHttpClientResponse) => {
if (result.ok) {
let binaryResult = await result.arrayBuffer();
return new Promise((resolve) => {
resolve({ data: binaryResult, type: result.headers.get("Content-Type") });
});
})
And the last step is to encode it to base64 and add to img src attribute:
let img = ...; // get image element from DOM
let result = await getImage(url);
img.setAttribute("src", `data:${result.type};base64,${Buffer.from(result.data, "binary").toString("base64")}`)
After that image from SiteA will be shown on SiteB even if users don't have access to SiteA directly.
