Flow Screen Component: Salesforce Files Preview

Hi! 🙋🏻‍♂️

This one’s gonna be short and simple one. 😉

The standard flow screen component, ‘Display Image’, only allows you to preview a Static resource image. But what if your file is stored as Content Document, eh? Quite a bummer.

But with the new FilePreview component, we can say bye bye to this issue.

And with this component, you can preview not just image files but all the files types that you can preview normally in Salesforce.

You can install the component from here.

Quick Demo

Hope you find this one useful! Catch you in the next one! ✌🏻
And thank you for being an awesome reader! Subscribe to this blog for receiving all the latest updates straight to your inbox. 🙂

19 thoughts on “Flow Screen Component: Salesforce Files Preview

  1. Pingback: From Narender Singh: a File Viewer for Flow Screens – UnofficialSF

  2. Nice, but unfortunately this is not working with a login flow – it displays a small preview, but clicking on it does nothing (it is not opening a full preview overlay)…


    • Ahh… most likely because the file preview event is not firing on click which is expected.

      Workaround that I can think of is to create a lightning component that takes a URL of the image file, height and width and displays accordingly.


  3. Thanks for your reply!
    Actually, I already tried similar approach with LC and iframe (I’m not using image file, but public url of docx/pdf), however, it seems that login container is enforcing width of preview overlay making it really narrow. I can make it wider of course, by using some larger fixed width for iframe, but then it looks bad as login frame/container (flow screen) is not adapting to the width of iframe – it’s still narrow while preview file in iframe, although looking good, it is stretched over it.


  4. Pingback: Flow Screen Component: Display Images via URL |  forcePanda

  5. This is awesome!
    I was wondering how I could make the preview 100% width instead of the small box it’s in. The use case is that a bookkeeper needs to reference information on a related file (checking invoice data against what user entered).


  6. Pingback: Flow: Display Photo or Upload a Photo – Sunshine and Other Unhandled Exceptions

  7. Pingback: From Jessie Rymph: How to display or upload a contact photo using Flow – UnofficialSF

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.