Office Document Preview from your MVC website with Azure Blobs

Storing and viewing Microsoft Office Documents within your ASP .NET Core Website

I came across a scenario where we wanted users the ability to upload Microsoft Word documents, but not have to download them in order to view them.

I’m going to share with you a simple solution using Microsoft View Office documents tool!

Prerequisites

Azure Storage Account for Blob Storage

Knowledge of C# (and Azure Storage)

Security Disclaimer

Note: This tutorial is for demonstrating purposes only and I suggest you spend more time considering the security concerns of access to your files. This tutorial will explain how you can provide temporary read access to the document to Microsoft View Office, but work still needs to be made to ensure that your endpoint is secure.

The setup

I have uploaded a simple MVC website that allows users to upload files and view the files in a table. Find the source here.

Let’s Add WindowsAzure.Storage

Package-Install Microsoft.WindowsAzure.Storage

Let’s update the appsettings.json with the connection string.

You will need to replace your BlobStorage Connection String which you can get from the Azure portal when you create your Azure Storage Blob account.

Let’s create our viewing action.

There are a few things to explain here. First we retrieve our document entity using the Id passed in. We then setup our SharedAccessBlobPolicy which we set the permissions, (read in our case), and the start and expiry time of this token.

I’ve added 10 minutes to each side just as a precaution but if you want to tighten up the security even more, you can adjust this to be a shorter window.

Next we get the blob and generate a signature token which we will append to the location of the file.

This means that after the shared token has expired, you no longer are able to access this file/blob.

Finally we are escaping the Url to return. This is necessary as View Office document requires the Url to be encoded.

Our View.cshtml is quiet simple. (Please forgive me for the inline styling here).

This page has an iframe that is rendered over the whole window.

We are using the https://view.officeapps.live.com/op/view.aspx?src=[location] where we are substituting the [location] with our file path hosted in our blob storage with the access token appended to it.

One final step, let’s update our Index.cshtml to provide a link for our documents

And that’s all!

You should have something like this.

Opening a Word document from within the browser.

A few things to consider. View Office documents caches your documents and even if you delete or the shared access token expires, the file will still exists if you access it through that URL.

This may not be a problem but it means if someone extracts the URL from within the iframe and shares it, it could be a security concern.

Again, if you are handling a lot of sensitive data and data for other users, you may want to speak to someone who knows more about data protections to ensure that you are not violating any terms.

Here is the final code.