File Preview in Visualforce

Ever notice how cool, the preview functionality in Salesforce Chatter is? Well, you can reuse the same component that Salesforce does.

Chatter uses a Shockwave Plugin to preview files. We can make use of the same plugin using the tag in VisualForce.

Here’s the tag:

<embed src="/_swf/190003/sfc/flex/DocViewer.swf" flashvars="shepherd_prefix=/sfc/servlet.shepherd&v=**<DocumentVersionId>**&mode=chatter_bubble&in_tests=false" width="100%" height="100%" align="middle" id="renditionLarge" quality="high" bgcolor="#f3f3f3" name="renditionLarge" allowscriptaccess="always" allowfullscreen="true" pluginspage="http://www.adobe.com/go/getflashplayer" wmode="opaque" type="application/x-shockwave-flash">

The only thing you need to add to the link is the Document Version ID. (Not the Document ID)

You get the Version ID from the RelatedRecordId field of a FeedItem, or you can query the ContentVersion Object.