426 Views
5 minutes read
Categories
Office 365 SharePoint

Use Blobs to Preview Documents in SharePoint without Downloading

Background:

On my most recent assignment, I was faced with the challenge of previewing a file from within a SharePoint site. The restriction was that you could not download it for security reasons yet needed to be shown in a preview. All that is exposed is an API to access the documents from a server in a secure location and you are to preview them in SharePoint online without copying it to any SharePoint document library or so. We achieved this by making use of a blob object. If we get the data as a blob, then using the SPFx webpart we can preview it directly from blob object without copying it to any location. Of course, not all types of documents can be previewed using this approach. In those cases, for which blob objects are not supported, the files have to be downloaded to the local system of the user assuming that the user has the permission to download and thus complying with the security requirement.

Steps to implement Blob Preview:

Create SPFX application

First, we need to create a basic SPFX application from the command prompt using the command “yo @microsoft/sharepoint” and follow the necessary steps as mentioned in this link https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

Connect with libraries

Import the necessary libraries for connecting API, previewing files and creating blobs as shown below:

import FileViewer from 'react-file-viewer';
import b64toBlob from 'b64-to-blob';
import { HttpClient, IHttpClientOptions, HttpClientResponse } from '@microsoft/sp-http';

Create blob and URL

Get the document in base64 format from the API call.

Convert the data to blob based on the file type as shown below:

this.setState({ errorMessage: null, fileId: null, fileName: null, fileAuthor: null, filePath: null, fileContent: null },
  () => {
 this.callAPIWithFlow(apiTestFlowURL, this.state.fileType)
  .then((response) => {
  console.log("api response: ", response);
  if (response["success"] == true) {
            this.setState({
              fileId: response["response"]["Id"],
              fileName: response["response"]["Name"],
              fileAuthor: response["response"]["Author"],
              fileContent: response["response"]["body"]["$content"],
              filePath: response["path"],
           });
  var blobImage = null;
  if (this.state.fileType == "png" || this.state.fileType ==    "tif" || this.state.fileType == "tiff" || this.state.fileType == "jpg" || this.state.fileType == "jpeg" || this.state.fileType == "snag") {
  blobImage = b64toBlob(this.state.fileContent, "image/" + this.state.fileType);

   }
  else if (this.state.fileType == "txt") {
         blobImage = b64toBlob(this.state.fileContent, "text/html");
  }
else {
  blobImage = b64toBlob(this.state.fileContent, "application/octet-stream");
    }
  this.setState({ blobUrl: URL.createObjectURL(blobImage) });

  } else {
  this.setState({ errorMessage: response["errorMessage"] });
  }

  });
 });

Also create the blob URL as shown above. At this stage, we have the blob ready for preview/download.

Preview document

The code snippet below specifies how we preview the document from blob object based on the file type in the SPFX render function.

{this.state.fileType == 'txt' ?
   <div style={{ margin: 10 }}>
   <iframe src={this.state.blobUrl} id='DocView' width='100%' height ='500px' frameBorder='0'></iframe>
   </div>
   :
   this.state.fileType == 'tif' ?
   <div style={{ margin: 10 }}>
   <img src={`data:image/` + this.state.fileType + `;base64,${this.state.fileContent}`} />
    </div>
    :
   <div style={{ margin: 10, height: 400 }}>
   <FileViewer style={{ height: 400 }} fileType={this.state.fileType} filePath={this.state.blobUrl} />
  </div>
 }

Constraints

Let us look at few downsides of this approach. The limitations stem from the fact that the File viewer does not support all file types. Some of it can be handled by code and others using SharePoint permissions.

  • For file types which can be previewed from blob object, the documents are previewed in an iframe as shown in the last code snippet.
  • For file types that cannot be previewed, the only option is to download. We can give the users permission to be able to download the files which cannot be previewed (mostly non-office files). This way the security of the documents can be maintained efficiently.

Sample Application

The below sample has the preview area in the right end which displays the file viewer/iframe-based preview, depending on the document type selected from the list of documents shown in the left. The list of documents is obtained from the API call to the server which is provided by the client.

Use Blobs to Preview Documents in SharePoint without Downloading

Conclusion

So, what have we really got here? For most cases, one would use an API to copy documents in a document library where the documents will be stored and then preview can be made. The permissions to this library can be restrictive and a user can only view the document. The trouble starts when the API provided does not allow you to copy the file over and just may be the case with increasing concern for confidentiality and security. Under such a scenario, you can make use of the blob to render a preview of the content of the file without actually downloading or making a copy of it. And of course, once you have the file in a blob, you can dig deeper !

Feel free to contact me for any further details. Happy blobbing.

Debopoma Chaudhury

About Debopoma Chaudhury

Debopoma has around 8+ years of experience in Software Development. She has expertise in Estimation, Analysis, Design, Development and Testing using C#, Ext.JS, Angular JS, Bootstrap, jQuery and SQL. Also, she has exposure on Microsoft technologies using AJAX, Telerik Controls, Web Application in Visual Studio 2008, ASP.Net 4.0, Bryntum Gantt and hold proficiency in Regression Analysis, Agile Methodology, Test Execution and Test Documentation.

Debopoma did her Graduation in B.Tech (Computer Science Engineering ) from St. Thomas College in 2008 and was the Gold Medalist in her University WBUT.

Prior to joining Netwoven, she was working with Infosys and Kovair Pvt. Ltd, Kolkata as Team Lead.

A native of West Bengal, she is presently living in Kolkata with her spouse. During her leisure time, she loves singing, writing short stories and travelling.

LinkedinTwitterFacebook

Leave a Reply

Your email address will not be published. Required fields are marked *